loading...
Cover image for ✨ Announcing ModernCSS.dev

✨ Announcing ModernCSS.dev

5t3ph profile image Stephanie Eckles ・1 min read

Modern CSS Solutions to Old CSS Problems (17 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 15 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout

Thanks to everyone who has shown this series love, I obtained the domain ModernCSS.dev

Right now, it's essentially using DEV as a headless CMS to feed posts directly. But I'd love to expand it to additional resources, so stay tuned!

It was fun to design, really fun to learn 11ty, and includes stuff I've talked about in this series plus a few things to hopefully surprise and delight.

Tech & Stats

  • 11ty - a static site generator capable of using Node modules and mixing template languages which was perfect for this type of project. It's also wickedly speedy!
  • html-css-jumpstart - I expanded the minimal Sass/HTML starter that I recently released
  • Netlify - hosting
  • IFTTT - watches RSS feed to ping Netlify webhook to republish site when new DEV post published
  • one single teensy JS function for a bit of delight on the main page
  • 3.4kb CSS, Gzipped
  • Speed index - 0.702s
  • Lighthouse score - just shy of perfect 💯due to Google Web fonts which I'm going to resolve soon!

Feedback welcome!

Visit ModernCSS.dev >

If you find an issue, you can file it on Github.

If you have suggestions for future content or any other comments, drop 'em below!

Modern CSS Solutions to Old CSS Problems (17 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 15 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout

Posted on Jun 11 by:

5t3ph profile

Stephanie Eckles

@5t3ph

Girl Geek, Web Dev (frontend/JS/React) building a design system, teaching a code video series, authoring ModernCSS.dev, egghead instructor, mom to 2 girls

Discussion

markdown guide
 

Just found your site through CSS trick. It is an instant bookmark. Amazing.

 
 
 
 

Wow. Great work!! 💯 That speed index is fire 🔥

Also, really liked the rainbow border! 🤩

Good work

 
 

Wow, these rainbow blocks look amazing! Great idea and execution. Makes me wanna read the series now :D

 

Thanks so much, I hope you enjoy! New episode dropping shortly 😉

 

Site looks great, can't wait to share this with my whole dev team! Keep it up :D:D:D

 
 

I've bookmarked to refer to later. Currently checking out Inspector to see all the pretty gradients done so well! Lovely site!

 
 

Wow the site looks brilliant.

 
 
 

I could learn a lot of web development from your examples - the site mentioned here being one of them! Great work.

 

Thank you, Eric! I'm so glad to hear you find this useful! 🌟