A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.
Random things to note!
- The resizeable containers aren’t some JavaScript library. They are just
<div>s withresize: horizontal;andoverflow: auto;(although there is a nice little lib for that that displays current width output). - Each demo can be opened on CodePen, which is the prefill API at work.
- CSS custom properties are tastefully sprinkled throughout in a way that makes it more understandable instead of less understandable.
- The dark mode doesn’t go super duper dark, but fairly dark blues and purples. That’s a good reminder that dark mode isn’t gray/black mode. It remembers your setting, but does have flash-of-light-mode, which is the boss-mode problem with color preferences. I think you need server-side tech to really get it perfect.
- The whole site is open source. Go Eleventy!