├── .gitignore
├── README.md
├── docs
    ├── global.css
    └── index.html
├── package.json
├── pattern-primer.js
├── public
    ├── global.css
    └── 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
└── source.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ###Overview
 2 | 
 3 | Pattern-Primer-on-Node is a node.js port of Jeremy Keith's [Pattern Primer](https://github.com/adactio/Pattern-Primer), which is written in PHP.
 4 | 
 5 | >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.
 6 | 
 7 | ###Installation
 8 | 
 9 | You'll need node.js installed (obviously).
10 | 
11 |     npm install -g connect pattern-primer
12 | 
13 | ###Simple Usage
14 | 
15 | Place all your HTML extracts into the `<root>/public/patterns` folder. Navigate to the root directory of Pattern-Primer-on-Node and run:
16 | 
17 |     pattern-primer
18 | 
19 | You can then navigate to `http://localhost:8080/` to see the output.
20 | 
21 | ###Headless Operation
22 | 
23 | If you want to generate a 'standalone' version of the primer output, then you can also run the program with the `tofile` switch as follows:
24 | 
25 |     pattern-primer --tofile
26 | 
27 | This will place a standalone html file, and a copy of the 'global.css' file located in `<root>/public` and will place them in `<root>/docs`. You should just be able to navigate to that folder and open the index.html file to see the same output.


