c3css

C3 CSS Library

Usage no npm install needed!

<script type="module">
  import c3css from 'https://cdn.skypack.dev/c3css';
</script>

README

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