fortune
fortune copied to clipboard
vikramrojo
Fortune documentation
Placeholder for ideas on what to build for a documentation site
- https://adam-marsden.co.uk/css-cheat-sheet
- https://mustard-ui.com/
- https://shoelace.style/docs/installing.html
- http://tedconf.github.io/shed-css/index.html
A cheat sheet might be a good first version https://github.com/AdamMarsden/css-cheat-sheet/blob/master/readme.md
Documentation Sample
Tokens
Gap --gap-x | rem | 0-0.75rem
Space --space-x | rem | 0-10rem
Color --color: color | #001f3f
State --state-x | var(color) | primary | secondary | info | success | warning | danger | light | dark | disabled
Darken --darken-x00 | rgba
Lighten --lighten-x00 | rgba
Component --component-x | bg-color | border-color | border-radius | focus | padding-x | padding-y | speed | font-size
Components
Alert .alert | --alert-x | color | bg-color | border-radius | paddying-y | padding-x
Alert Variations .alert.alert-x | secondary | info | success | warning | danger
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 documentation might be the best method of progress. Also, I don't see why not making it multilingual. Might be a simple-enough API to do machine-translation in the browsers so you can just hit the language of your choosing without having to leave the page.
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, therefore can have high-quality, reusable components for talking to the stylesheets.
Other forms of inspiration: find 2-3 fonts you want to feature for the docs, possibly including a monospace font of your choosing, too.
I wanted to start with the cheat sheet after seeing https://github.com/AdamMarsden/css-cheat-sheet so that's 70% complete. I need to address #39 this week and finish the readme.md.
Could you explain interactive classes a bit more?
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.
There's another css framework, shed which is by far my fav http://tedconf.github.io/shed-css/index.html
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 enhancement.