Skip to content

Commit 121511b

Browse files
committed
updated the README with an example of pattern parameters in action
1 parent 54bd26f commit 121511b

File tree

1 file changed

+24
-5
lines changed

1 file changed

+24
-5
lines changed

README.md

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)
1+
[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)
22

33
## About the Node Version of Pattern Lab
44

55
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.
66

77
### Getting Started
88

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:
1010

1111
1. `npm install`
1212
2. `npm install -g grunt-cli`
@@ -73,6 +73,25 @@ Pattern states should be lowercase and use hyphens where spaces are present.
7373
}
7474
```
7575

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+
7695
##### Pseudo-Patterns
7796
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.
7897

@@ -139,7 +158,7 @@ As you can see, it's a much easier way of linking patterns to one another.
139158

140159

141160
##### 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.
143162

144163
```
145164
"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
@@ -165,7 +184,7 @@ You can find some simple upgrade documenation in it's current home here (unrelea
165184

166185
### Forward, To the Specification!
167186

168-
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.
187+
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.
169188

170189
### Is Pattern Lab a Platform or a Build Tool?
171190

@@ -219,7 +238,7 @@ By default, the Pattern Lab assets can be manually generated and the Pattern Lab
219238
* [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
220239
* [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
221240
* [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
222-
* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
241+
* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
223242
* [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
224243
* [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
225244
* [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon

0 commit comments

Comments
 (0)