Minimal snippets for modern CSS layouts and components, created by Stephanie Eckles of ModernCSS.dev

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the --min value. The smol stacked layout is a grid feature that can often replace older techniques that relied on absolute positioning.

SmolCSS

ooooh these are all very nice, remember when centering vertically and horizontally would take you an unnecessarily large amount of markup?

i liked it. This is much better than using a library/framework for CSS, because most of those are non-semantic and thus making it all pretty wrong. Doing proper CSS doesn’t require a framework, if one knows what to do, although there are some reusable patterns and definitions. This article educates and provide reusable snippets for copy/pasting - that’s the best, tmho.
Some examples/snippets, though, can be much simpler, tmo (e.g. the avatars).

This is a really unique approach on layouts &amp; cards for UI