DEV Community

loading...
Cover image for SmolCSS.dev - Minimal Modern CSS Snippets

SmolCSS.dev - Minimal Modern CSS Snippets

5t3ph profile image Stephanie Eckles ใƒป1 min read

This week I launched my latest CSS-related project - SmolCSS.dev - which showcases minimal snippets for modern CSS layouts and components.

SmolCSS is intended to be a companion reference to my in-depth tutorials found at ModernCSS.dev.

So far, you can learn how to:

  • create a responsive CSS grid layout
  • create a responsive flexbox grid layout
  • ๐Ÿ”ฅ center anything ๐Ÿ”ฅ
  • enable responsive padding
  • create a responsive sidebar

The selected snippets use just enough CSS to achieve the layout result. This is not to be clever, but to showcase how much we can do with little effort using modern CSS!

More snippets will be added over time, so be sure to bookmark SmolCSS.dev or grab the RSS feed to stay updated!

This project was kickstarted when I joined Colby Fayock for his live stream show Colbyashi Maru. Catch the replay and learn about the static site generator Eleventy while watching me build the base of SmolCSS.dev.

โžก๏ธ What solutions would you like me to explore next?

Discussion (7)

pic
Editor guide
Collapse
terabaud profile image
Lea Rosema (she/her)

Love your resources, keep up the good work ๐Ÿ˜๐Ÿฆ„

Collapse
5t3ph profile image
Stephanie Eckles Author

Thanks so much Lea! I enjoy your CSS work as well ๐Ÿ’ซ

Collapse
jmau111 profile image
Julien Maury

Not only are your projects useful but beautiful too. Looks pretty cool.

Collapse
5t3ph profile image
Collapse
rpearce profile image
Robert Pearce

I'm jealous I didn't think of this first! Love it -- well done!

Collapse
bevilaquabruno profile image
Collapse
javanpohl profile image
Javan Pohl

I love the name and the minimalist approach you're going for. And 'center ANYTHING'?!! Flameo indeed