grunt-styledocco

Grunt StyleDocco style guide generator.

grunt-styledocco

StyleDocco generates documentation and style guide documents from your stylesheets.

This plugin requires Grunt ~0.4.1

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

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

grunt.loadNpmTasks('grunt-styledocco');

Run this task with the grunt styledocco command.

StyleDocco generates documentation and style guide documents from your stylesheets.

Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco show a preview with the styles applied, and displays the example HTML code.

The previews are rendered in a resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes.

If you don't have a global install of StyleDocco which can be achieved by npm install -g styledocco , you need to specify options.cmd to the binary you want to use.

Type: String Default value: Styledocco

The name of the project.

Type: String Default value: null

Include specified CSS and/or JavaScript files in the previews. (ex: ["mysite.css", "app.js"])

Type: String Default value: null

A custom preprocessor command (ex: "~/bin/lessc").

Type: String Default value: styledocco

A custom Styledocco command (ex: "./node_modules/.bin/styledocco").

Type: Boolean Default value: false

Show log messages when generating the documentation.

Type: Boolean Default value: false

Do not minify the code.

Note: Styledocco only takes in one path/to/docs and one path/to/styles argument so you can only use single static file mapping!

grunt.initConfig({
  styledocco: {
    dist: {
      options: {
        name: 'My Project'
      },
      files: {
        'path/to/docs': 'path/to/styles'
      }
    }
  }
});
 
grunt.loadNpmTasks('grunt-styledocco');
 
grunt.registerTask('default', ['styledocco']);
grunt.initConfig({
  styledocco: {
    dist: {
      options: {
        name: 'My Project'
      },
      files: {
        'path/to/docs1': 'path/to/styles1',
        'path/to/docs2': 'path/to/styles2'
      }
    }
  }
});

Check out the StyleDocco Website for further reading.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Copyright (c) We Are Interactive under the MIT license.