c3css v1.0.0
C3 Style Guide NPM Project
C3 Style Guide is an NPM-based project that generates the style guide via comments in SCSS
Why NPM?
Although the project code itself is not intended for the Node.js runtime but rather a browser environment, the tools used to generate the code that will ultimately be delivered to the browser do run in Node.js. Moreover, NPM provides development tools and dependency management that are currently the standard for JavaScript development.
What node package is used to generate the style guide?
We use the pacakge called kss-node to generate the style guide. This is a Node.js implementation of KSS, "a documentation syntax for CSS" that's intended to have syntax readable by humans and machines. Hence, the kss-node software can be used to create a "living style guide".
- Write human-readable documentation using "KSS syntax" comments.
- Have the kss tool automatically build a style guide from your stylesheets.
Compiling
This project uses Webpack for bundling the assets that the style guide will need. The source files are located in the build folder and will get compiled to ui/content/styleguide.
NPM Scripts
The following NPM scripts have been setup to help with development.
| CLI Command | Description |
|---|---|
npm run build | Compiles the style guide |
npm run build-kss-builder | Compiles the kss style guide template located in custom-builder |
npm run build-and-prov | Compiles the style guide and provision the package |
npm run watch | Compiles the style guide and automatically re-compiles whenever files are saved and provision. This one is helpful when you're developing without manually run npm run build |
Where to see the style guide?
You can provision cssLibrary and access the style guide directly at http://[your-vanity-url-to-your-css-library-package]:8080/styleguide/index.html
You can also provision uiSDLDemo and click on Style guide in the side menu. The style guide lives in an iframe in uiSDLDemo
Resources
How to Document a Component - how-to-document-a-component.md KSS Node Homepage - https://github.com/kss-node/kss-node
3 years ago