DEV Community

Discussion on: Do you use a CSS framework based on CSS Grid?

Collapse
 
dennissmit profile image
Dennis Smit
Collapse
 
kenbellows profile image
Ken Bellows • Edited

Huh, that's interesting. But man, it bugs me that they went full non-standard. Non-standard tags like <grid> and <c>, non-standard attributes like columns and span without prefixing with data-... the tags especially bother me, because (unless I misunderstand) the non-standard tag names are required. I couldn't use semantic HTML with raster.css if I wanted to, could I? Or is there a way I could use <main> or <article> or <section> with like class="grid" or something? Because, at least based on the code snippets on the landing page, the CSS selectors seem to be explicitly bound to the <grid> and <c> tags:

/* Raster grid subsystem (rsms.me/raster) */
grid {
  display: grid;
  --grid-tc: repeat(4, 1fr);
  grid-template-columns: var(--grid-tc);
  --grid-cs: 1; /* column start */
  --grid-ce: -1 /* column end */
}

/* c -- cell or column */
grid > c { display: block; appearance: none; -webkit-appearance: none }

grid[columns="1"] { --grid-tc: repeat(1, 1fr) }
grid[columns="2"] { --grid-tc: repeat(2, 1fr) }
grid[columns="3"] { --grid-tc: repeat(3, 1fr) }

/* ... */

It seems to be a cool start of something, but I really wish they would switch from grid[columns=1] to .grid[data-columns=1], etc. Or at least offer that as an option, because straight up preventing me from using semantic elements eliminates like half of the value that I see in CSS Grid. It's a deal breaker for me if I lose the flat semantic structures that don't require a ton of gross non-semantic container divs just to make my CSS happy.

Collapse
 
dennissmit profile image
Dennis Smit • Edited

All true, I feel u brother! But still, its a cool lightweight framework.