DEV Community

Cover image for ✨ Announcing ModernCSS.dev
Stephanie Eckles
Stephanie Eckles

Posted on

✨ Announcing ModernCSS.dev

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!

Top comments (19)

Collapse
 
nickytonline profile image
Nick Taylor

The site looks great!

Collapse
 
5t3ph profile image
Stephanie Eckles

Thank you! 😊

Collapse
 
rattanakchea profile image
Rattanak Chea

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

Collapse
 
5t3ph profile image
Stephanie Eckles

Aww, thanks so much!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

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

Also, really liked the rainbow border! 🤩

Good work

Collapse
 
5t3ph profile image
Stephanie Eckles

Awww, thanks!! 💫

Collapse
 
cfecherolle profile image
Cécile Fécherolle

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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

Collapse
 
pris_stratton profile image
pris stratton

Wow the site looks brilliant.

Collapse
 
5t3ph profile image
Stephanie Eckles

Thank you so much! 💫

Collapse
 
azzcatdesign profile image
Catherine Azzarello

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

Collapse
 
5t3ph profile image
Stephanie Eckles

Thank you so much!! 💫

Collapse
 
5t3ph profile image
Stephanie Eckles

🙌🏻🤣

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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

Collapse
 
tomhodgins profile image
Tommy Hodgins

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

Collapse
 
5t3ph profile image
Stephanie Eckles

Oh wow, thanks! ✨

Collapse
 
osamaku profile image
osamaKu

great job