styleguide-colors

generate html markup to display a scss color map

Getting Started

Install

npm install styleguide-colors

Usage

Basic Usage

Define a source file with a scss map like this:

/* <@colors */
$colors: (
    /// Color Black
    /// @group Colors
    /// @type Color
    'color-definition__black': #040d13,
    /// Color White
    /// @group Colors
    /// @type Color
    'color-definition__white': #ffffff,
    /// Color Gray
    /// @group Colors
    /// @type Color
    'color-definition__gray': #9e9e9e
);
/* colors@> */

/* <@colors */ and /* colors@> */ define the start- and endpoint of the color map.

And use the following in the code.

var sc = require('styleguide-colors');

var options = {
 separator: ',',
 headline: 'All my colors',
 wrapper: 'section',
 templatePath: '',
 sassPath: './app/styles/_variables.scss',
 outputFile: '.app/output.html'
};

sc(options);

The generated output:

<!-- Generated via grunt-styleguide-colors -->
<section class="sg-colors">
<h1>All my colors</h1>
    <div class="sg-colors__definition">
        <div class="sg-colors__item" style="background: #040d13;"></div>
        <b>'color-definition__black':</b> #040d13
    </div>
    <div class="sg-colors__definition">
        <div class="sg-colors__item" style="background: #ffffff;"></div>
        <b>'color-definition__white':</b> #ffffff
    </div>
    <div class="sg-colors__definition">
        <div class="sg-colors__item" style="background: #9e9e9e;"></div>
        <b>'color-definition__gray':</b> #9e9e9e
    </div>
</section>

Note: if no outputFile is given, the npm module returns html as string.

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 Nodeunit.