5 ms·
Sass removes most of the cruft. I made a semantic flex grid many years ago, and the result was a lot more clean than using utilities, even in the css side [0].
by nitely 7y ago
Sass removes most of the cruft. I made a semantic flex grid many years ago, and the result was a lot more clean than using utilities, even in the css side [0]. This was before CSS Grid Layout was widely supported, nowadays you can use plain CSS grids and get similar results.
[0] https://github.com/nitely/semantic-flex-grid/ https://github.com/nitely/semantic-flex-grid/
- leeoniya 7y ago> I made a semantic flex grid many years ago, and the result was a lot more clean than using utilities your grid has zero media queries in it, which means whatever grid classes you were using before were not responsive - which is where 90% of the complexity lives. complex/nested responsive grids are not simple, unfortunately. i've made one, too: https://github.com/leeoniya/flecks https://github.com/leeoniya/flecks
- nitely 7y ago> complex/nested responsive grids are not simple, unfortunately. How does utilities make complex/nested responsive grid simple, again? I'm arguing semantic css is simpler than using utilities all over the HTML, not that it magically makes responsive design easy. > your grid has zero media queries in it, which means whatever grid classes you were using before were not responsive - which is where 90% of the complexity lives. There are some in the examples [0][1]. Both for responsive design and nested grid, sadly not for both at the same time. It's not much more complex, though, well I guess it depends on how complex are we talking about. Anyway, CSS Grid makes semantic layout a lot simpler now. [0] https://github.com/nitely/semantic-flex-grid/blob/gh-pages/sass/styles.scss#L59 https://github.com/nitely/semantic-flex-grid/blob/gh-pages/s... [1] https://nitely.github.io/semantic-flex-grid/ https://nitely.github.io/semantic-flex-grid/