Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.
npm install ng-mural-styleguide> Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.
[ng-mural-styledocco]: http://github.com/stephenst/ng-mural-styledocco/
[kss-node]: https://github.com/hughsk/kss-node
[jss-styles]: https://github.com/jesseditson/jss
| Framework | Preprocessor | Templates |
|---|---|---|
| styledocco | Less, Sass | Default template provided by styledocco is used |
| kss-node | Less | Custom templates can be used |
From the same directory as your project's [Gruntfile][Getting Started] and [package.json][], install this plugin with the following command:
``bash`
npm install grunt-styleguide --save-dev
Once that's done, add this line to your project's Gruntfile:
`js`
grunt.loadNpmTasks('grunt-styleguide');
If the plugin has been installed correctly, running grunt --help at the command line should list the newly-installed plugin's task or tasks. In addition, the plugin should be listed in package.json as a devDependency, which ensures that it will be installed whenever the npm install command is run.
[grunt]: http://gruntjs.com/
[Getting Started]: https://github.com/gruntjs/grunt-docs/blob/master/Getting-started.md
[package.json]: https://npmjs.org/doc/json.html
to the data object passed into grunt.initConfig().`
grunt.initConfig({ styleguide: {
options: {
// global options
},
your_target: {
options: {
// task options
},
files: {
// files to process
}
}
}
})
#### Options
By default grunt-styleguide will attempt to rationalize options for each of the styleguide frameworks supported depending upon the features available to the framework in use.
##### Defaults
Key
Type
Default
Required
Description
framework
String, object, function (*)
styledocco
No
Details about the styleguide framework
name
String
undefined
No
Title of the styleguide
template
Object
Template bundled with framework
No
Details of the templates to use for rendering if supported
files
Object, String, Array
undefined
Yes
Details of the templates to use for rendering if supported
> \* See [extending grunt-styleguide]()
#### Framework Options
Should you wish to pass additional options which are supported by a framework then these can be passed as an options as part of the framework object.
styleguide: { dist: {
options: {
framework: {
name: 'framework_name',
options: {
'somearg': 'somevalue',
'someflag: true
}
}
},
files: {
'path/to/dest': 'path/to/source'
}
}
}
#### Template Options
Depending upon the framework, it may be possible to also pass templates to use for rending a styleguide.
styleguide: { dist: {
options: {
template: {
src: 'path/to/templates',
include: ['path/of/resources/to/include']
}
},
files: {
'path/to/dest': 'path/to/source'
}
}
}
Key
Type
Required
Description
src
String
No
Location of the template to use
include
String, Array
No
Resources to include
Depending upon the framework you wish to use example templates can be found in:
A generic template is provide also:
Copy these to a location which is part of your project and modify your gruntfile to support your individual requirements.
#### CSS Preprocessors
By default grunt-styleguide will determine the CSS preprocessor to use by evaluating the selected source files. This value will be passed as an option to framework and if supported will be used by it.
$3
#### Default Options
In this example a styleguide will be generated using the default generator,
. Guides will be created for css/scss located within the core and plugins directory and output them to the appropriate destination specified.`
grunt.initConfig({ styleguide: {
dist: {
files: {
'docs/core': 'stylesheets/sass/core/*.scss',
'docs/plugins': 'stylesheets/sass/plugins/*.scss'
}
}
}
});