|
1 |
| -[](https://travis-ci.org/pattern-lab/patternlab-node) |
| 1 | +[](https://travis-ci.org/pattern-lab/patternlab-node) |
2 | 2 |
|
3 | 3 | ## About the Node Version of Pattern Lab
|
4 | 4 |
|
5 | 5 | The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.
|
6 | 6 |
|
7 | 7 | ### Getting Started
|
8 | 8 |
|
9 |
| -To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: |
| 9 | +To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: |
10 | 10 |
|
11 | 11 | 1. `npm install`
|
12 | 12 | 2. `npm install -g grunt-cli`
|
@@ -73,6 +73,25 @@ Pattern states should be lowercase and use hyphens where spaces are present.
|
73 | 73 | }
|
74 | 74 | ```
|
75 | 75 |
|
| 76 | +##### Pattern Parameters |
| 77 | +attern 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. |
| 78 | + |
| 79 | +The basic syntax is this: |
| 80 | + |
| 81 | +``` |
| 82 | +{{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }} |
| 83 | +``` |
| 84 | + |
| 85 | +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. |
| 86 | + |
| 87 | +Pattern parameters **do not** currently support the following: |
| 88 | + |
| 89 | +* sub-lists (e.g. iteration of a section), |
| 90 | +* and the use of long strings of text can be unwieldy |
| 91 | +* nested properties within the parameter data, such as `{{> molecules-single-comment(foo.bar: 'baz') }}` |
| 92 | + |
| 93 | +You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html) |
| 94 | + |
76 | 95 | ##### Pseudo-Patterns
|
77 | 96 | 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.
|
78 | 97 |
|
@@ -139,7 +158,7 @@ As you can see, it's a much easier way of linking patterns to one another.
|
139 | 158 |
|
140 | 159 |
|
141 | 160 | ##### Pattern Export
|
142 |
| -`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. |
| 161 | +`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. |
143 | 162 |
|
144 | 163 | ```
|
145 | 164 | "patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
|
@@ -174,7 +193,7 @@ You can find some simple upgrade documenation in it's current home here (unrelea
|
174 | 193 |
|
175 | 194 | ### Forward, To the Specification!
|
176 | 195 |
|
177 |
| -Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together. |
| 196 | +Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together. |
178 | 197 |
|
179 | 198 | ### Is Pattern Lab a Platform or a Build Tool?
|
180 | 199 |
|
@@ -228,7 +247,7 @@ By default, the Pattern Lab assets can be manually generated and the Pattern Lab
|
228 | 247 | * [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
|
229 | 248 | * [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
|
230 | 249 | * [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
|
231 |
| -* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html) |
| 250 | +* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html) |
232 | 251 | * [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
|
233 | 252 | * [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
|
234 | 253 | * [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon
|
|
0 commit comments