## Heroku WWW Marketing Pattern Lab This style guide uses [Pattern Lab](http://patternlab.io/). It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. ### Getting Started 1. Run `npm install` from the command line 2. Run `gulp` or `gulp serve` from the command line This creates all patterns, the styleguide, and the pattern lab site. `gulp serve` will have BrowserSync spin up and serve the files. ### Command Line Interface The following are gulp task arguments you may execute: ##### `patternlab` With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site. ##### `patternlab:only_patterns` Compile the patterns only, outputting to ./public/patterns ##### `patternlab:v` Retrieve the version of patternlab-node you have installed ##### `patternlab:help` Get more information about patternlab-node, pattern lab in general, and where to report issues. ##### 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 `config.json`. The current selection is as follows. ``` "ishControlsVisible": { "s": true, "m": true, "l": true, "full": true, "random": true, "disco": true, "hay": true, "mqs": false, "find": false, "views-all": true, "views-annotations": true, "views-code": true, "views-new": true, "tools-all": true, "tools-follow": false, "tools-reload": false, "tools-shortcuts": false, "tools-docs": true } ``` ##### Pattern States You can set the state of a pattern by including it in `config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green). Pattern states should be lowercase and use hyphens where spaces are present. ``` "patternStates": { "colors" : "inprogress", "fonts" : "inreview", "three-up" : "complete" } ``` ##### Pattern Export `config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys 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. ``` "patternExportKeys": ["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](https://github.com/gruntjs/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. ##### baseurl If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo` ``` "baseurl" : "/patterns-demo" ``` Default: blank ##### 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/...` ##### Debug Mode `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. ##### Server & BrowserSync Running `gulp serve` will compile the Pattern Lab frontend and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. You'll notice that if you have this open across different browsers, we do our best to keep the frontend in sync, but there is a known issue with synced navigation using the main menu. ### Advanced Pattern Library Features ##### Pattern Parameters Pattern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page. The basic syntax is this: ``` {{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }} ``` The attributes listed in the pattern parameters should match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values. Pattern parameters **do not** currently support the following: * sub-lists (e.g. iteration of a section), * and the use of long strings of text can be unwieldy * nested properties within the parameter data, such as `{{> molecules-single-comment(foo.bar: 'baz') }}` You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html) ##### Pseudo-Patterns Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns. Pseudo-patterns are, essentially, the pattern-specific JSON files that would accompany a pattern. Rather than require a Mustache pattern, though, pseudo-patterns are hinted so a developer can reference a shared pattern. The basic syntax: `patternName~pseudoPatternName.json` The tilde, `~`, and JSON extension denotes that this is a pseudo-pattern. `patternName` is the parent pattern that will be used when rendering the pseudo-pattern. `patternName` and `pseudoPatternName` are combined when adding the pseudo-pattern to the navigation. The JSON file itself works exactly like the [pattern-specific JSON file](http://patternlab.io/docs/data-pattern-specific.html). It has the added benefit that the pseudo-pattern will also import any values from the parent pattern's pattern-specific JSON file. Here is an example (which ships with the package) where we want to show an emergency notification on our homepage template. Our `03-templates/` directory looks like this: ``` 00-homepage.mustache 01-blog.mustache 02-article.mustache ``` Our `00-homepage.mustache` template might look like this: ```