node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »



Create a pattern library with a set of HTML files.

Getting Started

This plugin requires Grunt ~0.4.2

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-patternlibrary --save-dev

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


The "patternlibrary" task


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

  patternlibrary: {
    your_target: {
      // Target-specific file lists and/or options go here. 


No task-wide options

Custom Options

  patternlibrary: {
    patterns: {
      // Destination folder for the generated pattern library to be saved in 
      dest: 'patterns/dist',
      // Name of the index HTML file that is generated (default: "index.html") 
      indexName: 'foobar.html',
      // Stylesheets to include on the page (path relative to "dest") -- will be output in sequential order in the HEAD of the document 
      stylesheets: [ 'stylesheet1.css', 'stylesheet2.css' ],
      // JavaScripts to include on the page (path relative to "dest") -- wil be output in sequential order at the bottom of the BODY tag in the document 
      javascripts: [ 'script1.js', 'script2.js' ],
      // If this is set to true, none of grunt-patternlibrary's built in CSS or JS will be brought through to the output (optional) 
      blankCanvas: true
      // Title for the pattern library 
      title: 'My Pattern Library',
      // Additional files to include (these can be referenced in the "stylesheets" and "javascripts" options above) 
      include: [
          src: 'some-folder/style.css',
          // Relative to "dest" 
          dest: 'css/my-styles.css'
      // Path to your individual pattern HTML files 
      src: 'patterns/src/**/*.html',
      // Path to a custom template for individual patterns 
      patternTemplate: 'patterns/patternTemplate.html',
      // Path to a custom template for the wrapper around the patterns 
      wrapperTemplate: 'patterns/wrapperTemplate.html'


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)