Skip to content

KSS – CSS Documentation Generator

Screen-Shot-2012-12-17-at-11.57.14Documentation is a sensitive subject of development, because most of the documents might suffer changes during the development process and for most of the times the progress of the work is not direct proportional with the changes we’ve made. We might slip some things from our hand during the development. Because of all this, we need a book where we can add all of the development elements, so every time we need something to know exactly from where to get it.

KSS is a tool that is generating a documentation for our CSS or CSS processor (less, sass, scss) and was inspired by Tom Doc.

You might bring up the question: How can KSS help me in this matter? You need to think of it as a shelter full of shoes from where you can choose what pair you think it’s appropiate. The facilities of using it are the following:

  • Easy to read the code and the description
  • Display all elements into a hierarchical mode
  • Pick-up an entire section
  • Display animation of created elements
  • Customize the output with specifically colors / logos and other elements
  • Output an HTML styleguide divided in sections

How it works?

You can install it via NodeJS, download the example from Git and run the compiling command which will generate your documentation. The documentation is actually a fresh new website based on a provided template. The compilation will look like this:

kss-node integration/ output-name/ --template doc/template --less integration/common.less

Here we have:

  • kss-node > Use kss tool
  • output-name/ > Folder where the CSS Documentation will be generated
  • –template > Specify that we are going to use a template for our documentation
  • doc/template > Source of the template used for documentation
  • –less > Specify if we usee css/less/sass etc
  • integration/common.less > File where we have included all partials

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *