Just a fun, pure CSS exploration of some newer or less common CSS features, including CSS Grid, Flexbox, position: sticky, and Sass (for the random colors and a couple other niceties).
I believe in the power of CSS 😍
I kind of stole your random color generator for my little CSS grid experiment / flexbox rant https://codepen.io/facundocorradini/pen/XVMLEq
hope you don't mind :) thanks!
Josh this pen rocks!! Very cool man, thanks for sharing.
Ok, unbreak my brain please. :not(:empty), if the div has content, then it will follow the following rules. But the position: sticky/top:0, does the position sticky not come into effect UNTIL the element is AT top: 0 ? That's the bit that has me scratching my head...
@woodybepierced Sorry, I'm awful at checking comments! Hopefully you've long-since gotten an answer to your question by now, but just in case: an element with position: sticky basically just is positioned normally until it hits the given offset (in this case, top: 0, at which point the element switches to position: fixed and stays there.
So if you had an element set to position: sticky and top: 20px, it would be normally positioned until it was 20 pixels from the top of the viewport, at which point it would stay 20 pixels from the top. Hope that helps!
Need to know how to enable it? Go here.