DEV Community

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

✨ Announcing ModernCSS.dev

5t3ph profile image Stephanie Eckles ・1 min read

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!

Discussion (20)

pic
Editor guide
Collapse
nickytonline profile image
Nick Taylor (he/him)

The site looks great!

Collapse
5t3ph profile image
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 Author

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 Author

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 Author

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 Author

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 Author

Thank you so much!! 💫

Collapse
5t3ph profile image
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 Author

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 Author

Oh wow, thanks! ✨

Collapse
osamaku profile image
osamaKu

great job

Collapse
abodmicheal profile image