Zaydek
Pro-tip: do `` then the whole website debugged without a bookmark!
I think to start with a cheat sheet using MDN-like grammars or PEGs e.g. `property: [ this | thing ]`, then a few sentences (3) per line, then the pretty...
You should also think about how many kinds of tools do you need to express interactive classes? Slides? Number-entry? etc. Would be interesting if there's less than 5 or so,...
Other forms of inspiration: find 2-3 fonts you want to feature for the docs, possibly including a monospace font of your choosing, too.
Really like the gradient fades used here: https://twitter.com/hoverstates/status/985839056264286208. I think that might look sporty in the docs.
Interactive components as meaning buttons, number-entries, sliders, etc. you might want to use to showcase the CSS variables as interactive.
FWIW of the three you shared, this is my favorite: https://shoelace.style/docs/installing.html. I love the sidebar and its use of reverse justification.
Whoa. Really interesting http://tedconf.github.io/shed-css/border.html. They use ':' in the class name as the ultimate shorthand, e.g. `p:5`. IMO that looks better than `p-5`. Might be worth considering for a future...
This is nice documentation, too: http://kenwheeler.github.io/slick/.
LOL nvm it doesn't work! I don't know how they did that; `.m:x`