Building style guides with kss-node

This software is a Node.js implementation of Knyle Style Sheets (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".

  1. Write human-readable documentation using "KSS syntax" comments. Can be added to CSS, Sass, LESS, or any other CSS Preprocessor files.
  2. Have kss-node auto-generate a style guide from your stylesheets.

Here's an example KSS comment:

/*
Button

Your standard button suitable for clicking.

:hover   - Highlights when hovering.
.shiny   - Do not press this big, shiny, red button.

Style guide: components.button
*/
.button {
  ...
}
.button.shiny {
  ...
}

For more information on how to write KSS comments, see the KSS spec.

kss-node demo

This site is generated with the kss-node command-line tool and parses the KSS documentation found in this demo project.

The styling of this site is a demo of kss-node's default style guide generator. By using the site navigation to the left (or above), you can see how your documentation would look with the default generator. Note that alternate generators are available.

JavaScript API

If you don't wish to use the default style guide template, you can either:

For more information on how to integrate kss-node with your own JavaScript, see the JavaScript API documentation.

Project homepage

Check out the project on Github for more information about the code.