grunt-styleguide-colors
generate html markup to display a scss color map
Getting Started
This plugin requires Grunt ~0.4.5
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-styleguide-colors --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt;
The "styleguide_colors" task
Overview
In your project's Gruntfile, add a section named styleguide_colors
to the data object passed into grunt.initConfig()
.
grunt;
Options
options: headline: string // set to false to disable headline wrapper: string // section, article, div, ... template: string // path to your custom template.html
Usage Examples
Basic Usage
Define a source file with a scss map like this:
/* <@colors */;/* colors@> */
/* <@colors */
and /* colors@> */
define the start- and endpoint of the color map.
Add the source file to the Gruntfile config and define an html output file. For an example of a template html file have a look at template.html in the module folder.
grunt;
Run the Script with grunt styleguide_colors
The generated output:
<!-- Generated via grunt-styleguide-colors -->All my colors 'color-definition__black': #040d13 'color-definition__white': #ffffff 'color-definition__gray': #9e9e9e 'color-definition__gray--light': #ebeef2 'color-definition__gray--dark': #292929 'color-definition__blue': #00a2db
Contributing
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.