Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

105 lines (82 sloc) 2.731 kb

DSS

DSS Build Status

@version 1.0

DSS, Documented Style Sheets, is a Grunt plugin that exposes a KSS style of comment blocking and parser of CSS, LESS, SASS and SCSS code for UI documentation generation.

Example Comment Block

/**
  * @name Button
  * @description Your standard form button.
  * 
  * @state :hover - Highlights when hovering.
  * @state :disabled - Dims the button when disabled.
  * @state .primary - Indicates button is the primary action.
  * @state .smaller - A smaller button
  * 
  * @markup
  *   <button>This is a button</button>
  */ 

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 DSS --save-dev

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

grunt.loadNpmTasks('DSS');

The "DSS" task

Overview

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

grunt.initConfig({
  DSS: {
    options: {
      // commons options go here.
    }
    docs: {
      options: {
        // Task-specific options go here.
      },
      files: {
        'dest/': 'source/**/*'
      }
    }
  },
})

Options

options.template

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

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

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({
  DSS: {
    docs: {
      options: {
        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;
          }
        }
      },
      files: {
        'api/': 'css/**/*.{css,scss,sass,less,styl}'
      }
    }
  }
});
Jump to Line
Something went wrong with that request. Please try again.