├── README.mdown ├── global.css ├── index.php └── 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 /README.mdown: -------------------------------------------------------------------------------- 1 | Create little snippets of markup and save them to the "patterns folder." The pattern primer will generate a list of all the patterns in that folder. You will see the pattern rendered as HTML. You will also get the source displayed in a textarea. 2 | 3 | You should be able to take the whole "pattern-primer" folder and drop it into your own project (assuming you're running PHP) **BUT** make sure to update the link element in the head of pattern-primer/index.php to point to your own CSS. 4 | 5 | Here's a Node.js port: https://github.com/beardtwizzle/pattern-primer-on-node 6 | 7 | And here it is in Ruby: https://github.com/micdijkstra/Pattern-Primer-Ruby 8 | 9 | Here's a Jekyll version: https://github.com/opattison/Pattern-Primer-Jekyll 10 | 11 | You can even run it using Grunt: https://github.com/asciidisco/grunt-patternprimer 12 | -------------------------------------------------------------------------------- /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-gradient(linear,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-gradient(linear,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-gradient(linear,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 */ -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pattern Primer 6 | 7 | 24 | 25 | 26 | 27 | '; 38 | echo '
'; 39 | include('patterns/'.$file); 40 | echo '
'; 41 | echo '
'; 42 | echo ''; 45 | echo '

'.$file.'

'; 46 | echo '
'; 47 | echo ''; 48 | endforeach; 49 | ?> 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /patterns/blockquote.html: -------------------------------------------------------------------------------- 1 |
2 |

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

3 |
-------------------------------------------------------------------------------- /patterns/feedback-error.html: -------------------------------------------------------------------------------- 1 |
2 |

This is an error feedback message.

3 |
-------------------------------------------------------------------------------- /patterns/feedback.html: -------------------------------------------------------------------------------- 1 |
2 |

This is a feedback message for the user.

3 |
-------------------------------------------------------------------------------- /patterns/form-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /patterns/form-checkbox.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /patterns/form-email.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /patterns/form-number.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /patterns/form-select.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /patterns/form-text.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /patterns/form-textarea.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /patterns/form-url.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /patterns/heading-1.html: -------------------------------------------------------------------------------- 1 |

Level one heading

-------------------------------------------------------------------------------- /patterns/heading-2.html: -------------------------------------------------------------------------------- 1 |

Level two heading

-------------------------------------------------------------------------------- /patterns/heading-3.html: -------------------------------------------------------------------------------- 1 |

Level three heading

-------------------------------------------------------------------------------- /patterns/heading-4.html: -------------------------------------------------------------------------------- 1 |

Level four heading

-------------------------------------------------------------------------------- /patterns/heading-5.html: -------------------------------------------------------------------------------- 1 |
Level five heading
-------------------------------------------------------------------------------- /patterns/heading-6.html: -------------------------------------------------------------------------------- 1 |
Level six heading
-------------------------------------------------------------------------------- /patterns/list-ordered.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. First list item
    2. 3 |
  2. Second item in a list of ordered items
    3. 4 |
  3. Third item in the list
    4. 5 |
6 | -------------------------------------------------------------------------------- /patterns/list-unordered.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /patterns/pagination-first.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. 1
    2. 3 |
  2. 2
    3. 4 |
  3. 3
    4. 5 |
  4. 4
    5. 6 |
  5. 5
    6. 7 |
  6. 6
    7. 8 |
  7. 7
    8. 9 |
  8. 8
    9. 10 |
  9. 9
    10. 11 |
  10. 10
    11. 12 |
-------------------------------------------------------------------------------- /patterns/pagination-last.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. 1
    2. 3 |
  2. 2
    3. 4 |
  3. 3
    4. 5 |
  4. 4
    5. 6 |
  5. 5
    6. 7 |
  6. 6
    7. 8 |
  7. 7
    8. 9 |
  8. 8
    9. 10 |
  9. 9
    10. 11 |
  10. 10
    11. 12 |
-------------------------------------------------------------------------------- /patterns/pagination.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. 1
    2. 3 |
  2. 2
    3. 4 |
  3. 3
    4. 5 |
  4. 4
    5. 6 |
  5. 5
    6. 7 |
  6. 6
    7. 8 |
  7. 7
    8. 9 |
  8. 8
    9. 10 |
  9. 9
    10. 11 |
  10. 10
    11. 12 |
-------------------------------------------------------------------------------- /patterns/text.html: -------------------------------------------------------------------------------- 1 |

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.

--------------------------------------------------------------------------------