--------------------------------------------------------------------------------
/docs/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 */


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>Pattern Primer</title>
  5 | <link rel="stylesheet" href="global.css">
  6 | <style>
  7 | .pattern {
  8 |     clear: both;
  9 |     overflow: hidden;
 10 | }
 11 | .pattern .display {
 12 |     width: 65%;
 13 |     float: left;
 14 | }
 15 | .pattern .source {
 16 |     width: 30%;
 17 |     float: right;
 18 | }
 19 | .pattern .source textarea {
 20 |     width: 90%;
 21 | }
 22 | </style>
 23 | </head>
 24 | <body><div class="pattern"><div class="display"><blockquote>
 25 | <p>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.</p>
 26 | </blockquote></div><div class="source"><textarea rows="6" cols="30">&lt;blockquote>
 27 | &lt;p>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.&lt;/p>
 28 | &lt;/blockquote></textarea></div></div><div class="pattern"><div class="display"><div class="feedback error">
 29 | <p>This is an error feedback message.</p>
 30 | </div></div><div class="source"><textarea rows="6" cols="30">&lt;div class=&quot;feedback error&quot;>
 31 | &lt;p>This is an error feedback message.&lt;/p>
 32 | &lt;/div></textarea></div></div><div class="pattern"><div class="display"><div class="feedback">
 33 | <p>This is a feedback message for the user.</p>
 34 | </div></div><div class="source"><textarea rows="6" cols="30">&lt;div class=&quot;feedback&quot;>
 35 | &lt;p>This is a feedback message for the user.&lt;/p>
 36 | &lt;/div></textarea></div></div><div class="pattern"><div class="display"><button>Button element</button>
 37 | 
 38 | <input type="submit" value="Submit button"></div><div class="source"><textarea rows="6" cols="30">&lt;button>Button element&lt;/button>
 39 | 
 40 | &lt;input type=&quot;submit&quot; value=&quot;Submit button&quot;></textarea></div></div><div class="pattern"><div class="display"><label><input type="checkbox"> Label text</label></div><div class="source"><textarea rows="6" cols="30">&lt;label>&lt;input type=&quot;checkbox&quot;> Label text&lt;/label></textarea></div></div><div class="pattern"><div class="display"><label>Label text</label>
 41 | <input type="email"></div><div class="source"><textarea rows="6" cols="30">&lt;label>Label text&lt;/label>
 42 | &lt;input type=&quot;email&quot;></textarea></div></div><div class="pattern"><div class="display"><label>Label text</label>
 43 | <input type="number"></div><div class="source"><textarea rows="6" cols="30">&lt;label>Label text&lt;/label>
 44 | &lt;input type=&quot;number&quot;></textarea></div></div><div class="pattern"><div class="display"><select>
 45 | <option>option text</option>
 46 | </select></div><div class="source"><textarea rows="6" cols="30">&lt;select>
 47 | &lt;option>option text&lt;/option>
 48 | &lt;/select></textarea></div></div><div class="pattern"><div class="display"><label>Label text</label>
 49 | <input type="text"></div><div class="source"><textarea rows="6" cols="30">&lt;label>Label text&lt;/label>
 50 | &lt;input type=&quot;text&quot;></textarea></div></div><div class="pattern"><div class="display"><label>Label text</label>
 51 | <textarea rows="5" cols="20"></textarea></div><div class="source"><textarea rows="6" cols="30">&lt;label>Label text&lt;/label>
 52 | &lt;textarea rows=&quot;5&quot; cols=&quot;20&quot;>&lt;/textarea></textarea></div></div><div class="pattern"><div class="display"><label>Label text</label>
 53 | <input type="url"></div><div class="source"><textarea rows="6" cols="30">&lt;label>Label text&lt;/label>
 54 | &lt;input type=&quot;url&quot;></textarea></div></div><div class="pattern"><div class="display"><h1>Level one heading</h1></div><div class="source"><textarea rows="6" cols="30">&lt;h1>Level one heading&lt;/h1></textarea></div></div><div class="pattern"><div class="display"><h2>Level two heading</h2></div><div class="source"><textarea rows="6" cols="30">&lt;h2>Level two heading&lt;/h2></textarea></div></div><div class="pattern"><div class="display"><h3>Level three heading</h3></div><div class="source"><textarea rows="6" cols="30">&lt;h3>Level three heading&lt;/h3></textarea></div></div><div class="pattern"><div class="display"><h4>Level four heading</h4></div><div class="source"><textarea rows="6" cols="30">&lt;h4>Level four heading&lt;/h4></textarea></div></div><div class="pattern"><div class="display"><h5>Level five heading</h5></div><div class="source"><textarea rows="6" cols="30">&lt;h5>Level five heading&lt;/h5></textarea></div></div><div class="pattern"><div class="display"><h6>Level six heading</h6></div><div class="source"><textarea rows="6" cols="30">&lt;h6>Level six heading&lt;/h6></textarea></div></div><div class="pattern"><div class="display"><ol>
 55 | <li>First list item</li>
 56 | <li>Second item in a list of ordered items</li>
 57 | <li>Third item in the list</li>
 58 | </ol>
 59 | </div><div class="source"><textarea rows="6" cols="30">&lt;ol>
 60 | &lt;li>First list item&lt;/li>
 61 | &lt;li>Second item in a list of ordered items&lt;/li>
 62 | &lt;li>Third item in the list&lt;/li>
 63 | &lt;/ol>
 64 | </textarea></div></div><div class="pattern"><div class="display"><ul>
 65 | <li>A list item</li>
 66 | <li>Another item in a list</li>
 67 | <li>Yet another item in this list of items</li>
 68 | </ul></div><div class="source"><textarea rows="6" cols="30">&lt;ul>
 69 | &lt;li>A list item&lt;/li>
 70 | &lt;li>Another item in a list&lt;/li>
 71 | &lt;li>Yet another item in this list of items&lt;/li>
 72 | &lt;/ul></textarea></div></div><div class="pattern"><div class="display"><ol class="pagination">
 73 | <li><a>1</a></li>
 74 | <li><a href="#">2</a></li>
 75 | <li><a href="#">3</a></li>
 76 | <li><a href="#">4</a></li>
 77 | <li><a href="#">5</a></li>
 78 | <li><a href="#">6</a></li>
 79 | <li><a href="#">7</a></li>
 80 | <li><a href="#">8</a></li>
 81 | <li><a href="#">9</a></li>
 82 | <li><a href="#">10</a></li>
 83 | </ol></div><div class="source"><textarea rows="6" cols="30">&lt;ol class=&quot;pagination&quot;>
 84 | &lt;li>&lt;a>1&lt;/a>&lt;/li>
 85 | &lt;li>&lt;a href=&quot;#&quot;>2&lt;/a>&lt;/li>
 86 | &lt;li>&lt;a href=&quot;#&quot;>3&lt;/a>&lt;/li>
 87 | &lt;li>&lt;a href=&quot;#&quot;>4&lt;/a>&lt;/li>
 88 | &lt;li>&lt;a href=&quot;#&quot;>5&lt;/a>&lt;/li>
 89 | &lt;li>&lt;a href=&quot;#&quot;>6&lt;/a>&lt;/li>
 90 | &lt;li>&lt;a href=&quot;#&quot;>7&lt;/a>&lt;/li>
 91 | &lt;li>&lt;a href=&quot;#&quot;>8&lt;/a>&lt;/li>
 92 | &lt;li>&lt;a href=&quot;#&quot;>9&lt;/a>&lt;/li>
 93 | &lt;li>&lt;a href=&quot;#&quot;>10&lt;/a>&lt;/li>
 94 | &lt;/ol></textarea></div></div><div class="pattern"><div class="display"><ol class="pagination">
 95 | <li><a href="#">1</a></li>
 96 | <li><a href="#">2</a></li>
 97 | <li><a href="#">3</a></li>
 98 | <li><a href="#">4</a></li>
 99 | <li><a href="#">5</a></li>
