├── .gitignore ├── README.md ├── _config.yml ├── _includes ├── fonts.html └── head.html ├── _layouts ├── fundamental.html └── pattern.html ├── _patterns ├── blockquote.html ├── feedback-error.html ├── feedback.html ├── form-buttons.html ├── form-checkbox.html ├── form-email.html ├── form-number.html ├── form-select.html ├── form-text.html ├── form-textarea.html ├── form-url.html ├── heading-1.html ├── heading-2.html ├── heading-3.html ├── heading-4.html ├── heading-5.html ├── heading-6.html ├── list-ordered.html ├── list-unordered.html ├── pagination-first.html ├── pagination-last.html ├── pagination.html └── text.html ├── css └── global.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .DS_Store 3 | .sass-cache/ 4 | .jekyll-metadata 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll version of Pattern Primer 2 | 3 | Forked from the [original Pattern-Primer for PHP by Adactio (Jeremy Keith)](https://github.com/adactio/Pattern-Primer) 4 | 5 | Inspired by [Ruby (Sinatra) version](https://github.com/micdijkstra/Pattern-Primer-Ruby) 6 | 7 | ## Pattern Primer 8 | 9 | This is a design communication, testing, and process tool. 10 | 11 | Create little snippets of markup and save them to the `_patterns` directory (a Jekyll [collection](http://jekyllrb.com/docs/collections/)). The pattern primer will generate a list of all the HTML patterns in that folder. 12 | 13 | The patterns are rendered as HTML, with a reference source displayed in a ` -------------------------------------------------------------------------------- /_patterns/form-url.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: form-url.html 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /_patterns/heading-1.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-1.html 4 | --- 5 |

Level one heading

-------------------------------------------------------------------------------- /_patterns/heading-2.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-2.html 4 | --- 5 |

Level two heading

-------------------------------------------------------------------------------- /_patterns/heading-3.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-3.html 4 | --- 5 |

Level three heading

-------------------------------------------------------------------------------- /_patterns/heading-4.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-4.html 4 | --- 5 |

Level four heading

-------------------------------------------------------------------------------- /_patterns/heading-5.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-5.html 4 | --- 5 |
Level five heading
-------------------------------------------------------------------------------- /_patterns/heading-6.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: heading-6.html 4 | --- 5 |
Level six heading
-------------------------------------------------------------------------------- /_patterns/list-ordered.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: list-ordered.html 4 | --- 5 |
    6 |
  1. First list item
  2. 7 |
  3. Second item in a list of ordered items
  4. 8 |
  5. Third item in the list
  6. 9 |
-------------------------------------------------------------------------------- /_patterns/list-unordered.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: list-unordered.html 4 | --- 5 | -------------------------------------------------------------------------------- /_patterns/pagination-first.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: pagination-first.html 4 | --- 5 |
    6 |
  1. 1
  2. 7 |
  3. 2
  4. 8 |
  5. 3
  6. 9 |
  7. 4
  8. 10 |
  9. 5
  10. 11 |
  11. 6
  12. 12 |
  13. 7
  14. 13 |
  15. 8
  16. 14 |
  17. 9
  18. 15 |
  19. 10
  20. 16 |
-------------------------------------------------------------------------------- /_patterns/pagination-last.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: pagination-last.html 4 | --- 5 |
    6 |
  1. 1
  2. 7 |
  3. 2
  4. 8 |
  5. 3
  6. 9 |
  7. 4
  8. 10 |
  9. 5
  10. 11 |
  11. 6
  12. 12 |
  13. 7
  14. 13 |
  15. 8
  16. 14 |
  17. 9
  18. 15 |
  19. 10
  20. 16 |
-------------------------------------------------------------------------------- /_patterns/pagination.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: pagination.html 4 | --- 5 |
    6 |
  1. 1
  2. 7 |
  3. 2
  4. 8 |
  5. 3
  6. 9 |
  7. 4
  8. 10 |
  9. 5
  10. 11 |
  11. 6
  12. 12 |
  13. 7
  14. 13 |
  15. 8
  16. 14 |
  17. 9
  18. 15 |
  19. 10
  20. 16 |
-------------------------------------------------------------------------------- /_patterns/text.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: text.html 4 | --- 5 |

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

-------------------------------------------------------------------------------- /css/global.css: -------------------------------------------------------------------------------- 1 | /* @group Reset */ 2 | 3 | /* Based on http://meyerweb.com/eric/tools/css/reset/ */ 4 | 5 | html, body, applet, object, iframe, svg, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, font, 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 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font-weight: inherit; 19 | font-style: inherit; 20 | font-family: inherit; 21 | text-decoration: inherit; 22 | text-align: left; 23 | background: transparent; 24 | } 25 | header, footer, figure, details, hgroup, 26 | section, article, nav, aside { 27 | display: block; 28 | } 29 | img, object, audio, video, svg { 30 | max-width: 100%; 31 | } 32 | /* @end Reset */ 33 | 34 | /* @group Typography */ 35 | 36 | html { 37 | border-top: 0.5em solid #693; 38 | background-color: #eee; 39 | } 40 | body { 41 | background-color: #fefefe; 42 | background: rgba(255,255,255,0.9); 43 | margin: 0 2.5%; 44 | padding: 0 2.5%; 45 | font-size: 100%; 46 | line-height: 1.875; 47 | font-family: Cambria, Georgia, serif; 48 | color: #333; 49 | border-left: 1px solid; 50 | border-right: 1px solid; 51 | border-color: #ddd; 52 | border-color: rgba(0,0,0,0.13); 53 | } 54 | h1 { 55 | font-family: Palatino, Cambria, Georgia, serif; 56 | font-weight: normal; 57 | font-size: 2.5em; 58 | line-height: 1.125; 59 | padding-top: 1em; 60 | margin-bottom: 0.3em; 61 | color: #444; 62 | border-bottom: 0.2em solid #693; 63 | } 64 | h2 { 65 | font-family: Palatino, Cambria, Georgia, serif; 66 | font-weight: normal; 67 | font-size: 1.875em; 68 | line-height: 1.5; 69 | padding-top: 0.8333em; 70 | margin-bottom: 0.7em; 71 | color: #555; 72 | border-bottom: 0.13333em solid #693; 73 | } 74 | h3 { 75 | font-family: Palatino, Cambria, Georgia, serif; 76 | font-weight: normal; 77 | font-size: 1.5625em; 78 | line-height: 1.4; 79 | padding-top: 1em; 80 | margin-bottom: 0.7em; 81 | color: #666; 82 | border-bottom: 0.1em solid #693; 83 | } 84 | h4 { 85 | font-family: Palatino, Cambria, Georgia, serif; 86 | font-weight: normal; 87 | font-size: 1.25em; 88 | line-height: 1.5; 89 | padding-top: 1em; 90 | margin-bottom: 1em; 91 | color: #777; 92 | } 93 | h5 { 94 | font-family: Palatino, Cambria, Georgia, serif; 95 | font-weight: normal; 96 | font-size: 1.125em; 97 | line-height: 1.6667; 98 | padding-top: 1.1111em; 99 | color: #888; 100 | } 101 | h6 { 102 | padding-top: 1em; 103 | color: #999; 104 | } 105 | b, strong { 106 | font-weight: bold; 107 | } 108 | i, em { 109 | font-style: italic; 110 | } 111 | hr { 112 | border: none; 113 | height: 0.1em; 114 | background: #ccc; 115 | background-color: rgba(0,0,0,0.2); 116 | } 117 | p, ul, ol, hr, table, form, fieldset { 118 | margin: 1.25em 0; 119 | } 120 | li { 121 | list-style-position: inside; 122 | margin-left: 1em; 123 | text-indent: -1em; 124 | } 125 | blockquote { 126 | margin: 1em; 127 | border-top: 0.1em solid; 128 | border-bottom: 0.1em solid; 129 | padding: 0 1em; 130 | font-family: Palatino, Georgia, serif; 131 | font-style: italic; 132 | font-size: 1.25em; 133 | line-height: 1.5; 134 | letter-spacing: 0.05em; 135 | color: #888; 136 | border-color: #ccc; 137 | border-color: rgba(0,0,0,0.2); 138 | -webkit-border-radius: 0.25em; 139 | -moz-border-radius: 0.25em; 140 | -o-border-radius: 0.25em; 141 | border-radius: 0.25em; 142 | } 143 | blockquote em { 144 | font-style: normal; 145 | } 146 | figcaption { 147 | font-family: Palatino, Cambria, Georgia, serif; 148 | font-style: italic; 149 | font-size: 0.857em; 150 | line-height: 1.4286; 151 | color: #666; 152 | } 153 | article > p, 154 | article section > p { 155 | font-size: 1.125em; 156 | line-height: 1.6667; 157 | word-spacing: 0.1em; 158 | margin: 1.1111em 0; 159 | /* Does this improve the reading experience? 160 | -webkit-hyphens: auto; 161 | -moz-hyphens: auto; 162 | hyphens: auto; 163 | text-align: justify; 164 | */ 165 | } 166 | article footer+p:first-letter, 167 | article section>h2+p:first-letter, 168 | article section>p:first-child:first-letter { 169 | display: inline-block; 170 | float: left; 171 | font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; 172 | font-weight: bold; 173 | font-size: 4em; 174 | line-height: 0.75; 175 | letter-spacing: -0.025em; 176 | margin-right: 0.05em; 177 | background-color: #693; 178 | color: #fff; 179 | border: 1px solid #693; 180 | 181 | } 182 | time { 183 | display: block; 184 | text-align: right; 185 | font-weight: normal; 186 | font-family: Palatino, Cambria, Georgia, serif; 187 | text-transform: uppercase; 188 | font-size: 0.75em; 189 | line-height: 1.6667; 190 | letter-spacing: 0.2em; 191 | color: #888; 192 | } 193 | time:before { 194 | content: '—'; 195 | } 196 | 197 | /* @end Typography */ 198 | 199 | /* @group Links */ 200 | 201 | a { 202 | text-decoration: none; 203 | border-bottom-style: dotted; 204 | border-bottom-width: 1px; 205 | white-space: pre-wrap; 206 | } 207 | a:link, 208 | a:visited { 209 | color: #369; 210 | border-bottom-color: #369; 211 | } 212 | a[href]:hover, 213 | a[href]:focus { 214 | color: #c03; 215 | border-bottom-color: #c03; 216 | } 217 | a:active { 218 | color: #900; 219 | border-bottom-color: #900; 220 | } 221 | .logo a, h1 a, h2 a, h3 a { 222 | border: none; 223 | } 224 | 225 | /* @end Links */ 226 | 227 | /* @group Forms */ 228 | 229 | label { 230 | cursor: pointer; 231 | } 232 | input[type], 233 | textarea, 234 | select { 235 | background-color: #fff; 236 | width: 100%; 237 | font-family: inherit; 238 | font-size: inherit; 239 | padding: 0.125em; 240 | border: 1px solid #ccc; 241 | -webkit-border-radius: 0.25em; 242 | -moz-border-radius: 0.25em; 243 | -o-border-radius: 0.25em; 244 | border-radius: 0.25em; 245 | } 246 | input[type="checkbox"], 247 | input[type="radio"], 248 | input[type="image"] { 249 | width: auto; 250 | } 251 | input:focus, 252 | textarea:focus, 253 | select:focus { 254 | outline: none; 255 | border-color: #666; 256 | } 257 | input[required], 258 | textarea[required] { 259 | border-color: #999; 260 | } 261 | button, 262 | input[type="button"], 263 | input[type="submit"] { 264 | width: auto; 265 | text-align: center; 266 | font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; 267 | font-size: inherit; 268 | font-weight: normal; 269 | font-style: normal; 270 | border: 1px solid #666; 271 | cursor: pointer; 272 | padding: 0.5em 1em; 273 | line-height: 1; 274 | background-color: #369; 275 | color: #fff; 276 | background-image: -webkit-linear-gradient(0% 0%,0% 100%,from(#47a),to(#258)); 277 | background-image: -moz-linear-gradient(top,#47a,#258); 278 | background-image: -o-linear-gradient(top,#47a,#258); 279 | background-image: linear-gradient(top,#47a,#258); 280 | -webkit-border-radius: 1em; 281 | -moz-border-radius: 1em; 282 | -o-border-radius: 1em; 283 | border-radius: 1em; 284 | } 285 | button:hover, 286 | button:focus, 287 | input[type="button"]:hover, 288 | input[type="button"]:focus, 289 | input[type="submit"]:hover, 290 | input[type="submit"]:focus { 291 | outline: none; 292 | background-color: #c03; 293 | background-image: -webkit-linear-gradient(0% 0%,0% 100%,from(#d04),to(#b02)); 294 | background-image: -moz-linear-gradient(top,#d04,#b02); 295 | background-image: -o-linear-gradient(top,#d04,#b02); 296 | background-image: linear-gradient(top,#d04,#b02); 297 | 298 | color: #fff; 299 | } 300 | button:active, 301 | input[type="button"]:active, 302 | input[type="submit"]:active { 303 | background-color: #900; 304 | background-image: -webkit-linear-gradient(0% 0%,0% 100%,from(#800),to(#a00)); 305 | background-image: -moz-linear-gradient(top,#800,#a00); 306 | background-image: -o-linear-gradient(top,#800,#a00); 307 | background-image: linear-gradient(top,#800,#a00); 308 | color: #fff; 309 | } 310 | 311 | /* @group search */ 312 | 313 | [role="search"] { 314 | position: relative; 315 | background-color: #fff; 316 | border: 1px solid #ccc; 317 | padding: 0 0.75em; 318 | -webkit-border-radius: 1em; 319 | -moz-border-radius:1em; 320 | -o-border-radius: 1em; 321 | border-radius: 1em; 322 | } 323 | [role="search"] input { 324 | border: none; 325 | -webkit-appearance: none; 326 | -webkit-border-radius: 0; 327 | -moz-border-radius: 0; 328 | -o-border-radius: 0; 329 | border-radius: 0; 330 | } 331 | [role="search"] input[type="image"] { 332 | background-color: #fff; 333 | position: absolute; 334 | width: 0.9375em; 335 | top: 0.2em; 336 | right: 0.6em; 337 | padding: 0.2em 0.2em; 338 | } 339 | 340 | /* @end search */ 341 | 342 | /* @end Forms */ 343 | 344 | /* @group Classes */ 345 | 346 | /* @group pagination */ 347 | 348 | .pagination { 349 | font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; 350 | } 351 | .pagination li { 352 | display: inline; 353 | margin-left: 0; 354 | text-indent: 0; 355 | } 356 | .pagination a { 357 | display: inline-block; 358 | padding: 0.5em 1em; 359 | line-height: 1; 360 | margin: 0.1em; 361 | border: 1px solid #666; 362 | -webkit-border-radius: 0.25em; 363 | -moz-border-radius: 0.25em; 364 | -o-border-radius: 0.25em; 365 | border-radius: 0.25em; 366 | background-clip: padding-box; 367 | } 368 | .pagination a:link, 369 | .pagination a:visited { 370 | color: #fff; 371 | background-color: #369; 372 | } 373 | .pagination a[href]:hover, 374 | .pagination a[href]:focus { 375 | color: #fff; 376 | background-color: #c03; 377 | } 378 | .pagination a:active { 379 | color: #fff; 380 | background-color: #900; 381 | } 382 | 383 | /* @end pagination*/ 384 | 385 | /* @group control */ 386 | 387 | a.control { 388 | font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; 389 | display: inline-block; 390 | font-size: 1.5em; 391 | padding: 0.5em 0.75em; 392 | line-height: 1; 393 | border: 1px solid #666; 394 | -webkit-border-radius: 0.25em; 395 | -moz-border-radius: 0.25em; 396 | -o-border-radius: 0.25em; 397 | border-radius: 0.25em; 398 | background-clip: padding-box; 399 | } 400 | a.control:link, 401 | a.control:visited { 402 | background-color: #369; 403 | background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#47a),to(#258)); 404 | background-image: -moz-linear-gradient(top,#47a,#258); 405 | background-image: -o-linear-gradient(top,#47a,#258); 406 | background-image: linear-gradient(top,#47a,#258); 407 | color: #fff; 408 | } 409 | a.control:hover, 410 | a.control:focus { 411 | outline: none; 412 | background-color: #c03; 413 | background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#d04),to(#b02)); 414 | background-image: -moz-linear-gradient(top,#d04,#b02); 415 | background-image: -o-linear-gradient(top,#d04,#b02); 416 | background-image: linear-gradient(top,#d04,#b02); 417 | color: #fff; 418 | } 419 | a.control:active { 420 | background-color: #900; 421 | background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#800),to(#a00)); 422 | background-image: -moz-linear-gradient(top,#800,#a00); 423 | background-image: -o-linear-gradient(top,#800,#a00); 424 | background-image: linear-gradient(top,#800,#a00); 425 | color: #fff; 426 | } 427 | 428 | /* @end control */ 429 | 430 | /* @group feedback */ 431 | 432 | .feedback { 433 | background-color: #ffc; 434 | padding: 0.125em 1em; 435 | margin: 1em 0; 436 | border-top: 0.125em solid #cc9; 437 | -webkit-border-radius: 0.25em; 438 | -moz-border-radius: 0.25em; 439 | -o-border-radius: 0.25em; 440 | border-radius: 0.25em; 441 | background-clip: padding-box; 442 | } 443 | .error { 444 | background-color: #fcc; 445 | border-color: #c99; 446 | } 447 | 448 | /* @end feedback */ 449 | 450 | /* @group options */ 451 | 452 | .options { 453 | list-style: none; 454 | border-top: 1px solid #ccc; 455 | } 456 | .options li { 457 | text-indent: 0; 458 | font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; 459 | text-transform: uppercase; 460 | letter-spacing: 0.15em; 461 | font-weight: bold; 462 | margin: 0; 463 | padding: 0.3125em 0.625em; 464 | border-bottom: 1px solid #ccc; 465 | } 466 | .options a { 467 | display: block; 468 | border: none; 469 | } 470 | 471 | /* @end options*/ 472 | 473 | /* @end Classes */ 474 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: fundamental 3 | title: Pattern Primer 4 | --- 5 | 6 | {% for pattern in site.patterns %} 7 |
8 |
9 | {% if site.markdown-patterns %}{{ pattern.content | markdownify }}{% else %}{{ pattern.content }}{% endif %} 10 |
11 |
12 | 13 |

{{ pattern.title }}

14 |
15 |
16 | {% endfor %} --------------------------------------------------------------------------------