Configuration

Watching Changes

To have Pattern Lab Node watch for changes to either patterns or assets, run grunt|gulp patternlab:watch . The Gruntfile|Gulpfile governs what is watched. Node Editions are the place to further learn about and configure asset pipelines further.

Serving the Style Guide

Pattern Lab Node Editions ship with BrowserSync to serve generated files to a browser. BrowserSync does a lot of cool things like reload files without a refresh, expose the site to your networr, and synchronize page views across devices. Run grunt|gulp patternlab:serve to launch the Style Guide. It should open in your default browser to http://localhost:3000 by default. The Gruntfile|Gulpfile contains additional configuration for BrowserSync.

Configurable Paths

Pattern Lab Node Editions ship with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within patternlab-config.json. The contents are here:

  "paths" : {
    "source" : {
      "root": "./source/",
      "patterns" : "./source/_patterns/",
      "data" : "./source/_data/",
      "meta": "./source/_meta/",
      "annotations" : "./source/_annotations/",
      "styleguide" : "./node_modules/styleguidekit-assets-default/dist/",
      "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/",
      "js" : "./source/js",
      "images" : "./source/images",
      "fonts" : "./source/fonts",
      "css" : "./source/css/"
    },
    "public" : {
      "root" : "./public/",
      "patterns" : "./public/patterns/",
      "data" : "./public/styleguide/data/",
      "annotations" : "./public/annotations/",
      "styleguide" : "./public/styleguide/",
      "js" : "./public/js",
      "images" : "./public/images",
      "fonts" : "./public/fonts",
      "css" : "./public/css"
    }
  }

Note the intentional repetition of the nested structure, made this way for maximum flexibility. Relative paths are default but absolute paths should work too. You may also use these paths within Grunt or Gulp files by referring to the paths() function.

Nav Bar Controls

If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in patternlab-config.json.

The current selection is as follows.

  "ishControlsHide": {
    "s": false,
    "m": false,
    "l": false,
    "full": false,
    "random": false,
    "disco": false,
    "hay": true,
    "mqs": false,
    "find": false,
    "views-all": false,
    "views-annotations": false,
    "views-code": false,
    "views-new": false,
    "tools-all": false,
    "tools-docs": false
  }

Pattern States

You can set the state of a pattern by including its patternPartial, such as atoms-colors, in the patternStates object in patternlab-config.json, along with a style defined inside patternStateCascade. The default styles are inprogress (orange), in inreview (yellow), and complete (green).

"patternStates": {
	"atoms-colors" : "complete",
	"molecules-primary-nav" : "inreview",
	"organisms-header" : "inprogress"
}

Note that patterns inherit the lowest common denominator pattern state of their lineage. Consider:

"patternStates": {
  "molecules-single-comment" : "complete",
  "organisms-sticky-comment" : "inreview",
  "templates-article" : "complete"
}

In this case, templates-article will display inreview since it inherits organisms-sticky-comment

The patternStateCascade array is important in that the order is hierarchical. The default is below:

"patternStateCascade": ["inprogress", "inreview", "complete"],

which correspond to classes one could define inside ./css/pattern-scaffolding.scss

/* pattern states */
.inprogress:before {
  color: #FF4136 !important;
}

.inreview:before {
  color: #FFCC00 !important;
}

.complete:before {
  color: #2ECC40 !important;
}

Pattern Export

patternlab-config.json also has two properties that work together to export completed patterns for use in a production environment. Provide an array of patternPartials and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is "./pattern_exports/" created inside the install directory.

"patternExportPatternPartials": ["molecules-primary-nav", "organisms-header", "organisms-header"],
"patternExportDirectory": "./pattern_exports/"

Coupled with exported css (much easier to extract with existing tools like grunt-contrib-copy), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.

cacheBust

patternlab-config.json has this flag to instruct Pattern Lab to append a unique query string to Javascript and CSS assets throughout the frontend.

"cacheBust": true

Default: true

defaultPatttern

patternlab-config.json has an entry that allows you to specifiy a specific pattern upon launch of the main site. This pattern will not be available in the navigation, or in view all pages. The only way to get to it will be via a refresh. It works even without BrowserSync running. Set it like this:

"defaultPattern": "pages-welcome",

Default: "all"

If running with BrowserSync, you may also set this BrowserSync options to achieve the same result via your Gruntfile or Gulpfile but without excluding the pattern from the navigation.

startPath: '/?p=pages-homepage',

Excluding Patterns

If you'd like to exclude an individual pattern you can do so by prepending the filename with an underscore, like: _filename.mustache

You can also exclude complete directories by prepending the directory name with an underscore, like: /_experiment/...

styleGuideExcludes

Exclude whole pattern types from the "All patterns" styleguide by adding entries to patternlab-config.json. This is quite useful to make rendering speedier. Here's an example:

"styleGuideExcludes": [
	"templates",
	"pages"
]

Default: empty array

These template and page patterns would still be accessible via navigation.

defaultShowPatternInfo

Use patternlab-config.json to configure whether or not you want the frontend to open with the pattern info open or closed.

Default: false

cleanPublic

patternlab-config.json can set whether or not to delete public.patterns/ upon generation