node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



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:


The "pattern_lab_component_builder" task


In your project's Gruntfile, add a section named pattern_lab_component_builder to the data object passed into 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.



Type: String

Which Pattern Lab component to work with. Available options:

  • colors


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.


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)


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