You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+81-6Lines changed: 81 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ The Node version of Pattern Lab is, at its core, a static site generator. It com
6
6
7
7
### Getting Started
8
8
9
-
To run patternlab-node, just do the following from the command line at the root of patternlab-node:
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`
@@ -46,7 +46,7 @@ The current selection is as follows. It reflects support versus patternlab-php.
46
46
"m": true,
47
47
"l": true,
48
48
"full": true,
49
-
"ranndom": true,
49
+
"random": true,
50
50
"disco": true,
51
51
"hay": true,
52
52
"mqs": false,
@@ -62,10 +62,6 @@ The current selection is as follows. It reflects support versus patternlab-php.
62
62
"tools-docs": true
63
63
}
64
64
```
65
-
66
-
##### Verbose Mode
67
-
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
68
-
69
65
##### Pattern States
70
66
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).
71
67
Pattern states should be lowercase and use hyphens where spaces are present.
@@ -77,6 +73,85 @@ Pattern states should be lowercase and use hyphens where spaces are present.
77
73
}
78
74
```
79
75
76
+
##### Pseudo-Patterns
77
+
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
+
79
+
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:
80
+
81
+
`patternName~pseudoPatternName.json`
82
+
83
+
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.
84
+
85
+
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:
86
+
87
+
```
88
+
00-homepage.mustache
89
+
01-blog.mustache
90
+
02-article.mustache
91
+
```
92
+
93
+
Our `00-homepage.mustache` template might look like this:
94
+
95
+
```
96
+
<div id="main-container">
97
+
{{# emergency }}
98
+
<div class="emergency">Oh Noes! Emergency!</div>
99
+
{{/ emergency }}
100
+
{ ...a bunch of other content... }
101
+
</div>
102
+
```
103
+
104
+
If our `_data.json` file doesn't give a value for `emergency` that section will never show up when `00-homepage.mustache` is rendered.
105
+
106
+
We want to show both the regular and emergency states of the homepage but we don't want to duplicate the entire `00-homepage.mustache` template. That would be a maintenance nightmare. So let's add our pseudo-pattern:
107
+
108
+
```
109
+
00-homepage.mustache
110
+
00-homepage~emergency.json
111
+
01-blog.mustache
112
+
02-article.mustache
113
+
```
114
+
115
+
In our pseudo-pattern, `00-homepage~emergency.json`, we add our `emergency` attribute:
116
+
117
+
```
118
+
{
119
+
"emergency": true
120
+
}
121
+
```
122
+
123
+
Now when we generate our site we'll have our homepage template rendered twice. Once as the regular template and once as a pseudo-pattern showing the emergency section. Note that the pseudo-pattern will show up in our navigation as `Homepage Emergency`.
124
+
125
+
##### Pattern Linking
126
+
You can build patterns that link to one another to help simulate using a real website. This is especially useful when working with the Pages and Templates pattern types. The basic format is:
127
+
128
+
`{{ link.pattern-name }}`
129
+
130
+
For example, if you wanted to add a link to the `home page` template from your `blog` template you could write the following:
As you can see, it's a much easier way of linking patterns to one another.
139
+
140
+
141
+
##### 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.
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.
150
+
151
+
152
+
##### Verbose Mode
153
+
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
154
+
80
155
##### Server
81
156
Running `grunt serve` will compile the patternlab front end and host it on <ahref="http://localhost:9001">http://localhost:9001</a> by default. Page will reload on any saved source code change.
0 commit comments