New Title: Compressed HTML Matrix Layout Design Using Pure CSS and HTML-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

New Title: Compressed HTML Matrix Layout Design Using Pure CSS and HTML

P粉458913655 2023-09-07 21:27:33

441

I'm trying to create a logo using pure HTML and CSS. The design is very intuitive, being a [13x13] matrix containing some colored items.

CSS is very simple and minor. However, the HTML code has many repeated parts and needs to be DRY (Don't Repeat Yourself).

body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } s { } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }

I've tried usinginstead ofwithout success.

Is there any way to reduce this code?

Note:The color should remain unchanged.

P粉458913655

reply all (1)

P粉7138468792023-09-08 09:14:38 1 floor

If javascript is available, you can concatenate the cell type into a string object and use it to dynamically build the flag. Sample code is as follows.

let logo = document.getElementById("logo"); logo.dataset["cells"].split('').forEach(a => logo.append(document.createElement(a)));

body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }

Based on the need for HTML/CSS and @Temani Afif's comment, here is an SVG solution:

.w * { stroke:red;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .l * { stroke:green;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .f * { stroke:blue;stroke-width:1;;fill:none;stroke-linejoin="miter"; }