Fortune documentation

[vikramrojo]

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

[vikramrojo]

A cheat sheet might be a good first version https://github.com/AdamMarsden/css-cheat-sheet/blob/master/readme.md

[vikramrojo]

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

[vikramrojo]

Registered fortunecss.com

[zaydek-old]

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.

[zaydek-old]

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.

[zaydek-old]

Other forms of inspiration: find 2-3 fonts you want to feature for the docs, possibly including a monospace font of your choosing, too.

[vikramrojo]

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?

[zaydek-old]

Really like the gradient fades used here: https://twitter.com/hoverstates/status/985839056264286208. I think that might look sporty in the docs.

[zaydek-old]

Interactive components as meaning buttons, number-entries, sliders, etc. you might want to use to showcase the CSS variables as interactive.

[zaydek-old]

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.

[vikramrojo]

There's another css framework, shed which is by far my fav http://tedconf.github.io/shed-css/index.html

[zaydek-old]

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.

[zaydek-old]

This is nice documentation, too: http://kenwheeler.github.io/slick/.

[zaydek-old]

LOL nvm it doesn't work! I don't know how they did that; .m:x

[zaydek-old]

The code looks amazing here IMO https://alligator.io/vuejs/basic-ssr/