├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── bower.json ├── dist └── pattern-library │ ├── assets │ ├── css │ │ ├── patterns.css │ │ └── patterns.css.map │ ├── images │ │ └── image-placeholder.svg │ ├── js │ │ └── PatternLibrary.Global.Navigation.js │ └── less │ │ ├── patternpack-patterns.less │ │ └── patterns.less │ ├── atoms │ ├── buttons.html │ ├── colors.html │ ├── forms.html │ ├── headings.html │ ├── index.html │ └── typography.html │ ├── index.html │ ├── molecules │ ├── index.html │ └── nav.html │ ├── pages │ ├── article-template.html │ ├── home-page.html │ └── index.html │ └── theme-assets │ ├── css │ ├── github.css │ └── patternpack-theme.css │ ├── js │ └── PatternPack.Global.Navigation.js │ └── scss │ └── patternpack-theme.scss ├── gruntfile.js ├── package.json ├── readme.md └── src ├── assets ├── images │ └── image-placeholder.svg ├── js │ └── PatternLibrary.Global.Navigation.js ├── less │ └── patterns.less └── sass │ ├── _globals.scss │ ├── config │ ├── mixins │ │ └── _legacy-browsers.scss │ └── variables │ │ ├── _colors.scss │ │ └── _typography.scss │ ├── libraries │ └── _reset.scss │ └── patterns.scss ├── atoms ├── buttons.md ├── buttons.scss ├── colors.md ├── forms.md ├── forms.scss ├── headings.md ├── headings.scss ├── index.hbs ├── typography.md └── typography.scss ├── index.md ├── molecules ├── index.hbs └── nav.md └── pages ├── article-template.md ├── home-page.md └── index.hbs /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "globals": { 7 | "hljs" 8 | }, 9 | "rules": { 10 | "no-shadow": [2, {"hoist": "functions"}], 11 | "no-unused-vars": [2, {"vars": "all", "args": "none"}], 12 | "no-use-before-define": [2, "nofunc"], 13 | "quotes": [2, "double", "avoid-escape"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # PatternPack Example Library specific 2 | src/assets/css/patterns.css* 3 | src/assets/sass/*patternpack-patterns.scss 4 | src/assets/less/*patternpack-patterns.less 5 | 6 | # Project directories 7 | node_modules/ 8 | bower_components/ 9 | html/ 10 | 11 | # OS & project generated files 12 | *.orig 13 | *.log 14 | .log 15 | .DS_Store? 16 | ehthumbs.db 17 | Icon? 18 | Thumbs.db 19 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | src 4 | html 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 patternpack 4 | Copyright (c) 2015 John Gully 5 | Copyright (c) 2015 Marcelo Somers 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "patternpack-example-library", 3 | "description": "The example pattern library created from pattern pack", 4 | "version": "1.0.6", 5 | "license": "MIT", 6 | "ignore": [ 7 | "src", 8 | "gruntfile.js", 9 | "package.json", 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "main": "dist/patternpack-example-libarary.css", 17 | "repository": 18 | { 19 | "type": "git", 20 | "url": "git://github.com/patternpack/patternpack-example-library.git" 21 | }, 22 | "authors": [ 23 | "John Gully ", 24 | "Marcelo Sommers " 25 | ], 26 | "keywords": [ 27 | "atomic design", 28 | "atomic-design", 29 | "atomicdesign", 30 | "atomic", 31 | "design", 32 | "design system", 33 | "example", 34 | "library", 35 | "pack", 36 | "pattern", 37 | "pattern pack", 38 | "pattern pack example library", 39 | "pattern-pack", 40 | "pattern-pack-example-library", 41 | "pattern-library", 42 | "patternlibrary", 43 | "patternpack" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /dist/pattern-library/assets/css/patterns.css: -------------------------------------------------------------------------------- 1 | button{padding:5px 20px;border:0;border-radius:5px;color:white}.button--primary{background-color:#000}.button--secondary{background-color:#CCC}.button--small{padding:2px 20px;height:30px}.button--large{height:40px}strong{font-weight:bold} 2 | /*# sourceMappingURL=patterns.css.map */ -------------------------------------------------------------------------------- /dist/pattern-library/assets/css/patterns.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../atoms/buttons.scss","../../atoms/typography.scss"],"names":[],"mappings":"AAAA,OACE,iBACA,SACA,kBACA,WAAa,CACd,iBAGC,qBAAuB,CACxB,mBAGC,qBAAuB,CACxB,eAGC,iBACA,WAAa,CACd,eAGC,WAAa,CACd,OCrBC,gBAAkB,CACnB","file":"patterns.css","sourcesContent":["button {\n padding: 5px 20px;\n border: 0;\n border-radius: 5px;\n color: white;\n}\n\n.button--primary {\n background-color: #000;\n}\n\n.button--secondary {\n background-color: #CCC;\n}\n\n.button--small {\n padding: 2px 20px;\n height: 30px;\n}\n\n.button--large {\n height: 40px;\n}\n","strong {\n font-weight: bold;\n}"]} -------------------------------------------------------------------------------- /dist/pattern-library/assets/images/image-placeholder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /dist/pattern-library/assets/js/PatternLibrary.Global.Navigation.js: -------------------------------------------------------------------------------- 1 | var PatternLibrary = PatternLibrary || {}; 2 | PatternLibrary.Global = PatternLibrary.Global || {}; 3 | 4 | PatternLibrary.Global.Navigation = function() { 5 | "use strict"; 6 | 7 | var libraryContainer = null; 8 | var libraryContent = null; 9 | var menuLink = null; 10 | 11 | function initializeDomElements() { 12 | libraryContainer = document.getElementById("libraryContainer"); 13 | libraryContent = document.getElementById("libraryContent"); 14 | menuLink = document.getElementById("menuToggle"); 15 | } 16 | 17 | // Checks if the menu is open, then closes it 18 | function closeMenu() { 19 | if (libraryContainer.classList) { 20 | if (libraryContainer.classList.contains("open")) { 21 | toggleMenu(); 22 | } 23 | } 24 | } 25 | 26 | function toggleMenu() { 27 | event.preventDefault(); 28 | 29 | if (libraryContainer.classList) { 30 | libraryContainer.classList.toggle("open"); 31 | } 32 | } 33 | 34 | function wireEvents() { 35 | menuLink.addEventListener("click", toggleMenu, false); 36 | libraryContent.addEventListener("click", closeMenu, false); 37 | } 38 | 39 | function initialize() { 40 | hljs.initHighlightingOnLoad(); // initialize Highlight.js 41 | initializeDomElements(); 42 | wireEvents(); 43 | } 44 | 45 | // Expose our private functions 46 | return { 47 | initialize: initialize 48 | }; 49 | }(); 50 | 51 | // Run our code above 52 | document.addEventListener("DOMContentLoaded", function(event) { 53 | "use strict"; 54 | 55 | PatternLibrary.Global.Navigation.initialize(); 56 | }); 57 | -------------------------------------------------------------------------------- /dist/pattern-library/assets/less/patternpack-patterns.less: -------------------------------------------------------------------------------- 1 | /* generated with grunt-sass-globbing */ 2 | 3 | @import "../../atoms/buttons"; 4 | -------------------------------------------------------------------------------- /dist/pattern-library/assets/less/patterns.less: -------------------------------------------------------------------------------- 1 | @import "patternpack-patterns"; // Built by sass-globbing 2 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buttons 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Buttons

25 |

TODO: Describe what buttons are and how they are used in the application.

26 |

Examples

27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |

Code

40 | 
<button type="button" class="button--primary">Primary</button>
 41 | <button type="button" class="button--secondary">Secondary</button>
 42 | <button type="button" class="button--primary button--large">Primary Large</button>
 43 | <button type="button" class="button--secondary button--large">Secondary Large</button>
 44 | <button type="button" class="button--primary button--small">Primary Small</button>
 45 | <button type="button" class="button--secondary button--small">Secondary Small</button>
46 |
47 |
48 |
49 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Colors 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Colors

25 |

These are Colors in the Application

26 |

Examples

27 |
28 |
29 | 30 |
    31 |
  • Red
    • 32 |
  • #AC0023
    • 33 |
  • $color-red
    • 34 |
35 |
36 |
37 | 38 |
    39 |
  • Green
    • 40 |
  • #1E8339
    • 41 |
  • $color-green
    • 42 |
43 |
44 |
45 | 46 |
    47 |
  • Yellow
    • 48 |
  • #F5E93D
    • 49 |
  • $color-yellow
    • 50 |
51 |
52 |
53 |
54 |
55 |
56 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Forms 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Forms

25 |

TODO:

26 |

Examples

27 |

TODO:

28 |

Code

29 | 

 30 |
31 |
32 |
33 |
34 | 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/headings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Headings 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Headings

25 |

TODO:

26 |

Examples

27 |

TODO:

28 |

Code

29 | 

 30 |
31 |
32 |
33 |
34 | 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Atoms 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

25 |

Atoms

26 |

27 |

TODO: Describe what an atom is

28 |

29 | 30 |

31 |

Buttons

32 |

33 |

34 |

TODO: Describe what buttons are and how they are used in the application.

35 |

36 |

37 |

Examples

38 |

39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |

52 |

Code

53 |

54 | 
<button type="button" class="button--primary">Primary</button>
 55 | <button type="button" class="button--secondary">Secondary</button>
 56 | <button type="button" class="button--primary button--large">Primary Large</button>
 57 | <button type="button" class="button--secondary button--large">Secondary Large</button>
 58 | <button type="button" class="button--primary button--small">Primary Small</button>
 59 | <button type="button" class="button--secondary button--small">Secondary Small</button>
60 |

61 |

62 |

63 |

64 | 65 |

66 |

Forms

67 |

68 |

69 |

TODO:

70 |

71 |

72 |

Examples

73 |

74 |

75 |

TODO:

76 |

77 |

78 |

Code

79 |

80 | 

 81 |
82 |

83 |

84 |

85 |

86 | 87 |

88 |

Headings

89 |

90 |

91 |

TODO:

92 |

93 |

94 |

Examples

95 |

96 |

97 |

TODO:

98 |

99 |

100 |

Code

101 |

102 | 

103 |
104 |

105 |

106 |

107 |

108 | 109 |

110 |

Typography

111 |

112 |

113 |

Miscellaneous typographic styles within the app

114 |

115 |

116 |

Examples

117 |

118 |
119 | strong 120 |
121 |

122 |

Code

123 |

124 | 
<strong>strong</strong>
125 |

126 |

127 |

128 |

129 | 130 |

131 |

Colors

132 |

133 |

134 |

These are Colors in the Application

135 |

136 |

137 |

Examples

138 |

139 |
140 |
141 | 142 |
    143 |
  • Red
    • 144 |
  • #AC0023
    • 145 |
  • $color-red
    • 146 |
147 |
148 |
149 | 150 |
    151 |
  • Green
    • 152 |
  • #1E8339
    • 153 |
  • $color-green
    • 154 |
155 |
156 |
157 | 158 |
    159 |
  • Yellow
    • 160 |
  • #F5E93D
    • 161 |
  • $color-yellow
    • 162 |
163 |
164 |
165 |

166 |

167 |

168 |
169 |
170 |
171 | 308 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /dist/pattern-library/atoms/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Typography 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Typography

25 |

Miscellaneous typographic styles within the app

26 |

Examples

27 |
28 | strong 29 |
30 |

Code

31 | 
<strong>strong</strong>
32 |
33 |
34 |
35 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /dist/pattern-library/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pattern Library 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

25 |

What are pattern libraries?

26 |

27 |

28 |

A pattern library is a collection of 29 | user interface design patterns . It breaks down the overall design into element that solve common design problems and can be reused consistently.

30 |

31 |

32 |

A pattern library defines not only how an element of an application looks, but also provides simple examples of how each piece should be implemented. This allows designers to give examples of how each element looks and feels, while providing 33 | developers with tools to bring the design to life.

34 |

35 |

36 |

Atomic design principles

37 |

38 |

39 |

The 40 | atomic design principles outlined by 41 | Brad Frost have served as a significant influence to this pattern library. The concept of breaking down a design into its components (atoms, molecules, templates & pages) lends itself very well to the goals of a pattern library and 42 | leveraged heavily throughout.

43 |

44 |

45 | 46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 | 59 | 60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 | 73 |

74 |

75 |

76 |

77 |

78 |

79 |

80 |

81 |

82 | 83 |

84 |

85 |

86 |

87 |

88 |

89 |

90 |

91 |

92 | 93 |

94 |

95 |

96 |

97 |

98 |

99 |

100 |

101 |

102 | 103 | 104 |
ComponentDescription
Atom A component of your design that will not be broken down in to smaller pieces. (button, text input, header, etc.)
Molecue A composition of more than one Atom. (menu, navigation, contact form, etc.)
Template A common structure for building a page that is designed for reuse. (blog post, news article, product detail, etc.)
Page A single implementation for a specific use case that requires styles that intentionally deviate from the patterns defined in the library. (home page, any custom page)
105 |

106 |

107 |

In addition to the concepts of 108 | atomic design the pattern library follows some general principles for 109 | CSS style guidance .

110 |

111 |

112 |

What is a pattern?

113 |

114 |

115 |

A pattern consists of three basic elements (name & description, visual example, code example) that should fully describe the element. Each pattern in the pattern library is defined individually and organized by it atomic design hierarchy.

116 |

117 |

118 | 119 |

120 |

121 |

122 |

123 |

124 |

125 |

126 |

127 |

128 |

129 |

130 |

131 | 132 | 133 |

134 |

135 |

136 |

137 |

138 |

139 |

140 |

141 |

144 |

145 |

146 |

147 | 148 |

149 |

150 |

151 |

152 |

153 |

156 |

157 |

158 |

159 | 160 |

161 |

162 |

163 |

164 |

165 |

168 |

169 |

170 |

171 | 172 | 173 |
ElementDescription
142 | Name & description 143 | The narrative should describe the pattern and provide basic guidance for its use. Any special circumstances or additional guidance should be included here.
154 | Visual example 155 | The visual should be provided as an implementation of both the HTML markup and CSS styles. The combination of these elements should provide a desired visual display of the pattern.
166 | Code sample 167 | The sample should provides a snippet of markup that can be used to recreate the pattern. Any implementation specific details should be removed from the code example.
174 |

175 |

176 |

Atoms are often combined into related groups to reduce clutter and make the pattern library easier to navigate and consume.

177 |

178 |

179 |

Creating a pattern

180 |

181 |

182 |

At a high-level each pattern is created in the folder corresponding to its atomic hierarchy and is defined by two files (one for the pattern the other for the CSS styles).

183 |

184 |

185 |

List Example

186 |

187 |

188 |

To create a new pattern for create a new pattern for a fictitious "Content List" atom that is intended to style lists of text within the body of some content:

189 |

190 |

191 |

NOTE: In addition to following these steps you must also rebuild the pattern library in order see the changes described in this example.

192 |

193 |

194 |

    195 |

    196 |

    197 |

  1. 198 |

    Create a new file src/atoms/contentList.md with the basic pattern elements (name & description, visual example, code example)

    199 |
    2. 200 |

    201 |

    202 |

  2. 203 |

    Create a new file src/atoms/contentList.scss with the styles for the list (bullet style, line height, indent size, etc.)

    204 |
    3. 205 |
206 |

207 |

208 |

contentList.md

209 |

210 | 

---
211 | title: Content List
212 | ---

213 | 
## Content List
214 | The content list pattern is used within content pages to display textual information in a bulleted list.

215 | 
### Examples
216 | <div class="library__example">
217 |   <ul class="content__list">
218 |     <li class="content__list-item">The first list item</li>
219 |     <li class="content__list-item">The second list item</li>
220 |     <li class="content__list-item">The third list item</li>
221 |   </ul>
222 | </div>

223 | 
### Code
224 | ```
225 | <ul class="content__list">
226 |   <li class="content__list-item"></li>
227 | </ul>
228 | ```

229 |

230 |

contentList.scss

231 |

232 | 

content __list {
233 |   list-style-type : circle; 
234 |   margin : 10 px 0 px; 
235 | }

236 | 
content __list-item {
237 |   padding : 10 px; 
238 | }

239 |

240 |

Building the pattern library

241 |

242 |

243 |

The pattern library build system uses the 244 | Grunt build automation tool to dynamically generate a static pattern library website. Additionally the styles used to create the patterns are bundled into a single css file designed to be used in an application.

245 |

246 |

247 | 248 |

249 |

250 |

251 |

252 |

253 |

254 |

255 |

256 |

259 |

260 |

261 |

262 | 263 | 264 |

265 |

266 |

267 |

268 |

269 |

270 |

271 |

272 |

275 |

276 |

277 |

278 | 279 |

280 |

281 |

282 |

283 |

284 |

287 |

288 |

289 |

290 | 291 |

292 |

293 |

294 |

295 |

296 |

299 |

300 |

301 |

302 | 303 |

304 |

305 |

306 |

307 |

308 |

311 |

312 |

313 |

314 | 315 |

316 |

317 |

318 |

319 |

320 |

323 |

324 |

325 |

326 | 327 | 328 |
257 | Grunt Tasks 258 | Description
273 | grunt 274 | Builds the pattern library and standalone patterns, runs a webserver to host the site, and monitors files for changes. Automatically rebuilds the site when changes are detected.
285 | grunt build 286 | Builds the pattern library and standalone patterns.
297 | grunt build 298 | Builds the pattern library.
309 | grunt build 310 | Builds the patterns only.
321 | grunt release 322 | Creates a new release of the pattern library and commits and pushes the changes to the origin git repository.
329 |

330 |

331 |

To build the pattern library for the first time you must first install the node module dependencies using npm, then run the grunt build.

332 |

333 | 

npm install
334 | grunt build

335 |

336 |

Reviewing your work

337 |

338 |

339 |

The pattern library is generated as a static website. For convenience a simple node webserver configuration is included, designed to host the library ( 340 | 341 | http://localhost:8888 342 | ) during active development. This is also accomplished using 343 | Grunt . In fact the default grunt task is designed to support active development of new patterns. The task will not only build the application, but also rebuild it changes are made.

344 |

345 | 

npm install
346 | grunt

347 |

348 |

The default task is also integrated with 349 | LiveReload . If you use the browser plugin any changes will also be automatically reflected in the browser.

350 |

351 |

352 |

Using the patterns in an application

353 |

354 |

355 |

As stated earlier, the pattern library is a collection of user interface patterns. These patterns are designed for use in an HTML based website or application. The CSS styles generated from the pattern library are the primary asset used by 356 | an application. Simply importing the styles from the pattern library will provide the application the look and feel defined in the pattern library.

357 |

358 |

359 |

The pattern library has been designed to be used as a dependency of your application. Using either 360 | Bower or 361 | npm you may reference the pattern library you create. this allows the application and pattern library to be related, yet remain loosely coupled to one another.

362 |

363 |

364 |

To use the pattern library in your application you need to install the pattern library as a dependency. Then simply reference the CSS file located in bower_components folder.

365 |

366 | 

bower install example-app-pattern-library --save-dev

367 | 

<style src="bower_components/example-app-pattern-library/dist/css/example-app-pattern-library.css"

368 |

369 |

Public vs private dependencies In this example we reference the pattern library by name. This requires that the name be defined in the bower.json in the pattern library but more importantly that the pattern library 370 | be 371 | published to the public bower registry .

372 |

373 |

374 |

Making your pattern library publicly accessible may not be desirable for some projects. If you wish to work with a pattern library without making the code available to the world, follow the instructions for use as a private dependency.

375 |

376 |

377 |

Private dependency instructions

378 |

379 |

380 |

With a little more work you can realize the benefits of the dependency models promoted by 381 | Bower and 382 | npm while keeping your code private. In you application rather than simply referring to the pattern library by name, you will also need to point to the git repository that contains your pattern library.

383 |

384 |

385 |

In this example, the application "example-app" defines a the "example-app-pattern-library" as its dependency. The "example-app-pattern-library" exists in a private git repository on bitbucket.org owned by the 386 | user "jondoe".

387 |

388 |

389 |

bower.json

390 |

391 | 

{
392 |   "name ": "example-app" ,
393 |   "devDependencies ": {
394 |     "example-app-pattern-library ": "git@bitbucket.org:jondoe/example-app-pattern-library.git" 
395 |    }
396 |  }

397 |

398 |

package.json

399 |

400 | 

{
401 |   "name ": "example-app" ,
402 |   "devDependencies ": {
403 |     "example-app-pattern-library ": "git@bitbucket.org:jondoe/example-app-pattern-library.git" 
404 |    }
405 |  }

406 |

407 |

NOTE: you will need to run bower install or npm install to install the pattern library as a dependency to your application.

408 |

409 |

410 |

Pattern library configuration

411 |

412 |

413 |

There are two primary modes that the pattern library is designed to support. By default the pattern library generates all the assets to support both modes of operation. Once you decide upon a desired mode, you may optimize the 414 | Grunt build process to only perform that tasks relevant to your preference.

415 |

416 |

417 |

Pattern Library mode

418 |

419 |

420 |

This mode is designed for complete separation of the pattern library and your application. The pattern library is generated as a static website, that you may choose to host and will provide a simple interface for navigating all the patterns 421 | in your library.

422 |

423 |

424 |

Choose this mode if you need a simple pattern library with the least amount of effort.

425 |

426 |

427 |

Patterns mode

428 |

429 |

430 |

This mode is designed for tighter integration with your application. The patterns are generated as standalone snippets of HTML, but no website structure is created. This is ideal for more dynamic applications they need to inject information 431 | or behavior into the pattern library.

432 |

433 |

434 |

Choose this mode if you want the pattern library to demonstrate the behaviors of your application.

435 |

436 |

437 |

Creating a pattern library release

438 |

439 |

440 |

Once an application takes a dependency on the pattern library it becomes important manage revisions to the pattern library. This allows the application to be assured that the styles will not change, unintentionally breaking the application 441 | design.

442 |

443 |

444 |

Following the 445 | semantic versioning principles helps keep this process simple and consistent.

446 |

447 |

448 |

449 | Grunt tasks have been created to simplify this process. In fact it's as simple as:

450 |

451 | 

grunt build
452 | grunt release

453 |

454 |

This sequence of commands will:

455 |

456 |

457 |

    458 |

    459 |

    460 |

  1. Build the pattern library
    2. 461 |

    462 |

    463 |

  2. Copy the build to the dist folder
    3. 464 |

    465 |

    466 |

  3. Increment (patch) the bower.json and package.json version numbers
    4. 467 |

    468 |

    469 |

  4. Commit the changes locally
    5. 470 |

    471 |

    472 |

  5. Add a tag with the version number
    6. 473 |

    474 |

    475 |

  6. Push the changes to the git origin
    7. 476 |
477 |

478 |

479 |

There are additional 480 | Grunt tasks that follow the 481 | SemVer patterns and allow explicit control of the version increment.

482 |

483 | 

grunt release-patch
484 | grunt release-minor
485 | grunt release-major

486 |

487 |

Version usage

488 |

489 |

490 |

At some point you will probably wish to limit your application to a specific version of the pattern library. The pattern library follows the standard versioning pattern for both 491 | Bower and 492 | npm . So simply specifying a version number will work if you have registered the pattern library in a public repository. However if you have chosen to use a private repository you must specify the git 493 | commit-ish that you are interested in.

494 |

495 | 

git@bitbucket.org:jondoe/example-app-pattern-library.git#1.0.0

496 |

497 |

In this example the commit-ish is the tag of 1.0.0 create when the 1.0.0 release of the pattern library was established.

498 |

499 |

500 |

See the 501 | npm documentation on URL dependencies for more examples of how versions can be referenced.

502 |

503 |

504 |

Templates & Snippets

505 |

506 |

507 |

Tokens described with the { } should be replaced values relevant to the implementation.

508 |

509 |

510 |

Pattern Template

511 |

512 | 

---
513 | title: {name}
514 | ---

515 | 
## {name}
516 | {description}

517 | 
### Examples
518 | <div class="library__example">
519 |   {example-markup}
520 | </div>

521 | 
### Code
522 | ```
523 |   {code-snippet}
524 | ```

525 |

526 |

Additional Notes

527 |

528 |

529 |

Weird Quirks

530 |

531 |
    532 |
  • Adding a new scss file in assets/sass requires you to run grunt styles to see the changes
    • 533 |
534 |
535 |
536 |
537 | 674 | 675 | 676 | 677 | -------------------------------------------------------------------------------- /dist/pattern-library/molecules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Molecules 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |
25 |

Molecules

26 |

TODO: Describe what an molecule is

27 | 28 |
29 | 30 |

TODO: Describe what navigation is and how it is used in the application.

31 |

Examples

32 | 33 |

Code

34 | 
<nav>Default</nav>
35 |
36 |

37 |

38 |

39 |
40 |
41 |
42 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /dist/pattern-library/molecules/nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Navigation 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 | 25 |

TODO: Describe what navigation is and how it is used in the application.

26 |

Examples

27 | 28 |

Code

29 | 
<nav>Default</nav>
30 |
31 |
32 |
33 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /dist/pattern-library/pages/article-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Article Template 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Article Template

25 |

TODO: Describe what an article template 1 is and how it is used in the application.

26 |

Examples

27 |
28 |
29 |

Article title goes here

30 |

31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla massa velit, mattis sollicitudin augue fringilla eget. Vivamus viverra lectus non dignissim bibendum. Duis ante ex, mollis sed est et, rhoncus sollicitudin tellus. Ut nibh 32 | dui, aliquet in rutrum pretium, consequat et ipsum. Morbi ullamcorper arcu vitae eros tempor scelerisque. Curabitur mi libero, accumsan nec lectus sit amet, lacinia porttitor ipsum. Mauris quis elementum lacus, vitae lobortis turpis. Phasellus 33 | laoreet lacinia interdum. 34 |

35 |
36 |
37 | By: 38 | 39 | 40 |
41 |
42 |

Code

43 | 
<section>
 44 |   <article>
 45 |     <h2></h2>
 46 |     <p>
 47 |     </p>
 48 |   <article>
 49 |   <footer>
 50 |     By: <a rel="author" href="mailto:"><a>
 51 |     <time></time>
 52 |   </footer>
 53 | </section>
54 |
55 |
56 |
57 | 194 | 195 | 196 | 197 | -------------------------------------------------------------------------------- /dist/pattern-library/pages/home-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Home Page 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |

Home Page

25 |

TODO: Describe what the home page is and how it is used in the application.

26 |

Examples

27 |
28 | 29 |
30 |

Integer eget facilisis diam

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla massa velit, mattis sollicitudin augue fringilla eget. Vivamus viverra lectus non dignissim bibendum. Duis ante ex, mollis sed est et, rhoncus sollicitudin tellus. Ut nibh 33 | dui, aliquet in rutrum pretium, consequat et ipsum. Morbi ullamcorper arcu vitae eros tempor scelerisque. Curabitur mi libero, accumsan nec lectus sit amet, lacinia porttitor ipsum. Mauris quis elementum lacus, vitae lobortis turpis. Phasellus 34 | laoreet lacinia interdum. 35 |

36 |
37 | 44 |
45 |

Code

46 | 
<div>
 47 |   <nav></nav>
 48 |   <main>
 49 |     <h1></h1>
 50 |     <p>
 51 |     </p>
 52 |   </main>
 53 |   <aside>
 54 |     <ul>
 55 |       <li>Home</li>
 56 |       <li>FAQ</li>
 57 |       <li>Contact</li>
 58 |     </ul>
 59 |   </aside>
 60 | </div>
61 |
62 |
63 |
64 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /dist/pattern-library/pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pages 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | Pattern Library 17 |
18 |
Menu
19 |
20 |
21 |
22 |
23 |
24 |
25 |

Templates

26 |

TODO: Describe what a template

27 |
36 |
37 |
38 |
39 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /dist/pattern-library/theme-assets/css/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header { 18 | color: #998; 19 | font-style: italic; 20 | } 21 | 22 | .hljs-keyword, 23 | .css .rule .hljs-keyword, 24 | .hljs-winutils, 25 | .nginx .hljs-title, 26 | .hljs-subst, 27 | .hljs-request, 28 | .hljs-status { 29 | color: #333; 30 | font-weight: bold; 31 | } 32 | 33 | .hljs-number, 34 | .hljs-hexcolor, 35 | .ruby .hljs-constant { 36 | color: #008080; 37 | } 38 | 39 | .hljs-string, 40 | .hljs-tag .hljs-value, 41 | .hljs-doctag, 42 | .tex .hljs-formula { 43 | color: #d14; 44 | } 45 | 46 | .hljs-title, 47 | .hljs-id, 48 | .scss .hljs-preprocessor { 49 | color: #900; 50 | font-weight: bold; 51 | } 52 | 53 | .hljs-list .hljs-keyword, 54 | .hljs-subst { 55 | font-weight: normal; 56 | } 57 | 58 | .hljs-class .hljs-title, 59 | .hljs-type, 60 | .vhdl .hljs-literal, 61 | .tex .hljs-command { 62 | color: #458; 63 | font-weight: bold; 64 | } 65 | 66 | .hljs-tag, 67 | .hljs-tag .hljs-title, 68 | .hljs-rule .hljs-property, 69 | .django .hljs-tag .hljs-keyword { 70 | color: #000080; 71 | font-weight: normal; 72 | } 73 | 74 | .hljs-attribute, 75 | .hljs-variable, 76 | .lisp .hljs-body, 77 | .hljs-name { 78 | color: #008080; 79 | } 80 | 81 | .hljs-regexp { 82 | color: #009926; 83 | } 84 | 85 | .hljs-symbol, 86 | .ruby .hljs-symbol .hljs-string, 87 | .lisp .hljs-keyword, 88 | .clojure .hljs-keyword, 89 | .scheme .hljs-keyword, 90 | .tex .hljs-special, 91 | .hljs-prompt { 92 | color: #990073; 93 | } 94 | 95 | .hljs-built_in { 96 | color: #0086b3; 97 | } 98 | 99 | .hljs-preprocessor, 100 | .hljs-pragma, 101 | .hljs-pi, 102 | .hljs-doctype, 103 | .hljs-shebang, 104 | .hljs-cdata { 105 | color: #999; 106 | font-weight: bold; 107 | } 108 | 109 | .hljs-deletion { 110 | background: #fdd; 111 | } 112 | 113 | .hljs-addition { 114 | background: #dfd; 115 | } 116 | 117 | .diff .hljs-change { 118 | background: #0086b3; 119 | } 120 | 121 | .hljs-chunk { 122 | color: #aaa; 123 | } -------------------------------------------------------------------------------- /dist/pattern-library/theme-assets/css/patternpack-theme.css: -------------------------------------------------------------------------------- 1 | html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:Helvetica,Arial,sans-serif;color:#333}.library__container{position:absolute;z-index:200;min-height:100%;width:100%;right:0;background-color:#fff;transition:all 200ms ease}.library__container.open{right:300px}.library__container.open .library__header__toggle{background-color:transparent}.library__container.open .library__header__toggle:before,.library__container.open .library__header__toggle:after{top:0}.library__container.open .library__header__toggle:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.library__container.open .library__header__toggle:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.library__container.open .library__content__open-overlay{width:100%;height:100%;background-color:rgba(0,0,0,0.4);cursor:pointer}.library__header{position:fixed;z-index:300;width:100%;background-color:#f1f1f1;border-bottom:1px solid #ddd;padding:15px}.library__header a{text-decoration:none;color:#333}.library__header__logo{max-height:40px;vertical-align:middle}.library__header__title{font-size:1.5em;vertical-align:text-top}.library__header__menu-toggle__container{position:absolute;right:0;top:0;bottom:0;width:100px;height:100%;cursor:pointer}.library__header__toggle{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:25px;height:5px;float:right;text-indent:-999em;background-color:black;border-radius:3px;transition:all 200ms ease}.library__header__toggle:before,.library__header__toggle:after{content:'';position:absolute;right:0;display:block;width:25px;height:5px;background-color:black;border-radius:3px;transition:all 200ms ease}.library__header__toggle:before{top:-9px}.library__header__toggle:after{top:9px}.library__content{margin-top:70px;padding:15px;transition:opacity 200ms ease}.library__content__open-overlay{position:absolute;top:0;left:0;z-index:300;width:0;height:0;background-color:transparent;transition:background-color 200ms ease}h1{font-size:36px}.markdown__body{margin-top:30px;clear:both}.markdown__body:not(.library__example)>*:first-child{margin-top:0}.markdown__body:not(.library__example)>h1{margin-top:1em;margin-bottom:15px;border-bottom:1px solid #ddd;padding-bottom:10px;font-weight:bold}.markdown__body:not(.library__example)>h2{margin-top:1em;margin-bottom:15px;border-bottom:1px solid #ddd;padding-bottom:10px;font-size:28px;font-weight:bold}.markdown__body:not(.library__example)>h3{margin-top:1em;margin-bottom:5px;font-size:24px;font-weight:bold}.markdown__body:not(.library__example)>p{margin-bottom:1em}.markdown__body:not(.library__example)>ul,.markdown__body:not(.library__example) ol{margin-bottom:1em;margin-left:1.5em}.markdown__body:not(.library__example)>ul li ul,.markdown__body:not(.library__example)>ul li ol,.markdown__body:not(.library__example) ol li ul,.markdown__body:not(.library__example) ol li ol{margin-left:1.5em}.markdown__body:not(.library__example)>ul{list-style:square}.markdown__body:not(.library__example)>ul li ul{list-style:square}.markdown__body:not(.library__example)>ol{list-style:decimal}.markdown__body:not(.library__example)>ol li ol{list-style:decimal}.markdown__body:not(.library__example)>pre{font-family:'Consolas', 'Monaco', 'Courier New', monospace;line-height:1.3em;border:1px solid #ddd;border-radius:3px}.markdown__body:not(.library__example)>pre *{background-color:#f1f1f1 !important}.markdown__body:not(.library__example)>table th{text-align:left;text-transform:uppercase;background-color:#f1f1f1;font-size:.8em;font-weight:bold;padding:10px}.markdown__body:not(.library__example)>table td{padding:5px 10px}.library__color-swatch{float:left;margin-right:2%;margin-bottom:15px;width:20%;border:1px solid #ddd;padding:5px;border-radius:3px}.library__color-swatch__preview{display:block;margin-bottom:10px;height:75px}.library__nav{position:fixed;z-index:100;top:0;right:0;overflow-y:scroll;width:300px;height:100%;background-color:#494C49;padding:15px 0;color:#fff}.library__nav a{width:100%;display:inline-block;padding:10px 15px;text-decoration:none}.library__nav h2 a{margin-bottom:10px;color:rgba(255,255,255,0.4)}.library__nav ul{margin-bottom:15px}.library__nav li{border-top:1px solid rgba(255,255,255,0.4)}.library__nav li:last-child{border-bottom:1px solid rgba(255,255,255,0.4)}.library__nav li a{color:#fff}.library__nav li a:hover{background-color:#303230} 2 | -------------------------------------------------------------------------------- /dist/pattern-library/theme-assets/js/PatternPack.Global.Navigation.js: -------------------------------------------------------------------------------- 1 | var PatternLibrary = PatternLibrary || {}; 2 | PatternLibrary.Global = PatternLibrary.Global || {}; 3 | 4 | PatternLibrary.Global.Navigation = function() { 5 | var _libraryContainer = null; 6 | var _libraryContent = null; 7 | var _menuLink = null; 8 | 9 | function initializeDomElements() { 10 | _libraryContainer = document.getElementById('libraryContainer'); 11 | _libraryContent = document.getElementById('libraryContent'); 12 | _menuLink = document.getElementById('menuToggle'); 13 | } 14 | 15 | // Checks if the menu is open, then closes it 16 | function closeMenu() { 17 | if (_libraryContainer.classList) { 18 | if (_libraryContainer.classList.contains('open')) { 19 | toggleMenu(); 20 | } 21 | } 22 | } 23 | 24 | function toggleMenu() { 25 | event.preventDefault(); 26 | 27 | if (_libraryContainer.classList) { 28 | _libraryContainer.classList.toggle('open'); 29 | } 30 | } 31 | 32 | function wireEvents() { 33 | _menuLink.addEventListener("click", toggleMenu, false); 34 | _libraryContent.addEventListener("click", closeMenu, false); 35 | } 36 | 37 | function initialize() { 38 | hljs.initHighlightingOnLoad(); // initialize Highlight.js 39 | initializeDomElements(); 40 | wireEvents(); 41 | } 42 | 43 | // Expose our private functions 44 | return { 45 | initialize: initialize 46 | } 47 | }(); 48 | 49 | // Run our code above 50 | document.addEventListener("DOMContentLoaded", function(event) { 51 | PatternLibrary.Global.Navigation.initialize(); 52 | }); -------------------------------------------------------------------------------- /dist/pattern-library/theme-assets/scss/patternpack-theme.scss: -------------------------------------------------------------------------------- 1 | // These are structural styles for the pattern library itself 2 | // When adding styles to this document, be sure to consider how it will affect your project styles! 3 | 4 | // Global Library Styles 5 | $font-default: Helvetica, Arial, sans-serif; 6 | $font-size: 1em; 7 | $font-size-lg: $font-size * 1.5; 8 | $color-text: #333; 9 | $bg-color: #fff; 10 | $border-color: #ddd; 11 | 12 | // Header Styles 13 | $header-bg-color: #f1f1f1; 14 | $header-border-color: $border-color; 15 | 16 | // Navbar Styles 17 | $nav-width: 300px; 18 | $nav-bg-color: #494C49; 19 | $nav-color: #fff; 20 | $nav-heading-color: rgba(255,255,255,0.4); 21 | 22 | // Code Styles 23 | $code-bg-color: $header-bg-color; 24 | 25 | // Sidebar Toggle Styles 26 | $sidebar-toggle-timing: 200ms; 27 | 28 | // Global Pattern Library Styles 29 | html { 30 | box-sizing: border-box; 31 | } 32 | *, *:before, *:after { 33 | box-sizing: inherit; 34 | } 35 | 36 | body { 37 | font-family: $font-default; 38 | color: $color-text; 39 | } 40 | 41 | // Library Container - the content area that slides to the left when opened 42 | .library__container { 43 | position: absolute; 44 | z-index: 200; 45 | min-height: 100%; 46 | width: 100%; 47 | right: 0; 48 | background-color: $bg-color; 49 | transition: all $sidebar-toggle-timing ease; 50 | 51 | &.open { 52 | right: $nav-width; 53 | 54 | // The hamburger transformed to an X when opened 55 | .library__header__toggle { 56 | background-color: transparent; 57 | 58 | &:before, 59 | &:after { 60 | top: 0; 61 | } 62 | 63 | &:before { 64 | transform: rotate(-45deg); 65 | } 66 | 67 | &:after { 68 | transform: rotate(45deg); 69 | } 70 | } 71 | 72 | .library__content__open-overlay { 73 | width: 100%; 74 | height: 100%; 75 | background-color: rgba(0,0,0,0.4); 76 | cursor: pointer; 77 | } 78 | } 79 | } 80 | 81 | // Header Styling 82 | .library__header { 83 | position: fixed; 84 | z-index: 300; 85 | width: 100%; 86 | background-color: $header-bg-color; 87 | border-bottom: 1px solid $header-border-color; 88 | padding: 15px; 89 | 90 | a { 91 | text-decoration: none; 92 | color: $color-text; 93 | } 94 | } 95 | 96 | .library__header__logo { 97 | max-height: 40px; 98 | vertical-align: middle; 99 | } 100 | 101 | .library__header__title { 102 | font-size: $font-size-lg; 103 | vertical-align: text-top; 104 | } 105 | 106 | .library__header__menu-toggle__container { 107 | position: absolute; 108 | right: 0; 109 | top: 0; 110 | bottom: 0; 111 | width: 100px; 112 | height: 100%; 113 | cursor: pointer; 114 | } 115 | 116 | // The hamburger 117 | .library__header__toggle { 118 | position: absolute; 119 | top: 50%; 120 | right: 15px; 121 | transform: translateY(-50%); 122 | width: 25px; 123 | height: 5px; 124 | float: right; 125 | text-indent: -999em; 126 | background-color: black; 127 | border-radius: 3px; 128 | transition: all $sidebar-toggle-timing ease; 129 | 130 | &:before, &:after { 131 | content: ''; 132 | position: absolute; 133 | right: 0; 134 | display: block; 135 | width: 25px; 136 | height: 5px; 137 | background-color: black; 138 | border-radius: 3px; 139 | transition: all $sidebar-toggle-timing ease; 140 | } 141 | 142 | &:before { 143 | top: -9px; 144 | } 145 | 146 | &:after { 147 | top: 9px; 148 | } 149 | } 150 | 151 | // The Library's Content itself 152 | .library__content { 153 | margin-top: 70px; // for the height of the header 154 | padding: 15px; 155 | transition: opacity $sidebar-toggle-timing ease; 156 | } 157 | 158 | .library__content__open-overlay { 159 | position: absolute; 160 | top: 0; 161 | left: 0; 162 | z-index: 300; 163 | width: 0; 164 | height: 0; 165 | background-color: transparent; 166 | transition: background-color $sidebar-toggle-timing ease; 167 | } 168 | 169 | // The global page heading size 170 | h1 { 171 | font-size: 36px; // TODO: Standard pattern library font sizing? 172 | } 173 | 174 | // Styling for component documentation 175 | .markdown__body { 176 | margin-top: 30px; 177 | clear: both; 178 | 179 | // Styling of all component documentation need to live in this block 180 | // The :not(.library__example) ensures that our documentation styles don't 181 | // override the actual project example code. Each child has to be a direct 182 | // descendant (>) to ensure all hierarchy works 183 | // References: 184 | // https://developer.mozilla.org/en-US/docs/Web/CSS/:not 185 | // http://stackoverflow.com/questions/14900763/css-selector-for-not-a-child-of-element-type 186 | &:not(.library__example) { 187 | > *:first-child { 188 | margin-top: 0; 189 | } 190 | 191 | > h1 { 192 | margin-top: 1em; 193 | margin-bottom: 15px; 194 | border-bottom: 1px solid $header-border-color; 195 | padding-bottom: 10px; 196 | font-weight: bold; 197 | } 198 | 199 | > h2 { 200 | margin-top: 1em; 201 | margin-bottom: 15px; 202 | border-bottom: 1px solid $header-border-color; 203 | padding-bottom: 10px; 204 | font-size: 28px; 205 | font-weight: bold; 206 | } 207 | 208 | > h3 { 209 | margin-top: 1em;; 210 | margin-bottom: 5px; 211 | font-size: 24px; 212 | font-weight: bold; 213 | } 214 | 215 | > p { 216 | margin-bottom: 1em; 217 | } 218 | 219 | > ul,ol { 220 | margin-bottom: 1em; 221 | margin-left: 1.5em; 222 | 223 | li { 224 | ul,ol { 225 | margin-left: 1.5em; 226 | } 227 | } 228 | } 229 | 230 | > ul { 231 | list-style: square; 232 | 233 | li { 234 | ul { 235 | list-style: square; 236 | } 237 | } 238 | } 239 | 240 | > ol { 241 | list-style: decimal; 242 | 243 | li { 244 | ol { 245 | list-style: decimal; 246 | } 247 | } 248 | } 249 | 250 | > pre { 251 | font-family: 'Consolas', 'Monaco', 'Courier New', monospace; 252 | line-height: 1.3em; 253 | border: 1px solid $header-border-color; 254 | border-radius: 3px; 255 | 256 | * { 257 | background-color: $code-bg-color !important; 258 | } 259 | } 260 | 261 | > table { 262 | th { 263 | text-align: left; 264 | text-transform: uppercase; 265 | background-color: $header-bg-color; 266 | font-size: .8em; 267 | font-weight: bold; 268 | padding: 10px; 269 | } 270 | td { 271 | padding: 5px 10px; 272 | } 273 | } 274 | } 275 | } 276 | 277 | // Color swatches show up in the example but are still scoped to the library, 278 | // therefore we don't put them in the :not block above 279 | .library__color-swatch { 280 | float: left; 281 | margin-right: 2%; 282 | margin-bottom: 15px; 283 | width: 20%; 284 | border: 1px solid $border-color; 285 | padding: 5px; 286 | border-radius: 3px; 287 | } 288 | 289 | .library__color-swatch__preview { 290 | display: block; 291 | margin-bottom: 10px; 292 | height: 75px; 293 | } 294 | 295 | // Navigation Styles 296 | // TODO: scope this to only the pattern library 297 | .library__nav { 298 | position: fixed; 299 | z-index: 100; 300 | top: 0; 301 | right: 0; 302 | overflow-y: scroll; 303 | width: $nav-width; 304 | height: 100%; // ensure the navbar stretches the height of the screen 305 | background-color: $nav-bg-color; 306 | padding: 15px 0; 307 | color: $nav-color; 308 | 309 | a { 310 | width: 100%; 311 | display: inline-block; 312 | padding: 10px 15px; 313 | text-decoration: none; 314 | } 315 | 316 | h2 a { 317 | margin-bottom: 10px; 318 | color: $nav-heading-color; 319 | } 320 | 321 | ul { 322 | margin-bottom: 15px; 323 | } 324 | 325 | li { 326 | border-top: 1px solid $nav-heading-color; 327 | 328 | &:last-child { 329 | border-bottom: 1px solid $nav-heading-color; 330 | } 331 | 332 | a { 333 | color: #fff; 334 | 335 | &:hover { 336 | background-color: darken($nav-bg-color, 10%); 337 | } 338 | } 339 | } 340 | } 341 | -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.initConfig({ 3 | patternpack: { 4 | options: { 5 | assets: "./src/assets" 6 | // Add a custom theme by specifying a theme package. 7 | // theme: "patternpack-example-theme" 8 | // 9 | // You may also point directly to a theme by path if you wish to make 10 | // the theme part of your pattern library itself. 11 | // theme: "./theme/" 12 | }, 13 | run: {}, 14 | build: {}, 15 | release: {}, 16 | "release-major": {}, 17 | "release-minor": {}, 18 | "release-patch": {} 19 | } 20 | }); 21 | 22 | grunt.loadNpmTasks("patternpack"); 23 | 24 | grunt.registerTask("run", ["patternpack:run"]); 25 | grunt.registerTask("build", ["patternpack:build"]); 26 | grunt.registerTask("release", ["patternpack:release"]); 27 | grunt.registerTask("release-major", ["patternpack:release-major"]); 28 | grunt.registerTask("release-minor", ["patternpack:release-minor"]); 29 | grunt.registerTask("release-patch", ["patternpack:release-patch"]); 30 | grunt.registerTask("default", ["run"]); 31 | }; 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "patternpack-example-library", 3 | "description": "The example pattern library created from pattern pack", 4 | "version": "1.0.7", 5 | "license": "MIT", 6 | "devDependencies": { 7 | "grunt": "latest", 8 | "patternpack": "latest" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/patternpack/patternpack-example-library.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/patternpack/patternpack-example-library/issues" 16 | }, 17 | "author": "John Gully ", 18 | "contributors": [ 19 | "Marcelo Somers " 20 | ], 21 | "keywords": [ 22 | "atomic design", 23 | "atomic-design", 24 | "atomicdesign", 25 | "atomic", 26 | "design", 27 | "design system", 28 | "example", 29 | "library", 30 | "pack", 31 | "pattern", 32 | "pattern pack", 33 | "pattern pack example library", 34 | "pattern-pack", 35 | "pattern-pack-example-library", 36 | "pattern-library", 37 | "patternlibrary", 38 | "patternpack" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # PatternPack Example Library 2 | This is an example pattern library built by [PatternPack](http://patternpack.org/), a tool for designing and documenting User Interface code, then sharing it among multiple applications. You can use this project as a guide to create your own pattern library from scratch, or you can simply fork the repo and customize it to your needs. 3 | 4 | ## Get Started 5 | 6 | 1. Clone or download the library 7 | 2. Run `npm install` to grab the dependencies 8 | 3. Run `grunt` to start up the library 9 | 4. Visit [http://localhost:8888/](http://localhost:8888/) 10 | -------------------------------------------------------------------------------- /src/assets/images/image-placeholder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/assets/js/PatternLibrary.Global.Navigation.js: -------------------------------------------------------------------------------- 1 | var PatternLibrary = PatternLibrary || {}; 2 | PatternLibrary.Global = PatternLibrary.Global || {}; 3 | 4 | PatternLibrary.Global.Navigation = function() { 5 | "use strict"; 6 | 7 | var libraryContainer = null; 8 | var libraryContent = null; 9 | var menuLink = null; 10 | 11 | function initializeDomElements() { 12 | libraryContainer = document.getElementById("libraryContainer"); 13 | libraryContent = document.getElementById("libraryContent"); 14 | menuLink = document.getElementById("menuToggle"); 15 | } 16 | 17 | // Checks if the menu is open, then closes it 18 | function closeMenu() { 19 | if (libraryContainer.classList) { 20 | if (libraryContainer.classList.contains("open")) { 21 | toggleMenu(); 22 | } 23 | } 24 | } 25 | 26 | function toggleMenu() { 27 | event.preventDefault(); 28 | 29 | if (libraryContainer.classList) { 30 | libraryContainer.classList.toggle("open"); 31 | } 32 | } 33 | 34 | function wireEvents() { 35 | menuLink.addEventListener("click", toggleMenu, false); 36 | libraryContent.addEventListener("click", closeMenu, false); 37 | } 38 | 39 | function initialize() { 40 | hljs.initHighlightingOnLoad(); // initialize Highlight.js 41 | initializeDomElements(); 42 | wireEvents(); 43 | } 44 | 45 | // Expose our private functions 46 | return { 47 | initialize: initialize 48 | }; 49 | }(); 50 | 51 | // Run our code above 52 | document.addEventListener("DOMContentLoaded", function(event) { 53 | "use strict"; 54 | 55 | PatternLibrary.Global.Navigation.initialize(); 56 | }); 57 | -------------------------------------------------------------------------------- /src/assets/less/patterns.less: -------------------------------------------------------------------------------- 1 | @import "patternpack-patterns"; // Built by sass-globbing 2 | -------------------------------------------------------------------------------- /src/assets/sass/_globals.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patternpack/patternpack-example-library/0673815caf933c7e7620d945eb6d3d3ea31b925b/src/assets/sass/_globals.scss -------------------------------------------------------------------------------- /src/assets/sass/config/mixins/_legacy-browsers.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patternpack/patternpack-example-library/0673815caf933c7e7620d945eb6d3d3ea31b925b/src/assets/sass/config/mixins/_legacy-browsers.scss -------------------------------------------------------------------------------- /src/assets/sass/config/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | $color-red: #AC0023; 2 | $color-green: #1E8339; 3 | $color-yellow: #F5E93D; -------------------------------------------------------------------------------- /src/assets/sass/config/variables/_typography.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patternpack/patternpack-example-library/0673815caf933c7e7620d945eb6d3d3ea31b925b/src/assets/sass/config/variables/_typography.scss -------------------------------------------------------------------------------- /src/assets/sass/libraries/_reset.scss: -------------------------------------------------------------------------------- 1 | /* Reset CSS 2 | QUESTION: where should this live given the new folder structure? 3 | */ 4 | 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, hgroup, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font: inherit; 23 | vertical-align: baseline; 24 | } 25 | /* HTML5 display-role reset for older browsers */ 26 | article, aside, details, figcaption, figure, 27 | footer, header, hgroup, menu, nav, section { 28 | display: block; 29 | } 30 | body { 31 | line-height: 1; 32 | } 33 | ol, ul { 34 | list-style: none; 35 | } 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | blockquote:before, blockquote:after, 40 | q:before, q:after { 41 | content: ''; 42 | content: none; 43 | } 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } -------------------------------------------------------------------------------- /src/assets/sass/patterns.scss: -------------------------------------------------------------------------------- 1 | // Include custom styles here 2 | @import "_globals"; 3 | 4 | @import "_patternpack-patterns"; // Built by sass-globbing 5 | -------------------------------------------------------------------------------- /src/atoms/buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons 3 | --- 4 | ## Buttons 5 | TODO: Describe what buttons are and how they are used in the application. 6 | 7 | ### Examples 8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 | 17 |
18 | 19 | ### Code 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /src/atoms/buttons.scss: -------------------------------------------------------------------------------- 1 | button { 2 | padding: 5px 20px; 3 | border: 0; 4 | border-radius: 5px; 5 | color: white; 6 | } 7 | 8 | .button--primary { 9 | background-color: #000; 10 | } 11 | 12 | .button--secondary { 13 | background-color: #CCC; 14 | } 15 | 16 | .button--small { 17 | padding: 2px 20px; 18 | height: 30px; 19 | } 20 | 21 | .button--large { 22 | height: 40px; 23 | } 24 | -------------------------------------------------------------------------------- /src/atoms/colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Colors 3 | --- 4 | ## Colors 5 | These are Colors in the Application 6 | 7 | ### Examples 8 |
9 |
10 | 11 |
    12 |
  • Red
    • 13 |
  • #AC0023
    • 14 |
  • $color-red
    • 15 |
16 |
17 | 18 |
19 | 20 |
    21 |
  • Green
    • 22 |
  • #1E8339
    • 23 |
  • $color-green
    • 24 |
25 |
26 | 27 |
28 | 29 |
    30 |
  • Yellow
    • 31 |
  • #F5E93D
    • 32 |
  • $color-yellow
    • 33 |
34 |
35 |
-------------------------------------------------------------------------------- /src/atoms/forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms 3 | --- 4 | ## Forms 5 | TODO: 6 | 7 | ### Examples 8 | TODO: 9 | 10 | ### Code 11 | ```html 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /src/atoms/forms.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patternpack/patternpack-example-library/0673815caf933c7e7620d945eb6d3d3ea31b925b/src/atoms/forms.scss -------------------------------------------------------------------------------- /src/atoms/headings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Headings 3 | --- 4 | ## Headings 5 | TODO: 6 | 7 | ### Examples 8 | TODO: 9 | 10 | ### Code 11 | ```html 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /src/atoms/headings.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patternpack/patternpack-example-library/0673815caf933c7e7620d945eb6d3d3ea31b925b/src/atoms/headings.scss -------------------------------------------------------------------------------- /src/atoms/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Atoms 3 | --- 4 |

{{title}}

5 |

TODO: Describe what an atom is

6 | 7 | {{#each pages}} 8 | {{#contains this.dest "atoms"}} 9 | {{#isnt ../../page.dest this.dest}} 10 | 11 |
12 | {{#markdown}} 13 | {{{page}}} 14 | {{/markdown}} 15 |
16 | {{/isnt}} 17 | {{/contains}} 18 | {{/each}} 19 | -------------------------------------------------------------------------------- /src/atoms/typography.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typography 3 | --- 4 | ## Typography 5 | Miscellaneous typographic styles within the app 6 | 7 | ### Examples 8 |
9 | strong 10 |
11 | 12 | ### Code 13 | ```html 14 | strong 15 | ``` -------------------------------------------------------------------------------- /src/atoms/typography.scss: -------------------------------------------------------------------------------- 1 | strong { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to PatternPack 3 | --- 4 | 5 | # Welcome to PatternPack 6 | This is an example pattern library built by [PatternPack](http://patternpack.org/), a tool for designing and documenting User Interface code, then sharing it among multiple applications. 7 | 8 | While this is a very stock implementation, PatternPack has [many options](https://github.com/patternpack/patternpack#options) to customize it to your needs, including custom themes for your documentation, Sass and LESS support, and more. 9 | 10 | ## Next Steps 11 | This project can serve as a starting point for your own pattern library, or simply as a reference point when [building your own from scratch](https://github.com/patternpack/patternpack/blob/develop/docs/tutorial.md). Be sure to take a look at all the PatternPack [Guides and Resources](https://github.com/patternpack/patternpack/blob/develop/docs/docs.md). 12 | 13 | ## Help & Support 14 | If you have questions, bugs, or enhancement requests you can [file an issue on GitHub](https://github.com/patternpack/patternpack/issues). We also have a [Slack Channel](http://slack.patternpack.org/). 15 | -------------------------------------------------------------------------------- /src/molecules/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Molecules 3 | --- 4 |
5 |

{{title}}

6 |

TODO: Describe what an molecule is

7 | 8 | {{#each pages}} 9 | {{#contains this.dest "molecules"}} 10 | {{#isnt ../../page.dest this.dest}} 11 | 12 |
13 | {{#markdown}} 14 | {{{page}}} 15 | {{/markdown}} 16 |
17 | {{/isnt}} 18 | {{/contains}} 19 | {{/each}} 20 |
21 | -------------------------------------------------------------------------------- /src/molecules/nav.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Navigation 3 | --- 4 | ## Navigation 5 | TODO: Describe what navigation is and how it is used in the application. 6 | 7 | ### Examples 8 | 9 | 10 | ### Code 11 | ```html 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /src/pages/article-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Article Template 3 | standalone: true 4 | template: true 5 | --- 6 | 7 | ## Article Template 8 | TODO: Describe what an article template 1 is and how it is used in the application. 9 | 10 | ### Examples 11 |
12 |
13 |

Article title goes here

14 |

15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla massa velit, mattis sollicitudin augue fringilla eget. Vivamus viverra lectus non dignissim bibendum. Duis ante ex, mollis sed est et, rhoncus sollicitudin tellus. Ut nibh dui, aliquet in rutrum pretium, consequat et ipsum. Morbi ullamcorper arcu vitae eros tempor scelerisque. Curabitur mi libero, accumsan nec lectus sit amet, lacinia porttitor ipsum. Mauris quis elementum lacus, vitae lobortis turpis. Phasellus laoreet lacinia interdum. 16 |

17 |
18 |
19 | By: 20 | 21 |
22 |
23 | 24 | 25 | ### Code 26 | 27 | ```html 28 |
29 |
40 | 41 | ``` 42 | -------------------------------------------------------------------------------- /src/pages/home-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home Page 3 | standalone: true 4 | template: false 5 | --- 6 | 7 | ## Home Page 8 | TODO: Describe what the home page is and how it is used in the application. 9 | 10 | ### Examples 11 |
12 | 13 |
14 |

Integer eget facilisis diam

15 |

16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla massa velit, mattis sollicitudin augue fringilla eget. Vivamus viverra lectus non dignissim bibendum. Duis ante ex, mollis sed est et, rhoncus sollicitudin tellus. Ut nibh dui, aliquet in rutrum pretium, consequat et ipsum. Morbi ullamcorper arcu vitae eros tempor scelerisque. Curabitur mi libero, accumsan nec lectus sit amet, lacinia porttitor ipsum. Mauris quis elementum lacus, vitae lobortis turpis. Phasellus laoreet lacinia interdum. 17 |

18 |
19 | 26 |
27 | 28 | ### Code 29 | ```html 30 |
31 | 32 |
33 |

34 |

35 | 36 |

37 |
38 | 45 |
46 | ``` 47 | -------------------------------------------------------------------------------- /src/pages/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pages 3 | --- 4 |
5 |

Templates

6 |

TODO: Describe what a template

7 | 8 |
37 | --------------------------------------------------------------------------------