Start documenting CSS code

[magicznyleszek]

Description

For JS code we use JSDoc, we should start using something similar for our styles.

Let's do some research and start using one of:

1. https://react-styleguidist.js.org/
2. https://fractal.build/
3. https://storybook.js.org/
4. https://uiengine.uix.space/
5. https://github.com/dimanech/atlas-guide
6. http://warpspire.com/kss/ dead
7. https://github.com/csstools/mdcss dead
8. https://holidaypirates.github.io/nucleus/ dead
9. https://github.com/Paratron/CSSdoc dead
10. https://www.naturaldocs.org/ someone mentioned that it could be used to document CSS, but seems not true :?:
11. https://github.com/bjankord/Style-Guide-Boilerplate dead
12. http://atomicdocs.io not for us
13. https://github.com/blueberryapps/react-bluekit dead
14. https://github.com/mpetrovich/stylemark dead
15. https://github.com/bitovi/documentcss dead
16. http://fbrctr.github.io/ dead
17. https://github.com/webpro/component-styleguide dead
18. https://github.com/NoDivide/astrum dead
19. https://patternlab.io not for us
20. https://github.com/DSSORG/DSS dead
21. https://github.com/trulia/hologram dead
22. https://github.com/EightMedia/styleguide.js dead
23. https://github.com/morishitter/postcss-style-guide dead
24. https://github.com/styledown/styledown dead
25. https://github.com/emiloberg/markdown-styleguide-generator dead
26. https://github.com/Dkogan90/simple-style-guide dead
27. https://github.com/aigis-styleguide/aigis dead
28. https://github.com/jacobrask/styledocco dead
29. https://github.com/winstromming/sassdown dead

Expected outcome of this task:

• a package installed for the repository
• possibly introduce some way to ensure style guide is being built for each change/commit

Additional details

Possible alternative to this would be moving styles from separate files inside js.

[magicznyleszek]

React Styleguidist

• understands JSDoc comments
• understands TypeScript
• you can add componentName.md file with documentation text
• you can probably document purely css components by making standalone .md files

[magicznyleszek]

Fractal:

• language agnostic
• documentation completely separate from code

[magicznyleszek]

Storybook:

• you write a separate interactive (live configuration) documentation (style guide) by importing existing React compoenents
• useful for visual testing
• we can use it for documenting purely css components

[magicznyleszek]

UI Engine:

• completely separate documentation
• requires changes in file architecture
• not very interesting

[magicznyleszek]

Atlas:

• css documentation in css files using markdown in comments