DEV Community

Cover image for SmolCSS.dev - Minimal Modern CSS Snippets
Stephanie Eckles
Stephanie Eckles

Posted on

54 16

SmolCSS.dev - Minimal Modern CSS Snippets

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?

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (7)

Collapse
 
learosema profile image
Lea Rosema (she/her) β€’

Love your resources, keep up the good work πŸ˜πŸ¦„

Collapse
 
5t3ph profile image
Stephanie Eckles β€’

Thanks so much Lea! I enjoy your CSS work as well πŸ’«

Collapse
 
bevilaquabruno profile image
Bruno β€’

Nice !

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
5t3ph profile image
Stephanie Eckles β€’

Aww thanks!

Collapse
 
rpearce profile image
Robert Pearce β€’

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

Collapse
 
javanpohl profile image
Javan Pohl β€’

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

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay