Nightly Pocket Measurement

    grunt-styleguide-colors

    0.3.1 • Public • Published

    grunt-styleguide-colors

    generate html markup to display a scss color map

    npm Package Version MIT License Build Status

    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.loadNpmTasks('grunt-styleguide-colors');

    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.initConfig({
      styleguide_colors: {
        options: {
          // Task-specific options go here
          // All options are optional - see Options below
        },
        files: {
            dest: src 
        }
        
      }
    });

    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: (
        /// 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. 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.initConfig({
      styleguide_colors: {
        options: {
          headline: 'All my colors',
          wrapper: 'section',
          template: 'template.html'
        },
        files: {
          'test/app/templates/_sg-colors.html': ['test/app/styles/_variables.scss']
        }
      },
    });

    Run the Script with grunt styleguide_colors

    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>
        <div class="sg-colors__definition">
            <div class="sg-colors__item" style="background: #ebeef2;"></div>
            <b>'color-definition__gray--light':</b> #ebeef2
        </div>
        <div class="sg-colors__definition">
            <div class="sg-colors__item" style="background: #292929;"></div>
            <b>'color-definition__gray--dark':</b> #292929
        </div>
        <div class="sg-colors__definition">
            <div class="sg-colors__item" style="background: #00a2db;"></div>
            <b>'color-definition__blue':</b> #00a2db
        </div>
    </section>

    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.

    Keywords

    Install

    npm i grunt-styleguide-colors

    DownloadsWeekly Downloads

    0

    Version

    0.3.1

    License

    none

    Last publish

    Collaborators

    • atomstrom
    • webdesignberlin