grunt-styledocco

Grunt StyleDocco style guide generator.

npm install grunt-styledocco
3 downloads in the last day
44 downloads in the last week
145 downloads in the last month

grunt-styledocco

Build Status Dependency Status NPM version

StyleDocco generates documentation and style guide documents from your stylesheets.

Getting Started

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');

The "styledocco" task

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.

This task requires you to have StyleDocco installed globally. Run npm install -g styledocco to install it.

Options

options.name

Type: String Default value: Styledocco

The name of the project.

options.include

Type: String Default value: null

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

options.preprocessor

Type: String Default value: null

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

Examples

Example config

grunt.initConfig({
  styledocco: {
    dist: {
      options: {
        name: 'My Project'
      },
      files: {
        'docs': 'main.css'
      }
    }
  }
});

grunt.loadNpmTasks('grunt-styledocco');

grunt.registerTask('default', ['styledocco']);

Compile multiple files

grunt.initConfig({
  styledocco: {
    dist: {
      options: {
        name: 'My Project'
      },
      files: {
        'docs': ['main.css', 'widgets.css']
      }
    }
  }
});

Documentation

Check out the StyleDocco Website for further reading.

Contributing

I Love Open Source

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

License

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

Bitdeli Badge

npm loves you