Enter DSS. DSS parses JSDoc like comment blocks in CSS files and outputs an object of “blocks” that each have a name, description and sample markup. Perfect.
DSS just outputs an object though…so to create a style guide you need to pair it with some sort of templating solution. There is a great grunt plugin, grunt-dss, that has a solution using Handlebars. I wanted to use Jekyll to generate the docs though. This site uses Jekyll. A few other sites I work on use Jekyll. Plus it integrates so nicely with Github Pages.
To access the data outputted from DSS in a Jekyll template, the output can go into the
_data directory. Then it is accessible on the
site.data object. Then it is a matter of looping over the blocks and generating the documentation.
To get the DSS output in the
_data folder I wrote a little grunt plugin that wraps DSS, grunt-dss2json. It’s available to use outside of Jekyll via
npm install --save-dev grunt-dss2json, so you can use DSS with a different templating option.