node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »



generate html markup to display a scss color map

npm Package Version MIT License Build Status

Getting Started


npm install styleguide-colors


Basic Usage

Define a source file with a scss map like this:

/* <@colors */
$colors: (
    /// Color Black
    /// @group Colors
    /// @type Color
    /// Color White
    /// @group Colors
    /// @type Color
    /// Color Gray
    /// @group Colors
    /// @type Color
/* 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'

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 class="sg-colors__definition">
        <div class="sg-colors__item" style="background: #ffffff;"></div>
        <b>'color-definition__white':</b> #ffffff
    <div class="sg-colors__definition">
        <div class="sg-colors__item" style="background: #9e9e9e;"></div>
        <b>'color-definition__gray':</b> #9e9e9e

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


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.