100 | <li><a href="#">6</a></li>
101 | <li><a href="#">7</a></li>
102 | <li><a href="#">8</a></li>
103 | <li><a href="#">9</a></li>
104 | <li><a>10</a></li>
105 | </ol></div><div class="source"><textarea rows="6" cols="30">&lt;ol class=&quot;pagination&quot;>
106 | &lt;li>&lt;a href=&quot;#&quot;>1&lt;/a>&lt;/li>
107 | &lt;li>&lt;a href=&quot;#&quot;>2&lt;/a>&lt;/li>
108 | &lt;li>&lt;a href=&quot;#&quot;>3&lt;/a>&lt;/li>
109 | &lt;li>&lt;a href=&quot;#&quot;>4&lt;/a>&lt;/li>
110 | &lt;li>&lt;a href=&quot;#&quot;>5&lt;/a>&lt;/li>
111 | &lt;li>&lt;a href=&quot;#&quot;>6&lt;/a>&lt;/li>
112 | &lt;li>&lt;a href=&quot;#&quot;>7&lt;/a>&lt;/li>
113 | &lt;li>&lt;a href=&quot;#&quot;>8&lt;/a>&lt;/li>
114 | &lt;li>&lt;a href=&quot;#&quot;>9&lt;/a>&lt;/li>
115 | &lt;li>&lt;a>10&lt;/a>&lt;/li>
116 | &lt;/ol></textarea></div></div><div class="pattern"><div class="display"><ol class="pagination">
117 | <li><a href="#">1</a></li>
118 | <li><a href="#">2</a></li>
119 | <li><a href="#">3</a></li>
120 | <li><a href="#">4</a></li>
121 | <li><a>5</a></li>
122 | <li><a href="#">6</a></li>
123 | <li><a href="#">7</a></li>
124 | <li><a href="#">8</a></li>
125 | <li><a href="#">9</a></li>
126 | <li><a href="#">10</a></li>
127 | </ol></div><div class="source"><textarea rows="6" cols="30">&lt;ol class=&quot;pagination&quot;>
128 | &lt;li>&lt;a href=&quot;#&quot;>1&lt;/a>&lt;/li>
129 | &lt;li>&lt;a href=&quot;#&quot;>2&lt;/a>&lt;/li>
130 | &lt;li>&lt;a href=&quot;#&quot;>3&lt;/a>&lt;/li>
131 | &lt;li>&lt;a href=&quot;#&quot;>4&lt;/a>&lt;/li>
132 | &lt;li>&lt;a>5&lt;/a>&lt;/li>
133 | &lt;li>&lt;a href=&quot;#&quot;>6&lt;/a>&lt;/li>
134 | &lt;li>&lt;a href=&quot;#&quot;>7&lt;/a>&lt;/li>
135 | &lt;li>&lt;a href=&quot;#&quot;>8&lt;/a>&lt;/li>
136 | &lt;li>&lt;a href=&quot;#&quot;>9&lt;/a>&lt;/li>
137 | &lt;li>&lt;a href=&quot;#&quot;>10&lt;/a>&lt;/li>
138 | &lt;/ol></textarea></div></div><div class="pattern"><div class="display"><p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> 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.</p></div><div class="source"><textarea rows="6" cols="30">&lt;p>This is a paragraph of text. Some of the text may be &lt;em>emphasised&lt;/em> and some it might even be &lt;strong>strongly emphasised&lt;/strong>. Occasionally &lt;q>quoted text&lt;/q> may be found within a paragraph &amp;hellip;and of course &lt;a href=&quot;#&quot;>a link&lt;/a> 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.&lt;/p></textarea></div></div></body></html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pattern-primer",
 3 |   "description": "Generating styled markup from a folder of markup snippets, using JavaScript on node.js",
 4 |   "version": "0.0.1",
 5 |   "author": {
 6 |     "name": "Jonathan Mahoney",
 7 |     "url": "https://github.com/codetwizzle/"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/codetwizzle/Pattern-Primer-on-Node.git"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/codetwizzle/Pattern-Primer-on-Node/issues"
15 |   },
16 |   "main": "pattern-primer",
17 |   "bin": {
18 |     "pattern-primer": "pattern-primer.js"
19 |   },
20 |   "engines": {
21 |     "node": ">= 0.10.0"
22 |   },
23 |   "keywords": [
24 |     "pattern",
25 |     "primer",
26 |     "build"
27 |   ],
28 |   "readme": "https://github.com/codetwizzle/Pattern-Primer-on-Node/blob/master/README.md",
29 |   "dependencies": {
30 |     "connect": "^2.13.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/pattern-primer.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | /*jslint nomen: true */
  4 | 'use strict';
  5 | 
  6 | var settings = {
  7 | 		webserverport : '8080',
  8 | 		wwwroot: 'public',
  9 | 		pattern_path: 'public/patterns',
 10 | 		sourcehtmlfile: 'source.html',
 11 | 		tofile_outputpath: 'docs'
 12 | 	},
 13 | 	util = require('util'),
 14 | 	connect = require('connect'),
 15 | 
 16 | 	primer = function (serverResponse, tofile, tofileCallback) {
 17 | 		tofile = tofile || false;
 18 | 
 19 | 		var fs = require('fs'),
 20 | 			patternFolder = './' + settings.pattern_path,
 21 | 			simpleEscaper = function (text) {
 22 | 				return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
 23 | 			},
 24 | 			outputPatterns = function (patterns) {
 25 | 				fs.readFile(settings.sourcehtmlfile, 'utf-8', function (err, content) {
 26 | 					if (err !== null) {
 27 | 						util.puts('There was an error when trying to read file:', 'source.html');
 28 | 						return;
 29 | 					}
 30 | 
 31 | 					var i,
 32 | 						l,
 33 | 						file;
 34 | 
 35 | 					for (i = 0, l = patterns.length; i < l; i += 1) {
 36 | 						file = patterns[i];
 37 | 						content += '<div class="pattern"><div class="display">';
 38 | 						content += file.content;
 39 | 					    content += '</div><div class="source"><textarea rows="6" cols="30">';
 40 | 					    content += simpleEscaper(file.content);
 41 | 					    content += '</textarea>';
 42 | 						if (!tofile) {
 43 | 							content += '<p><a href="patterns/' + file.filename + '">' + file.filename + '</a></p>';
 44 | 						}
 45 | 						content += '</div></div>';
 46 | 					}
 47 | 
 48 | 					content += '</body></html>';
 49 | 
 50 | 					if (tofile) {
 51 | 						tofileCallback(content);
 52 | 					} else {
 53 | 						serverResponse.end(content);
 54 | 					}
 55 | 				});
 56 | 			},
 57 | 			handleFiles = function (files) {
 58 | 				var i,
 59 | 					l,
 60 | 					file,
 61 | 					patterns = [];
 62 | 
 63 | 				// This was asyncronous, but we need the file names, which we can't get from the callback of 'readFile'
 64 | 				for (i = 0, l = files.length; i < l; i += 1) {
 65 | 					file = {
 66 | 						filename : files[i]
 67 | 					};
 68 | 
 69 | 					file.content = fs.readFileSync(patternFolder + '/' + file.filename, 'utf-8');
 70 | 					patterns.push(file);
 71 | 				}
 72 | 
 73 | 				outputPatterns(patterns);
 74 | 			},
 75 | 			beginProcess = function () {
 76 | 				fs.readdir(patternFolder, function (err, contents) {
 77 | 					if (err !== null && err.code === 'ENOENT') {
 78 | 						util.puts('Cannot find patterns folder:', patternFolder);
 79 | 						return;
 80 | 					}
 81 | 
 82 | 					var files = [],
 83 | 						i,
 84 | 						l;
 85 | 
 86 | 					for (i = 0, l = contents.length; i < l; i += 1) {
 87 | 						if (contents[i].substr(-5) === '.html') {
 88 | 							files.push(contents[i]);
 89 | 						}
 90 | 					}
 91 | 
 92 | 					handleFiles(files);
 93 | 				});
 94 | 			};
 95 | 
 96 | 		beginProcess();
 97 | 	},
 98 | 	server = connect.createServer(
 99 | 		connect.static(__dirname + '/' + settings.wwwroot),
100 | 		function (req, resp) {
101 | 			if (req.url !== '/') {
102 | 				resp.writeHead(404, {
103 | 					'Content-Length': 0,
104 | 					'Content-Type': 'text/plain'
105 | 				});
106 | 				resp.end();
107 | 				return;
108 | 			}
109 | 
110 | 			primer(resp);
111 | 		}
112 | 	);
113 | 
114 | if (process.argv[2] === '--tofile') {
115 | 
116 | 	primer(null, true, function (content) {
117 | 		var fs = require('fs');
118 | 		fs.writeFile('./' + settings.tofile_outputpath + '/index.html', content, 'utf-8', function (err) {
119 | 			if (err !== null && err.code === 'ENOENT') {
120 | 				util.puts('Cannot find patterns folder:', settings.tofile_outputpath);
121 | 				return;
122 | 			}
123 | 			fs.createReadStream('./' + settings.wwwroot + '/global.css').pipe(fs.createWriteStream('./' + settings.tofile_outputpath + '/global.css'));
124 | 			util.puts('Stand-alone output can now be found in "' + settings.tofile_outputpath + '/"');
125 | 		});
126 | 	});
127 | 
128 | } else {
129 | 
130 | 	server.listen(settings.webserverport);
131 | 	util.puts('You can now visit http://localhost:' + settings.webserverport + '/ to see your patterns.');
132 | 	util.puts('To kill this server, just press Ctrl + C');
133 | 
134 | }


--------------------------------------------------------------------------------
/public/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 */


--------------------------------------------------------------------------------
/public/patterns/blockquote.html:
--------------------------------------------------------------------------------
1 | <blockquote>
2 | <p>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.</p>
3 | </blockquote>


--------------------------------------------------------------------------------
/public/patterns/feedback-error.html:
--------------------------------------------------------------------------------
1 | <div class="feedback error">
2 | <p>This is an error feedback message.</p>
3 | </div>


--------------------------------------------------------------------------------
/public/patterns/feedback.html:
--------------------------------------------------------------------------------
1 | <div class="feedback">
2 | <p>This is a feedback message for the user.</p>
3 | </div>


--------------------------------------------------------------------------------
/public/patterns/form-buttons.html:
--------------------------------------------------------------------------------
1 | <button>Button element</button>
2 | 
3 | <input type="submit" value="Submit button">


--------------------------------------------------------------------------------
/public/patterns/form-checkbox.html:
--------------------------------------------------------------------------------
1 | <label><input type="checkbox"> Label text</label>


--------------------------------------------------------------------------------
/public/patterns/form-email.html:
--------------------------------------------------------------------------------
1 | <label>Label text</label>
2 | <input type="email">


--------------------------------------------------------------------------------
/public/patterns/form-number.html:
--------------------------------------------------------------------------------
1 | <label>Label text</label>
2 | <input type="number">


--------------------------------------------------------------------------------
/public/patterns/form-select.html:
--------------------------------------------------------------------------------
1 | <select>
2 | <option>option text</option>
3 | </select>


--------------------------------------------------------------------------------
/public/patterns/form-text.html:
--------------------------------------------------------------------------------
1 | <label>Label text</label>
2 | <input type="text">


--------------------------------------------------------------------------------
/public/patterns/form-textarea.html:
--------------------------------------------------------------------------------
1 | <label>Label text</label>
2 | <textarea rows="5" cols="20"></textarea>


--------------------------------------------------------------------------------
/public/patterns/form-url.html:
--------------------------------------------------------------------------------
1 | <label>Label text</label>
2 | <input type="url">


--------------------------------------------------------------------------------
/public/patterns/heading-1.html:
--------------------------------------------------------------------------------
1 | <h1>Level one heading</h1>


--------------------------------------------------------------------------------
/public/patterns/heading-2.html:
--------------------------------------------------------------------------------
1 | <h2>Level two heading</h2>


--------------------------------------------------------------------------------
/public/patterns/heading-3.html:
--------------------------------------------------------------------------------
1 | <h3>Level three heading</h3>


--------------------------------------------------------------------------------
/public/patterns/heading-4.html:
--------------------------------------------------------------------------------
1 | <h4>Level four heading</h4>


--------------------------------------------------------------------------------
/public/patterns/heading-5.html:
--------------------------------------------------------------------------------
1 | <h5>Level five heading</h5>


--------------------------------------------------------------------------------
/public/patterns/heading-6.html:
--------------------------------------------------------------------------------
1 | <h6>Level six heading</h6>


--------------------------------------------------------------------------------
/public/patterns/list-ordered.html:
--------------------------------------------------------------------------------
1 | <ol>
2 | <li>First list item</li>
3 | <li>Second item in a list of ordered items</li>
4 | <li>Third item in the list</li>
5 | </ol>
6 | 


--------------------------------------------------------------------------------
/public/patterns/list-unordered.html:
--------------------------------------------------------------------------------
1 | <ul>
2 | <li>A list item</li>
3 | <li>Another item in a list</li>
4 | <li>Yet another item in this list of items</li>
5 | </ul>


--------------------------------------------------------------------------------
/public/patterns/pagination-first.html:
--------------------------------------------------------------------------------
 1 | <ol class="pagination">
 2 | <li><a>1</a></li>
 3 | <li><a href="#">2</a></li>
 4 | <li><a href="#">3</a></li>
 5 | <li><a href="#">4</a></li>
 6 | <li><a href="#">5</a></li>
 7 | <li><a href="#">6</a></li>
 8 | <li><a href="#">7</a></li>
 9 | <li><a href="#">8</a></li>
10 | <li><a href="#">9</a></li>
11 | <li><a href="#">10</a></li>
12 | </ol>


--------------------------------------------------------------------------------
/public/patterns/pagination-last.html:
--------------------------------------------------------------------------------
 1 | <ol class="pagination">
 2 | <li><a href="#">1</a></li>
 3 | <li><a href="#">2</a></li>
 4 | <li><a href="#">3</a></li>
 5 | <li><a href="#">4</a></li>
 6 | <li><a href="#">5</a></li>
 7 | <li><a href="#">6</a></li>
 8 | <li><a href="#">7</a></li>
 9 | <li><a href="#">8</a></li>
10 | <li><a href="#">9</a></li>
11 | <li><a>10</a></li>
12 | </ol>


--------------------------------------------------------------------------------
/public/patterns/pagination.html:
--------------------------------------------------------------------------------
 1 | <ol class="pagination">
 2 | <li><a href="#">1</a></li>
 3 | <li><a href="#">2</a></li>
 4 | <li><a href="#">3</a></li>
 5 | <li><a href="#">4</a></li>
 6 | <li><a>5</a></li>
 7 | <li><a href="#">6</a></li>
 8 | <li><a href="#">7</a></li>
 9 | <li><a href="#">8</a></li>
10 | <li><a href="#">9</a></li>
11 | <li><a href="#">10</a></li>
12 | </ol>


--------------------------------------------------------------------------------
/public/patterns/text.html:
--------------------------------------------------------------------------------
1 | <p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> 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.</p>


--------------------------------------------------------------------------------
/source.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Pattern Primer</title>
 5 | <link rel="stylesheet" href="global.css">
 6 | <style>
 7 | .pattern {
 8 |     clear: both;
 9 |     overflow: hidden;
10 | }
11 | .pattern .display {
12 |     width: 65%;
13 |     float: left;
14 | }
15 | .pattern .source {
16 |     width: 30%;
17 |     float: right;
18 | }
19 | .pattern .source textarea {
20 |     width: 90%;
21 | }
22 | </style>
23 | </head>
24 | <body>


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