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
{{ message }}
This repository was archived by the owner on Dec 10, 2019. It is now read-only.
Copy file name to clipboardExpand all lines: Gruntfile.js
+30-30Lines changed: 30 additions & 30 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ module.exports = function (grunt) {
3
3
varpath=require('path');
4
4
5
5
functionpaths(){
6
-
returnrequire('./config.json').paths;
6
+
returnrequire('./patternlab-config.json').paths;
7
7
}
8
8
9
9
// Project configuration.
@@ -15,52 +15,52 @@ module.exports = function (grunt) {
15
15
banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n',
16
16
},
17
17
patternlab: {
18
-
src: './builder/patternlab.js',
19
-
dest: './builder/patternlab.js'
18
+
src: './core/lib/patternlab.js',
19
+
dest: './core/lib/patternlab.js'
20
20
},
21
21
object_factory: {
22
-
src: './builder/object_factory.js',
23
-
dest: './builder/object_factory.js'
22
+
src: './core/lib/object_factory.js',
23
+
dest: './core/lib/object_factory.js'
24
24
},
25
25
lineage: {
26
-
src: './builder/lineage_hunter.js',
27
-
dest: './builder/lineage_hunter.js'
26
+
src: './core/lib/lineage_hunter.js',
27
+
dest: './core/lib/lineage_hunter.js'
28
28
},
29
29
media_hunter: {
30
-
src: './builder/media_hunter.js',
31
-
dest: './builder/media_hunter.js'
30
+
src: './core/lib/media_hunter.js',
31
+
dest: './core/lib/media_hunter.js'
32
32
},
33
33
patternlab_grunt: {
34
-
src: './builder/patternlab_grunt.js',
35
-
dest: './builder/patternlab_grunt.js'
34
+
src: './core/lib/patternlab_grunt.js',
35
+
dest: './core/lib/patternlab_grunt.js'
36
36
},
37
37
patternlab_gulp: {
38
-
src: './builder/patternlab_gulp.js',
39
-
dest: './builder/patternlab_gulp.js'
38
+
src: './core/lib/patternlab_gulp.js',
39
+
dest: './core/lib/patternlab_gulp.js'
40
40
},
41
41
parameter_hunter: {
42
-
src: './builder/parameter_hunter.js',
43
-
dest: './builder/parameter_hunter.js'
42
+
src: './core/lib/parameter_hunter.js',
43
+
dest: './core/lib/parameter_hunter.js'
44
44
},
45
45
pattern_exporter: {
46
-
src: './builder/pattern_exporter.js',
47
-
dest: './builder/pattern_exporter.js'
46
+
src: './core/lib/pattern_exporter.js',
47
+
dest: './core/lib/pattern_exporter.js'
48
48
},
49
49
pattern_assembler: {
50
-
src: './builder/pattern_assembler.js',
51
-
dest: './builder/pattern_assembler.js'
50
+
src: './core/lib/pattern_assembler.js',
51
+
dest: './core/lib/pattern_assembler.js'
52
52
},
53
53
pseudopattern_hunter: {
54
-
src: './builder/pseudopattern_hunter.js',
55
-
dest: './builder/pseudopattern_hunter.js'
54
+
src: './core/lib/pseudopattern_hunter.js',
55
+
dest: './core/lib/pseudopattern_hunter.js'
56
56
},
57
57
list_item_hunter: {
58
-
src: './builder/list_item_hunter.js',
59
-
dest: './builder/list_item_hunter.js'
58
+
src: './core/lib/list_item_hunter.js',
59
+
dest: './core/lib/list_item_hunter.js'
60
60
},
61
61
style_modifier_hunter: {
62
-
src: './builder/style_modifier_hunter.js',
63
-
dest: './builder/style_modifier_hunter.js'
62
+
src: './core/lib/style_modifier_hunter.js',
63
+
dest: './core/lib/style_modifier_hunter.js'
64
64
}
65
65
},
66
66
copy: {
@@ -84,11 +84,11 @@ module.exports = function (grunt) {
Copy file name to clipboardExpand all lines: README.md
+71-12Lines changed: 71 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,8 +34,8 @@ This repository ships with two `package.json` files, a `Gruntfile.js`, and a `gu
34
34
To run patternlab-node using grunt, do the following in the directory you downloaded and extracted the zipped release:
35
35
36
36
1. Run `npm install` from the command line
37
-
2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you don't need it.
38
-
* Not deleting `builder/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it.
37
+
2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `core/lib/patternlab_gulp.js` files if you are certain you don't need it.
38
+
* Not deleting `core/lib/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it.
39
39
3. Run `grunt` or `grunt serve` from the command line
40
40
41
41
This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to have BrowserSync spin up and serve the files to you.
@@ -86,7 +86,7 @@ Get more information about patternlab-node, pattern lab in general, and where to
86
86
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.
87
87
88
88
##### Configurable Paths
89
-
Pattern Lab Node ships 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 `config.json`. The contents are here:
89
+
Pattern Lab Node ships 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:
90
90
91
91
```
92
92
"paths" : {
@@ -117,7 +117,7 @@ Pattern Lab Node ships with a particular source and public workflow intended to
117
117
Note the intentional repitition 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() object.
118
118
119
119
##### Nav Bar Controls
120
-
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`.
120
+
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`.
121
121
122
122
The current selection is as follows.
123
123
@@ -144,18 +144,55 @@ The current selection is as follows.
144
144
}
145
145
```
146
146
##### Pattern States
147
-
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).
148
-
Pattern states should be lowercase and use hyphens where spaces are present.
147
+
You can set the state of a pattern by including its key in the `patternStates` object in `patternlab-config.json`, along with a style defined inside `patternStateCascade`. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
149
148
```
150
149
"patternStates": {
151
-
"colors" : "inprogress",
152
-
"fonts" : "inreview",
153
-
"three-up" : "complete"
150
+
"atoms-colors" : "complete",
151
+
"molecules-primary-nav" : "inreview",
152
+
"organisms-header" : "inprogress"
153
+
}
154
+
```
155
+
156
+
Note that patterns inherit the lowest common denominator pattern state of their lineage.
157
+
Consider:
158
+
```
159
+
"patternStates": {
160
+
"molecules-single-comment" : "complete",
161
+
"organisms-sticky-comment" : "inreview",
162
+
"templates-article" : "complete"
163
+
}
164
+
```
165
+
In this case, two things are of note:
166
+
167
+
* templates-article will display inreview since it inherits `organisms-sticky-comment`
168
+
* pages-article will not display any pattern state, as it does not define one
169
+
170
+
The `patternStateCascade` array is important in that the order is hierarchical.
which correspond to classes defined inside `./core/styleguide/css/styleguide.css`
178
+
179
+
```
180
+
/* pattern states */
181
+
.inprogress:before {
182
+
color: #FF4136 !important;
183
+
}
184
+
185
+
.inreview:before {
186
+
color: #FFCC00 !important;
187
+
}
188
+
189
+
.complete:before {
190
+
color: #2ECC40 !important;
154
191
}
155
192
```
156
193
157
194
##### Pattern Export
158
-
`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.
195
+
`patternlab-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.
@@ -164,6 +201,28 @@ Pattern states should be lowercase and use hyphens where spaces are present.
164
201
165
202
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.
166
203
204
+
##### cacheBust
205
+
`patternlab-config.json` has this flag to instruct Pattern Lab to append a unique query string to Javascript and CSS assets throughout the frontend.
206
+
207
+
```
208
+
"cacheBust": true
209
+
```
210
+
211
+
Default: true
212
+
213
+
##### defaultPattter
214
+
`patternlab-config.json` has an entry that allows you to specifiy a specific pattern upon launch of the main site. It works even without BrowserSync running. Set it like this:
215
+
216
+
```
217
+
"defaultPattern": "pages-homepage",
218
+
```
219
+
Default: "all"
220
+
If running with BrowserSync, you may also set [this BrowserSync options](https://www.browsersync.io/docs/options/#option-startPath) to achieve the same result via your Gruntfile or Gulpfile.
221
+
222
+
```
223
+
startPath: '/?p=pages-homepage',
224
+
```
225
+
167
226
##### baseurl
168
227
169
228
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`
@@ -182,7 +241,7 @@ You can also exclude complete directories by prepending the directory name with
182
241
183
242
##### Style Guide Excludes
184
243
185
-
Exclude whole pattern types from the "All patterns" styleguide by adding entries to `config.json`. This is quite useful to make speedier. Pattern Lab Node ships with the following:
244
+
Exclude whole pattern types from the "All patterns" styleguide by adding entries to `patternlab-config.json`. This is quite useful to make speedier. Pattern Lab Node ships with the following:
186
245
187
246
```
188
247
"styleGuideExcludes": [
@@ -193,7 +252,7 @@ Exclude whole pattern types from the "All patterns" styleguide by adding entries
193
252
194
253
195
254
##### Debug Mode
196
-
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
255
+
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.patternlab-config.json` to see all the secrets.
197
256
198
257
##### Server & BrowserSync
199
258
Running `grunt serve` or `gulp serve` will compile the Pattern Lab frontend and host it by default on <ahref="http://localhost:3000">http://localhost:3000</a> 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.
0 commit comments