Grunt-CSS-Docs

Grunt-CSS-Docs genertates style guide format documentation from CSS, Less, Stylus, Sass files based on the DSS parser output.

This is a fork from the orginal Grunt DSS plugin from Darcy Clarke (the creator of DSS). We needed to customise some features to suit our project needs. Check the release notes for more information.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-css-docs --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-css-docs');

In your project's Gruntfile, add a section named cssdocs to the data object passed into grunt.initConfig().

Settings

files

Type: Array or Object Default value: []

Files to parse. Using Grunt default files syntax. More about that on Gruntjs wiki.

options.template

Type: String Default value: {task_path}/template/

A relative path to a mustache template to be used instead of the default.

options.template_index

Type: String Default value: index.mustache

The filename of the index of the template.

options.output_index

Type: String Default value: index.html

The filename of the index for the output file.

options.parsers

Type: Object Default value: {}

An object filled with key value pairs of functions to be used when parsing comment blocks. See the example below for more context about how to use these.

Example initConfig

grunt.initConfig({
  cssdocs: {
    docs: {
      files: {
        'api/': 'css/**/*.{css,scss,sass,less,styl}'
      },
      options: {
        template: '/dark_theme/',
        parsers: {
          // Finds @link in comment blocks
          link: function(i, line, block){

            // Replace link with HTML wrapped version
            var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
            line.replace(exp, "<a href='$1'>$1</a>");
            return line;
          }
        }
      }
    }
  }
});

DSS Sublime Text Plugin

You can now auto-complete DSS-style comment blocks using @sc8696's Auto-Comments Sublime Text Plugin