node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

grunt-pattern-lab-component-builder

grunt-pattern-lab-component-builder

Automatically Create Pattern Lab Components

Getting Started

This plugin requires Grunt.

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-pattern-lab-component-builder --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('pattern-lab-component-builder');

The "pattern_lab_component_builder" task

Overview

In your project's Gruntfile, add a section named pattern_lab_component_builder to the data object passed into grunt.initConfig().

grunt.initConfig({
  pattern_lab_component_builder: {
    colors: {
      options: {
        regex: "^\\$color--.*",
        allow_var_values: false
      },
      src: 'scss/global/variables/_colors.scss',
      dest: 'source/_patterns/00-atoms/01-global/00-colors.json'
    },
    fonts: {
      options: {
        'regex': "^\\$type.*"
      },
      src: "scss/global/variables/_type-sizes.scss",
      dest: "source/_patterns/00-atoms/02-text/02-type-sizes.json"
    },
  },
})

The src is the file that the plugin reads from and infers your Pattern Lab component, which then gets written to dest.

Options

options.component

Type: String

Which Pattern Lab component to work with. Available options:

  • colors

options.template

Type: path

The Mustache template to render the Pattern Lab compoenent with. See templates/ for examples (which are the defaults).

Usage Examples

The only current usage is in the overview.

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.

Release History

(Nothing yet)

License

Copyright (c) 2014 Evan Lovely. Licensed under the MIT license.