-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
714 lines (714 loc) · 123 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
105
106
107
108
109
110
111
112
113
114
115
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Style Guider Demo</title>
<meta name="description" content="Demo site for generator-style-guider"/>
<link rel="canonical" href="https://style-guider-demo.github.io/"/>
<meta property="og:url" content="https://style-guider-demo.github.io/"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Style Guider Demo"/>
<meta property="og:description" content="Demo site for generator-style-guider"/>
<meta property="og:site_name" content="Style Guider"/>
<meta property="og:locale" content="en_GB"/>
<meta property="twitter:url" content="https://style-guider-demo.github.io/"/>
<meta property="twitter:site" content="@ianegner"/>
<meta property="twitter:card" content="summary"/>
<meta property="twitter:title" content="Style Guider Demo"/>
<meta property="twitter:description" content="Demo site for generator-style-guider"/>
<meta itemprop="name" content="Style Guider Demo"/>
<meta itemprop="description" content="Demo site for generator-style-guider"/>
<link rel="stylesheet" href="docs/css/docs.css">
<script>var components = {"accessibility":{"name":"accessibility","title":"Accessibility","docs":["<blockquote>Accessibility is the degree to which anyone can access and use a website using any web browsing technology. <cite>Royal National Institute of Blind People</cite></blockquote>","Our public-facing applications must be built to work on all devices, browsers and with assistive technologies. A lot of effort has been made to ensure that the components in this framework are accessible. Such as:"],"demo":"<ul><li>Text and backgrounds have sufficient contrast ratios so text is legible.</li><li>Clickable elements are clear and uniform, so users know what they can click.</li><li>ARIA landmark roles and html5 elements help browsers define types of content.</li><li>Focus states on all elements so that interactions can be operated with a keyboard or screen reader.</li><li>Javascript features have a fallback for when javascript is not enabled.</li></ul><p><a href=\"http://a11yproject.com/checklist.html\" target=\"_blank\">This checklist from the A11Y Project</a> is a good guide to all the core web accessibility principles.</p>","demoCall":"ul\n li Text and backgrounds have sufficient contrast ratios so text is legible.\n li Clickable elements are clear and uniform, so users know what they can click.\n li ARIA landmark roles and html5 elements help browsers define types of content.\n li Focus states on all elements so that interactions can be operated with a keyboard or screen reader.\n li Javascript features have a fallback for when javascript is not enabled.\n\np #[a(href='http://a11yproject.com/checklist.html', target='_blank') This checklist from the A11Y Project] is a good guide to all the core web accessibility principles."},"colour":{"name":"colour","title":"Colours","docs":["There are a variety of colours to choose from for digital interfaces.","There are not pre-defined CSS classes for each colour, but they are available as SASS variables to use in your own extended styles."],"demo":"<h3>Primary Colours</h3><div class=\"swatches big\"><span class=\"red\">Red</span><span class=\"blue\">Blue</span></div><h3>Secondary Colours</h3><div class=\"swatches small\"><span class=\"claret\">Claret</span><span class=\"flame\">Flame</span><span class=\"carrot\">Carrot</span><span class=\"buttercup\">Buttercup</span><span class=\"sunglow\">Sunglow</span><span class=\"malibu\">Malibu</span><span class=\"bermuda\">Bermuda</span><span class=\"java\">Java</span><span class=\"verdun\">Verdun</span><span class=\"grey\">Grey</span></div>","demoCall":"h3 Primary Colours\n\n.swatches.big\n span.red Red\n span.blue Blue\n\nh3 Secondary Colours\n\n.swatches.small\n span.claret Claret\n span.flame Flame\n span.carrot Carrot\n span.buttercup Buttercup\n span.sunglow Sunglow\n span.malibu Malibu\n span.bermuda Bermuda\n span.java Java\n span.verdun Verdun\n span.grey Grey"},"typography":{"name":"typography","title":"Typography","docs":["All text uses Helvetica Neue with a fallback to Helvetica or Arial. Body text is legible with generous line-spacing and the font-size adapts to the screen size to ensure readability. Paragraphs have a bottom margin to match a vertical rhythm.","Paragraphs also have a maximum width of about 700px, so that long lines don't become too difficult to read."]},"header":{"name":"header","title":"Headers","docs":["Headers use a lighter font-weight. They should be used in cascading order to denote the importance of a section's contents."],"demo":"<h1>h1. This is a very large header</h1><h2>h2. This is a large header</h2><h3>h3. This is a medium header</h3><h4>h4. This is a moderate header</h4><h5>h5. This is a small header</h5><h6>h6. This is a tiny header</h6>","demoCall":"h1 h1. This is a very large header\nh2 h2. This is a large header\nh3 h3. This is a medium header\nh4 h4. This is a moderate header\nh5 h5. This is a small header\nh6 h6. This is a tiny header"},"bold-header":{"name":"bold-header","title":"Bold Headers","docs":["Sometimes a bolder header might be required for more emphasis. This can be done by adding the <code>.heavy</code> class. If this option is used it should be done consistently throughout the application or website.","By inserting a <code>small</code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text."],"demo":"<h1 class=\"heavy\">h1. This is a very large header</h1><h2 class=\"heavy\">h2. This is a large header</h2><h3 class=\"heavy\">h3. This is a medium heade</h3><h4 class=\"heavy\">h4. This is a moderate header</h4><h5 class=\"heavy\">h5. This is a small header</h5><h6 class=\"heavy\">h6. This is a tiny header</h6>","demoCall":"h1.heavy h1. This is a very large header\nh2.heavy h2. This is a large header\nh3.heavy h3. This is a medium heade\nh4.heavy h4. This is a moderate header\nh5.heavy h5. This is a small header\nh6.heavy h6. This is a tiny header"},"sub-header":{"name":"sub-header","title":"Sub Headers","docs":["By inserting a <code>small</code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text."],"demo":"<h4>This is a medium header <small>with a subheader</small></h4>","demoCall":"h4 This is a medium header #[small with a subheader]"},"link":{"name":"link","title":"Links","docs":["Text links should be intuitive, so that users know they can click or tap on them. Inline links are <a href=\"#\">displayed in red</a> with an underline on hover"]},"list":{"name":"list","title":"Lists","docs":["Lists are useful for a collection of text items and can be numbered or nested too."],"demo":"<p>This is what an un-ordered list looks like:</p><ul><li>A list item</li><li>Another list item</li><li>Another one</li><li>Ok, last one</li></ul><p>A list following a paragraph has reduced spacing, so that a paragraph can give context to a list:</p><ol><li>A list item</li><li>Another list item</li><li>Another one</li><li>Ok, last one</li></ol>","demoCall":"p This is what an un-ordered list looks like:\n\nul\n li A list item\n li Another list item\n li Another one\n li Ok, last one\n\np A list following a paragraph has reduced spacing, so that a paragraph can give context to a list:\n\nol\n li A list item\n li Another list item\n li Another one\n li Ok, last one"},"definition-list":{"name":"definition-list","title":"Definition Lists","docs":["A definition list <code><dl></code> is used to display name-value pairs, like FAQs. Each term <code><dt></code> is paired with one or more definitions <code><dd></code>."],"demo":"<dl><dt>A Definition Term</dt><dd>The definition, styled just like a paragraph, but with clever spacing between definitions.</dd><dt>Why should I use this style guide?</dt><dd>Because it looks good</dd></dl>","demoCall":"dl\n dt A Definition Term\n dd The definition, styled just like a paragraph, but with clever spacing between definitions.\n\n dt Why should I use this style guide?\n dd Because it looks good"},"blockquote":{"name":"blockquote","title":"Blockquote","docs":["Sometimes other people say nice things, and we may want to mention those things with a quote that clearly shows who said it. Use a <code><cite></code> tag for the byline."],"demo":"<blockquote>I had a really good experience using this product.<cite>A. Customer</cite></blockquote>","demoCall":"blockquote I had a really good experience using this product.\n cite A. Customer"},"divider":{"name":"divider","title":"Dividers","docs":["Use <code><hr></code> dividers to define thematic breaks between paragraphs or other page elements"]},"form":{"name":"form","title":"Forms","docs":["Forms are key in interacting with users and gleaning information from them. Forms must be intuitive and accessible to stop users getting frustrated and leaving before finishing."],"mixinPath":null,"scssPath":null,"jsPath":null},"input":{"name":"input","title":"Text Inputs","docs":["These input types create a single line text field: <code>text</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>","Using specific input types for different data formats can help improve usability. For example, using a <code>tel</code> input will open a numpad keyboard on mobile devices, making it easier for the user to input a phone number.","All form inputs should have a clear label, that describes what you want the user to enter. Clicking a label should focus on the form field. This is achieved by linking label elements to input elements with a <code>for</code> attribute.","Although popular in modern websites, inline placeholders should not be used because they disappear as soon as a user starts typing, and the user may think there is already text input. Instead an example or hint should be placed beneath the input."],"breakout":false,"inline":true,"block":true,"attributes":true,"demo":"<div><label for=\"example-text\">An example text field</label><input type=\"text\" id=\"example-text\" name=\"example-text\"/><span>A helper or example for this field</span></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"type":{"enum":["text","date","datetime","datetime-local","email","month","number","password","search","tel","time","url"," week"],"default":"text","description":"The input type attribute"},"name":{"type":"string","default":"my-input","description":"The name attribute of the input"},"value":{"type":"string","default":null,"description":"The default value of the field"},"id":{"type":"string","default":"my-input","description":"The id of the input"},"label":{"type":"string","default":"My Input","description":"The label text"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the field"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the field"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin input(type, name, value, id, label, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n input(type=type, id=id, name=name, value=value)&attributes(attributes)\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+input('text', 'example-text', null, 'example-text', 'An example text field', 'A helper or example for this field', false)"},"textarea":{"name":"textarea","title":"Text Area","docs":["Text areas are used for multi-line text input, for example on a comments form. A text area can also be given a helper label. The text area should be given an appropriate amount of rows (with the <code>rows</code> attribute) for the text that is expected to be entered."],"breakout":false,"inline":true,"block":"Default Value","attributes":true,"demo":"<div><label for=\"example-textarea\">Example Text Area</label><span>Some helper text</span><textarea id=\"example-textarea\" name=\"example-textarea\" rows=\"3\"></textarea></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"name":{"type":"string","default":"my-input","description":"The name attribute of the text area"},"id":{"type":"string","default":"my-input","description":"The id of the text area"},"label":{"type":"string","default":"My Input","description":"The label text"},"rows":{"type":"number","default":4,"description":"The number of rows"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the text area"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the text area"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin textarea(name, id, label, rows, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n textarea(id=id, name=name, rows=rows)&attributes(attributes)\n block\n if helperBelow\n span= helperBelow\n if error\n span.error-message= error\n\n","demoCall":"+textarea('example-textarea', 'example-textarea', 'Example Text Area', 3, null, 'Some helper text')"},"select":{"name":"select","title":"Select Menu","docs":["Use select menus to combine many choices into one dropdown menu. This is useful for saving space, small screen devices have native UI patterns for dealing with these"],"breakout":false,"inline":true,"block":true,"attributes":true,"demo":"<div><label for=\"my-input\">My Input</label><span>More helpful advice for this field</span><select id=\"my-input\" name=\"my-input\"><option value=\"1\">An Option</option><option value=\"2\" selected=\"selected\">Another Option</option><option value=\"3\">A Third Option</option></select><span>Some helpful advice for this field</span></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"name":{"type":"string","default":"my-select","description":"The name attribute of the input"},"selectedValue":{"type":"string","default":null,"description":"The default value of the field"},"id":{"type":"string","default":"my-select","description":"The id of the input"},"label":{"type":"string","default":"My Select","description":"The label text"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the field"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the field"},"options":{"type":"array","default":[{"label":"An Option","value":"1"},{"label":"Another Option","value":"2"},{"label":"A Third Option","value":"3"}],"description":"Array of objects with label/value pairs"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin select(name, selectedValue, id, label, helperBelow, helperAbove, options, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n select(id=id, name=name)&attributes(attributes)\n each option in options\n //- Change to selectedValue, we don't want confusing matching variables\n if option.children && option.children.length\n optgroup(label=option.label)\n each child in option.children\n - var isSelected = ('' + child['value']) === ('' + selectedValue) ? true : false\n option(value=child.value, selected=isSelected)= child.label\n else\n - var isSelected = ('' + option['value']) === ('' + selectedValue) ? true : false\n option(value=option.value, selected=isSelected)= option.label\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+select('my-input',2,'my-input','My Input','Some helpful advice for this field','More helpful advice for this field',[{\"label\":\"An Option\",\"value\":\"1\"},{\"label\":\"Another Option\",\"value\":\"2\"},{\"label\":\"A Third Option\",\"value\":\"3\"}])"},"checkbox":{"name":"checkbox","title":"Checkboxes","docs":["Use groups of checkboxes when the user may select multiple choices from a list"],"breakout":false,"inline":true,"block":false,"attributes":true,"demo":"<div><legend for=\"example-checkbox\">Example Checkbox Group</legend><span>Some helper text</span><fieldset><div><input type=\"checkbox\" id=\"example-checkbox-1\" value=\"1\" name=\"example-checkbox\"/><label for=\"example-checkbox-1\">An Option</label></div><div><input type=\"checkbox\" id=\"example-checkbox-2\" value=\"2\" name=\"example-checkbox\" checked=\"checked\"/><label for=\"example-checkbox-2\">Another Option</label></div><div><input type=\"checkbox\" id=\"example-checkbox-3\" value=\"3\" name=\"example-checkbox\"/><label for=\"example-checkbox-3\">A Third Option</label></div></fieldset></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"name":{"type":"string","default":"my-checkboxes","description":"The name attribute of the checkbox group"},"id":{"type":"string","default":"my-checkboxes","description":"The id of the checkbox-group"},"legend":{"type":"string","default":"My Checkbox Options","description":"The legend text"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the field"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the field"},"options":{"type":"array","default":[{"label":"An Option","value":"1"},{"label":"Another Option","value":"2","checked":true},{"label":"A Third Option","value":"3","checked":true}],"description":"Array of objects with label/value/checked key/values"},"stack":{"type":"boolean","default":false,"description":"Display options in vertical stack?"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin checkbox(name, id, legend, helperBelow, helperAbove, options, stack, error)\n div(class=error ? 'has-error' : '')&attributes(attributes)\n legend(for=id)= legend\n if helperAbove\n span= helperAbove\n fieldset(class=stack ? 'stack-list' : null)\n each option in options\n div\n input(type='checkbox', id=id + '-' + option.value, value=option.value, name=name, checked=option.checked)\n label(for=id + '-' + option.value)= option.label\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+checkbox('example-checkbox', 'example-checkbox', 'Example Checkbox Group', null, 'Some helper text', [{\"label\":\"An Option\",\"value\":\"1\"},{\"label\":\"Another Option\",\"value\":\"2\", \"checked\":true},{\"label\":\"A Third Option\",\"value\":\"3\"}])"},"radio":{"name":"radio","title":"Radio Buttons","docs":["Use radio buttons when the user must select just one choice"],"breakout":false,"inline":true,"block":false,"attributes":true,"demo":"<div role=\"radiogroup\"><legend for=\"my-radios\">My Radio options</legend><span>More helpful advice for this field</span><fieldset><div><input type=\"radio\" id=\"my-radios-1\" value=\"1\" name=\"my-radios\"/><label for=\"my-radios-1\">An Option</label></div><div><input type=\"radio\" id=\"my-radios-2\" value=\"2\" name=\"my-radios\"/><label for=\"my-radios-2\">Another Option</label></div><div><input type=\"radio\" id=\"my-radios-3\" value=\"3\" name=\"my-radios\"/><label for=\"my-radios-3\">A Third Option</label></div></fieldset><span>Some helpful advice for this field</span></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"name":{"type":"string","default":"my-radios","description":"The name attribute of the radio group"},"selectedValue":{"type":"string","default":null,"description":"The selected value"},"id":{"type":"string","default":"my-radios","description":"The id of the radio-group"},"legend":{"type":"string","default":"My Radio options","description":"The legend text"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the field"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the field"},"options":{"type":"array","default":[{"label":"An Option","value":"1"},{"label":"Another Option","value":"2"},{"label":"A Third Option","value":"3"}],"description":"Array of objects with label/value pairs"},"stack":{"type":"boolean","default":false,"description":"Display options in vertical stack?"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin radio(name, selectedValue, id, legend, helperBelow, helperAbove, options, stack, error)\n div(class=error ? 'has-error' : '', role='radiogroup')&attributes(attributes)\n legend(for=id)= legend\n if helperAbove\n span= helperAbove\n fieldset(class=stack ? 'stack-list' : null)\n each option in options\n - var isChecked = ('' + option.value) === ('' + selectedValue) ? true : false\n div\n input(type='radio', id=id + '-' + option.value, value=option.value, name=name, checked=isChecked)\n label(for=id + '-' + option.value)= option.label\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+radio(\"my-radios\", null, \"my-radios\", \"My Radio options\", \"Some helpful advice for this field\", \"More helpful advice for this field\", [{\"label\":\"An Option\",\"value\":\"1\"},{\"label\":\"Another Option\",\"value\":\"2\"},{\"label\":\"A Third Option\",\"value\":\"3\"}], false, null)"},"upload":{"name":"upload","title":"File Upload","docs":["File upload inputs are inconsistent across all browsers, so we use a label mask to display it like a button. When clicked it opens up the user's file browser"],"breakout":false,"inline":true,"block":true,"attributes":true,"demo":"<div><label for=\"example-file-upload\">Upload your file</label><input type=\"file\" id=\"example-file-upload\" name=\"example-file-upload\" tabindex=\"-1\"/><label for=\"example-file-upload\" tabindex=\"0\">Upload</label></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"name":{"type":"string","default":"my-upload","description":"The name attribute of the input"},"id":{"type":"string","default":"my-upload","description":"The id of the input"},"label":{"type":"string","default":"My Upload","description":"The label text"},"buttonText":{"type":"string","default":"An Upload Button","description":"The text on the upload button"},"helperBelow":{"type":"string","default":"Some helpful advice for this field","description":"Helper that appears below the field"},"helperAbove":{"type":"string","default":"More helpful advice for this field","description":"Helper the appears above the field"},"error":{"type":"string","default":null,"description":"Error message string, marks whole field as errorneous"}},"mixin":"mixin upload(name, id, label, buttonText, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n if label\n label(for=id)= label\n if helperAbove\n span= buttonText\n input(type='file', id=id, name=name, tabindex=-1)&attributes(attributes)\n label(for=id, tabindex=0)= buttonText\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+upload('example-file-upload', 'example-file-upload', 'Upload your file', 'Upload')"},"datepicker":{"name":"datepicker","title":"Date Picker","docs":["Inputs with an attribute of <code>data-datepicker</code> can be made more user friendly with the jQuery-ui datepicker widget. The datepicker input element is one case where a placeholder is useful, to indicate that the input must be clicked to open the calendar."],"breakout":false,"inline":true,"block":true,"attributes":true,"demo":"<div><label for=\"Example Date Picker\"></label><input type=\"date\" id=\"Example Date Picker\" name=\"example-date-picker\" data-datepicker=\"data-datepicker\" placeholder=\"Pick Date\"/></div>","mixinPath":"./pug/components/_input.pug","scssPath":null,"jsPath":null,"mixin":"mixin input(type, name, value, id, label, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n input(type=type, id=id, name=name, value=value)&attributes(attributes)\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+input('date', 'example-date-picker', null, 'Example Date Picker')(data-datepicker, placeholder='Pick Date')"},"errors":{"name":"errors","title":"Form Errors","docs":["User input needs to be validated to check for erroneous or malicious data. To improve usability, human-friendly error messages should be shown on invalid fields.","In-line validation (inline feedback as the user is filling out the form) is much more effective than post-submission feedback.","Error messages can be added to the DOM by javascript or into the source html server-side. A wrapper with class <code>.has-error</code> around an input and label denotes an error. A span with class <code>.error-message</code> should show the specific error."],"breakout":false,"inline":true,"block":true,"attributes":true,"demo":"<div class=\"has-error\"><label for=\"example-text-error\">Text field with an error</label><input type=\"text\" id=\"example-text-error\" name=\"example-text-error\" value=\"Some erroneous text\"/><span>Helper text</span><span class=\"error-message\">This field is too long</span></div>","mixinPath":"./pug/components/_input.pug","scssPath":null,"jsPath":null,"mixin":"mixin input(type, name, value, id, label, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n input(type=type, id=id, name=name, value=value)&attributes(attributes)\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+input('text', 'example-text-error', 'Some erroneous text', 'example-text-error', 'Text field with an error', 'Helper text', null, 'This field is too long')"},"callout":{"name":"callout","title":"Error Callout","docs":["A callout should be included at the top of the form to indicate that there are errors after form submission. It should indicate which fields have errors to help the user amend them"],"breakout":false,"inline":false,"block":true,"attributes":false,"demo":"<div class=\"callout\"><h5>There were some problems with your form</h5><p><a href=\"#example-text-error\">Example Field</a> - Must be less than 30 characters</p><p><a href=\"#example-text-error\">Another Field</a> - Must be a specific type of data</p></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"type":{"enum":["default","alert","warning"],"default":null,"description":"Type of callout, defines colour scheme"},"header":{"type":"string","default":"There were some problems with your form","description":"The header of the callout"},"errors":{"type":"array","default":[{"label":"Example Field","id":"example-text-error","message":"Must be less than 30 characters"},{"label":"Another Field","id":"example-text-error","message":"Must be a specific type of data"}],"description":"Array of objects with label/id/message pairs"}},"mixin":"mixin callout(type, header, errors)\n .callout(class=type)&attributes(attributes)\n if header\n h5= header\n block\n if errors\n each error in errors\n p #[a(href='#' + error.id)= error.label] - #{error.message}\n\n","demoCall":"+callout(null, \"There were some problems with your form\", [{\"label\":\"Example Field\",\"id\":\"example-text-error\",\"message\":\"Must be less than 30 characters\"},{\"label\":\"Another Field\",\"id\":\"example-text-error\",\"message\":\"Must be a specific type of data\"}])"},"required":{"name":"required","title":"Required Fields","docs":["In some applications different input fields will be required or optional. For best usability, optional fields should be marked as optional (in the helper text), and required fields should be the default."],"mixinPath":null,"scssPath":null,"jsPath":null},"disabled":{"name":"disabled","title":"Disabled Fields","docs":["Some applications will need to show a field but not accept user input, or disable the submit button until all required fields are completed. The <code>disabled</code> attribute stops input and styles it to makes it clear that inputs can not be modified by the user."],"demo":"<div><label for=\"example-text-disabled\">An example disabled text field</label><input type=\"text\" id=\"example-text-disabled\" name=\"example-text-disabled\" value=\"User cannot edit this text\" disabled=\"disabled\"/><span>You cannot edit this field</span></div>","mixinPath":"./pug/components/_input.pug","scssPath":null,"jsPath":null,"mixin":"mixin input(type, name, value, id, label, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n input(type=type, id=id, name=name, value=value)&attributes(attributes)\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":"+input('text', 'example-text-disabled', 'User cannot edit this text', 'example-text-disabled', 'An example disabled text field', 'You cannot edit this field')(disabled)"},"button":{"name":"button","title":"Buttons","docs":["Buttons are for users to trigger an actions, the text on the button should make it clear what the action will do. The colour of the button can also denote whether an action is constructive, destructive etc.","Buttons in a row are spaced apart so that a user won't press the wrong one by mistake.","Links or submit inputs can be styled as buttons with the <code>.button</code> class.","<h4>Create new order?</h4>","<a class=\"button small secondary\" href=\"#\">Cancel</a> <a class=\"button\" href=\"#\">Create order</a>","Button labels should be clear so that the user knows what action will happen when they click it. Constructive actions (Yes, Confirm, Save etc) should go on the right and be blue. Destructive actions (Delete etc) should be red. Back-tracking actions (Cancel, Undo, No) should be grey and on the left, and could be smaller.","Colour of buttons can be modified by adding a <code>.alert</code> or <code>.secondary</code> class. The size of buttons can be modified with <code>.small</code>, <code>.tiny</code>, <code>.large</code> and <code>.expanded</code> classes."],"demo":"<div><a class=\"button\" href=\"#\">Basic Button</a><a class=\"alert button\" href=\"#\">Alert Btn</a><a class=\"secondary button\" href=\"#\">Secondary Btn</a></div><div><a class=\"secondary small button\" href=\"#\">A Small Btn</a><a class=\"tiny button alert\" href=\"#\">An even smaller button</a><a class=\"large button\" href=\"#\">A large button</a></div><div><a class=\"small expanded button\" href=\"#\">An expanded button</a></div>","mixinPath":null,"scssPath":null,"jsPath":null,"demoCall":"div\n a.button(href='#') Basic Button\n a.alert.button(href='#') Alert Btn\n a.secondary.button(href='#') Secondary Btn\ndiv\n a.secondary.small.button(href='#') A Small Btn\n a.tiny.button.alert(href='#') An even smaller button\n a.large.button(href='#') A large button\ndiv\n a.small.expanded.button(href='#') An expanded button"},"submit":{"name":"submit","title":"Submit Button","docs":["A mixin for inputs with a type of <code>hidden</code> has been included"],"breakout":false,"inline":true,"block":false,"attributes":true,"mixinPath":null,"scssPath":null,"jsPath":null,"demo":"<input class=\"button\" type=\"submit\" value=\"Submit\"/><br/>","params":{"value":{"type":"string","default":"Submit","description":"The label on the submit button"}},"mixin":"//- Shortcode for <input type=\"submit\" value=\"$value\" />\nmixin submit(value)\n input.button(type='submit', value=value)&attributes(attributes)\n\n","demoCall":"+submit('Submit')\nbr"},"hidden":{"name":"hidden","title":"Hidden Inputs","docs":["A mixin for inputs with a type of <code>hidden</code> has been included"],"breakout":false,"inline":true,"block":false,"attributes":true,"mixinPath":null,"scssPath":null,"jsPath":null,"demo":"<!-- No demo-->","params":{"name":{"type":"string","default":"my-input","description":"The name attribute of the input"},"value":{"type":"string","default":null,"description":"The default value of the field"}},"mixin":"//- Shortcode for <input type=\"hidden\" name=\"$name\" value=\"$value\" />\nmixin hidden(name, value)\n input(type='hidden', name=name, value=value)&attributes(attributes)\n\n","demoCall":"// No demo"},"ui-elements":{"name":"ui-elements","title":"Custom UI Elements"},"layout":{"name":"layout","title":"Layout","demo":"<div class=\"content\"><p>There are 3 main layout components: Full-width, two-thirds and one-third. This <code>.content</code> column is two-thirds.</p><p>A <code>.full</code> element stretches across the width of the screen.</p><p>On small screens all three if of these components are full-width and stack on top of each other</p><h4>Helper layout classes</h4><p><code>.half</code>, <code>.third</code>, <code>.quarter</code> and <code>.sixth</code> are available for quick column width setting.</p><h4>Custom column layouts</h4><p>Columns should be implemented using Foundation's sass mixins - <a href=\"http://foundation.zurb.com/sites/docs/grid.html#building-semantically\" target=\"_blank\">see more details here</a>. There is also a useful grid-columns mixin in `scss/_mixins.scss`, see the documentation on that for more info</p></div><div class=\"sidebar\"><h3>Sidebar</h3><p>This <code>.sidebar</code> element is one third width.</p></div>","demoCall":".content\n\n p There are 3 main layout components: Full-width, two-thirds and one-third. This #[code .content] column is two-thirds.\n\n p A #[code .full] element stretches across the width of the screen.\n\n p On small screens all three if of these components are full-width and stack on top of each other\n\n h4 Helper layout classes\n\n p #[code .half], #[code .third], #[code .quarter] and #[code .sixth] are available for quick column width setting.\n\n h4 Custom column layouts\n\n p Columns should be implemented using Foundation's sass mixins - #[a(href='http://foundation.zurb.com/sites/docs/grid.html#building-semantically', target='_blank') see more details here]. There is also a useful grid-columns mixin in `scss/_mixins.scss`, see the documentation on that for more info\n\n.sidebar\n h3 Sidebar\n\n p This #[code .sidebar] element is one third width."},"table":{"name":"table","title":"Tables","docs":["Tables are used for showing tabular data. A few simple style tweaks make tables much easier to read. Adding a class of <code>.hover</code> makes rows highlight on hover.","Adding a class of <code>.stack</code> to a table makes it stack up on small screens for a cleaner layout."],"demo":"<table class=\"stack hover\"><thead><tr><th width=\"200\">Table Header</th><th>Another Table Header</th><th>Table Header</th><th>Table Header</th></tr></thead><tbody><tr><td>Content Goes Here</td><td>This is longer content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td><a class=\"button small\" href=\"\">A Button</a></td></tr><tr><td>Content Goes Here</td><td>This is longer Content Donec id elit non mi porta gravida at eget metus.</td><td></td><td>Content Goes Here</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td>Content Goes Here</td></tr></tbody></table>","demoCall":"table.stack.hover\n thead\n tr\n th(width='200') Table Header\n th Another Table Header\n th Table Header\n th Table Header\n tbody\n tr\n td Content Goes Here\n td This is longer content Donec id elit non mi porta gravida at eget metus.\n td Content Goes Here\n td\n a.button.small(href='') A Button\n tr\n td Content Goes Here\n td\n | This is longer Content Donec id elit non mi porta gravida at eget metus.\n td\n td Content Goes Here\n tr\n td Content Goes Here\n td\n | This is longer Content Donec id elit non mi porta gravida at eget metus.\n td Content Goes Here\n td Content Goes Here"},"top-menu":{"name":"top-menu","title":"Main Menu","docs":["On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation."],"breakout":true,"inline":false,"block":false,"attributes":true,"demo":"<menu role=\"banner\"><div class=\"wrap\"><a class=\"logo-link\" href=\"#\" title=\"Home\" tabindex=\"-1\">Home</a><a class=\"menu-link\" href=\"#\">Menu<span class=\"menu-icon\"></span></a><ul role=\"navigation\"><li><a href=\"#\" tabindex=\"0\">Home</a></li><li class=\"has-dropdown\"><a href=\"#\" tabindex=\"0\">A dropdown Menu</a><ul role=\"menu\"><li><a href=\"#\" role=\"menuitem\">Menu Item 1</a></li><li><a href=\"#\" role=\"menuitem\">Menu Item 2</a></li><li><a href=\"#\" role=\"menuitem\">Menu Item 3</a></li></ul></li><li class=\"has-dropdown active\"><a href=\"#\" tabindex=\"0\">Active dropdown Menu</a><ul role=\"menu\"><li><a href=\"#\" role=\"menuitem\">Menu Item 1</a></li><li class=\"active\"><a href=\"#\" role=\"menuitem\">Menu Item 2</a></li><li><a href=\"#\" role=\"menuitem\">Menu Item 3</a></li></ul></li><li class=\"has-dropdown\"><a href=\"#\" tabindex=\"0\">A dropdown Menu</a><ul role=\"menu\"><li><a href=\"#\" role=\"menuitem\">Menu Item 1</a></li><li><a href=\"#\" role=\"menuitem\">Menu Item 2</a></li><li><a href=\"#\" role=\"menuitem\">Menu Item 3</a></li></ul></li></ul></div></menu>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"items":{"type":"array","description":"Multi-dimensional array of items, links and children","default":[{"label":"Home","link":"#"},{"label":"A dropdown Menu","children":[{"label":"Menu Item 1","link":"#"},{"label":"Menu Item 2","link":"#"},{"label":"Menu Item 3","link":"#"}]},{"label":"Active dropdown Menu","active":true,"children":[{"label":"Menu Item 1","link":"#"},{"label":"Menu Item 2","link":"#","active":true},{"label":"Menu Item 3","link":"#"}]},{"label":"A dropdown Menu","children":[{"label":"Menu Item 1","link":"#"},{"label":"Menu Item 2","link":"#"},{"label":"Menu Item 3","link":"#"}]}]},"logo":{"type":"boolean","default":true,"description":"Should the logo be included in the menu"},"logoLink":{"type":"string","default":"#","description":"Link when clicking on logo"},"icon":{"type":"boolean","default":true,"description":"Should the hamburger menu icon be shown on mobile"},"linkText":{"type":"string","default":"Menu","description":"Text for mobile menu link"}},"mixin":"mixin top-menu(items, logo, logoLink, icon, linkText)\n menu(role='banner')&attributes(attributes)\n .wrap\n if logo\n a.logo-link(href=logoLink, title='Home', tabindex=-1) Home\n a.menu-link(href='#')= linkText\n if icon\n span.menu-icon\n if items\n ul(role='navigation')\n each item in items\n - var classes = ''\n - classes = classes + (item.children ? 'has-dropdown' : '')\n - classes = classes + (item.active ? ' active' : '')\n li(class=classes)\n a(href=item.link ? item.link : '#', tabindex=0)= item.label\n if item.children\n ul(role='menu')\n each child in item.children\n li(class=child.active ? 'active' : null)\n a(href=child.link, role='menuitem')= child.label\n\n","demoCall":"+top-menu([{\"label\":\"Home\",\"link\":\"#\"},{\"label\":\"A dropdown Menu\",\"children\":[{\"label\":\"Menu Item 1\",\"link\":\"#\"},{\"label\":\"Menu Item 2\",\"link\":\"#\"},{\"label\":\"Menu Item 3\",\"link\":\"#\"}]},{\"label\":\"Active dropdown Menu\",\"active\":true,\"children\":[{\"label\":\"Menu Item 1\",\"link\":\"#\"},{\"label\":\"Menu Item 2\",\"link\":\"#\",\"active\":true},{\"label\":\"Menu Item 3\",\"link\":\"#\"}]},{\"label\":\"A dropdown Menu\",\"children\":[{\"label\":\"Menu Item 1\",\"link\":\"#\"},{\"label\":\"Menu Item 2\",\"link\":\"#\"},{\"label\":\"Menu Item 3\",\"link\":\"#\"}]}], true, \"#\", true, \"Menu\")"},"hero":{"name":"hero","title":"Hero Image","docs":["A hero image can sit beneath the menu and spans the full width of the screen.","Using a class of <code>.slim</code> squeezes the image to take up less vertical space. This is more appropriate for non-home pages.","Using a class of <code>.outline</code> adds an oval cutout overlay to the image. Be sure to test any images on all screen sizes to make sure important focal points are not cropped"],"breakout":true,"inline":false,"block":false,"attributes":false,"demo":"<div class=\"hero\"><img src=\"https://unsplash.it/1200/400/?random\" alt=\"A hero image\"/></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"src":{"type":"string","default":"https://unsplash.it/1200/400/?random","description":"The URL of the image"},"alt":{"type":"string","default":"A hero image","description":"The alt text of the image"},"slim":{"type":"boolean","default":false,"description":"Make the hero image thinner"},"outline":{"type":"boolean","default":false,"description":"Put an oval outline over the image"}},"mixin":"mixin hero(src, alt, slim, outline)\n - var classes = ''\n - classes = classes + (slim ? 'slim ' : '')\n - classes = classes + (outline ? 'outline' : '')\n .hero(class=classes)&attributes(attributes)\n img(src=src, alt=alt)\n\n","demoCall":"+hero(\"https://unsplash.it/1200/400/?random\", \"A hero image\", false, false)"},"alert":{"name":"alert","title":"Alert Message","docs":["Alert messages can be displayed above or below the menu & hero for urgent messages to catch the user's attention.","Alert messages can be made dismissable by adding a <code>.close</code> span."],"breakout":true,"inline":false,"block":"We’re recruiting! #[a(href='#') Click here] to discover our fantastic career opportunities and start your journey today","attributes":false,"demo":"<section class=\"message alert\" role=\"status\"><p>We’re recruiting! <a href=\"#\">Click here</a> to discover our fantastic career opportunities and start your journey today</p></section>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"type":{"enum":["default","alert","warning"],"default":"alert","description":"The type of message, determines colour scheme"},"close":{"type":"boolean","default":false,"description":"Should a close button be shown"}},"mixin":"mixin alert(type, close)\n - var classes = type\n - classes = classes + (close ? ' has-close' : '')\n section.message(class=classes, role='status')&attributes(attributes)\n p\n block\n if close\n a.close(tabindex=0, href='#') Close\n\n","demoCall":"+alert(\"alert\", false).\n We’re recruiting! #[a(href='#') Click here] to discover our fantastic career opportunities and start your journey today"},"sub-menu":{"name":"sub-menu","title":"Sub-menu","docs":["The submenu component can be used to help users navigate between pages or screens within the current section.","Active menu items (the page the user is currently on) should be given the <code>.active</code> class to highlight them"],"breakout":true,"inline":false,"block":false,"attributes":false,"demo":"<nav class=\"sub-menu\"><ul><li><a href=\"#\">Menu Item 1</a></li><li class=\"active\"><a href=\"#\">Active Menu Item</a></li><li><a href=\"#\">Menu Item 3</a></li></ul></nav>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"items":{"type":"array","description":"Array of objects with label/link strings and active boolean","default":[{"label":"Menu Item 1","link":"#"},{"label":"Active Menu Item","link":"#","active":true},{"label":"Menu Item 3","link":"#"}]}},"mixin":"mixin sub-menu(items)\n nav.sub-menu&attributes(attributes)\n ul\n each item in items\n li(class=item.active ? 'active' : null)\n a(href=item.link)= item.label\n\n","demoCall":"+sub-menu([{\"label\":\"Menu Item 1\",\"link\":\"#\"},{\"label\":\"Active Menu Item\",\"link\":\"#\",\"active\":true},{\"label\":\"Menu Item 3\",\"link\":\"#\"}])"},"quick-links":{"name":"quick-links","title":"Quick Links","docs":["An eye-catching navigation with big icons can be used for directing users to the most common pages and actions of a website or application.","The links on the menu should be consistent throughout the application to help users learn the pattern."],"breakout":true,"inline":false,"block":false,"attributes":false,"demo":"<nav class=\"quick\"><ul><li class=\"tablet\"><a href=\"#\">Products</a></li><li class=\"van\"><a href=\"#\">Services</a></li><li class=\"map\"><a href=\"#\">Reviews</a></li><li class=\"box\"><a href=\"#\">Case Studies</a></li><li class=\"laptop\"><a href=\"#\">Login</a></li></ul></nav><main><div class=\"content\"><h4>Varying number of links</h4><p>The default amount of links in the quick link bar should be 5. If you need to have 4 or 6 link the classes <code>.four</code> and <code>.six</code> should be used to neatly arrange the spacing.</p><h4>Icons</h4><p>Icons are added to links with a class, the 5 icons shown here are using <code>.tablet</code>, <code>.van</code>, <code>.map</code>, <code>.box</code> and <code>.laptop</code>. To add new icons you will need to define the <code>background-image: url()</code> with your own class</p></div><div class=\"sidebar no-bottom-pad\"><h4>Vertical quick links</h4><p>Quick links can be displayed vertically (for use in sidebars etc) by adding the <code>.vertical</code> class. On small devices, vertical quick links are dispayed the same as horizontal.</p><nav class=\"quick vertical \"><ul><li class=\"tablet\"><a href=\"#\">Products</a></li><li class=\"van\"><a href=\"#\">Services</a></li><li class=\"map\"><a href=\"#\">Reviews</a></li><li class=\"box\"><a href=\"#\">Case Studies</a></li><li class=\"laptop\"><a href=\"#\">Login</a></li></ul></nav></div></main>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"items":{"type":"array","description":"array of objects with label/link/icon strings. The length of the array is counted to apply .four or .six class if necessary","default":[{"label":"Products","link":"#","icon":"tablet"},{"label":"Services","link":"#","icon":"van"},{"label":"Reviews","link":"#","icon":"map"},{"label":"Case Studies","link":"#","icon":"box"},{"label":"Log In","link":"#","icon":"laptop"}]},"vertical":{"type":"boolean","description":"Vertical mode","default":false},"four":{"type":"boolean","description":"Add four class (Auto-detected in js)","default":false},"six":{"type":"boolean","description":"Add six class (Auto-detected in js)","default":false}},"mixin":"mixin quick-links(items, vertical, four, six)\n - var classes = ''\n - classes = classes + (vertical ? 'vertical ' : '')\n - classes = classes + ((items.length === 4) || four ? 'four ' : '')\n - classes = classes + ((items.length === 6) || six ? 'six ' : '')\n nav.quick(class=classes)&attributes(attributes)\n ul\n each item in items\n li(class=item.icon)\n a(href=item.link)= item.label\n\n","demoCall":"+quick-links([{\"label\":\"Products\",\"link\":\"#\",\"icon\":\"tablet\"},{\"label\":\"Services\",\"link\":\"#\",\"icon\":\"van\"},{\"label\":\"Reviews\",\"link\":\"#\",\"icon\":\"map\"},{\"label\":\"Case Studies\",\"link\":\"#\",\"icon\":\"box\"},{\"label\":\"Login\",\"link\":\"#\",\"icon\":\"laptop\"}])\n\nmain\n .content\n h4 Varying number of links\n\n p The default amount of links in the quick link bar should be 5. If you need to have 4 or 6 link the classes #[code .four] and #[code .six] should be used to neatly arrange the spacing.\n\n h4 Icons\n\n p Icons are added to links with a class, the 5 icons shown here are using #[code .tablet], #[code .van], #[code .map], #[code .box] and #[code .laptop]. To add new icons you will need to define the #[code background-image: url()] with your own class\n\n .sidebar.no-bottom-pad\n h4 Vertical quick links\n\n p Quick links can be displayed vertically (for use in sidebars etc) by adding the #[code .vertical] class. On small devices, vertical quick links are dispayed the same as horizontal.\n\n +quick-links([{\"label\":\"Products\",\"link\":\"#\",\"icon\":\"tablet\"},{\"label\":\"Services\",\"link\":\"#\",\"icon\":\"van\"},{\"label\":\"Reviews\",\"link\":\"#\",\"icon\":\"map\"},{\"label\":\"Case Studies\",\"link\":\"#\",\"icon\":\"box\"},{\"label\":\"Login\",\"link\":\"#\",\"icon\":\"laptop\"}],true)"},"card":{"name":"card","title":"Floating Card","docs":["Floating cards can be useful for displaying single or repeating modules on a page, such as tweets or news stories. Cards fill the horizontal space they are in and stretch vertically to contain the content.","Cards can contain a <code><time></code> or a <code><span class="meta"></code> element, a header, paragraphs and link. If the card has a link, the header and time should also be linked.","Cards with a class of <code>.flat</code> will have a grey background. Cards with a class of <code>.shadow</code> will have a shadow effect."],"breakout":false,"inline":true,"block":"Don't forget, you can stay updated with all our latest news by visiting our website!","attributes":false,"demo":"<div class=\"nest\"><div class=\"sidebar\"><article class=\"card\"><span class=\"meta\"></span><span class=\"meta\"><a href=\"#\" tabindex=\"-1\">12th December 16</a></span><h4><a href=\"#\">News Item Title</a></h4><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href=\"#\">Read more...</a></article></div><div class=\"sidebar\"><article class=\"card flat\"><span class=\"meta\"></span><span class=\"meta\"><a href=\"#\" tabindex=\"-1\">Job Title</a></span><h4><a href=\"#\">Class 1 Driver</a></h4><p>We are currently looking to recruit a driver to join the existing well established team.</p><a href=\"#\">Apply now...</a></article></div><div class=\"sidebar\"><article class=\"card shadow\"><span class=\"meta\"></span><span class=\"meta\"><a href=\"#\" tabindex=\"-1\">12th December 16</a></span><h4><a href=\"#\">News Item Title</a></h4><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href=\"#\">Read more...</a></article></div></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"type":{"enum":["default","flat","shadow"],"default":"default","description":"The style of the card"},"title":{"type":"string","default":"My Card Title","description":"Title of the card"},"subtitle":{"type":"string","default":"Sub-Title","description":"Subtitle of the card"},"link":{"type":"string","default":"#","description":"Link when card is clicked"},"linkLabel":{"type":"string","default":"Read more...","description":"Text of link label"}},"mixin":"mixin card(type, title, subtitle, link, linkLabel)\n article.card(class=type)&attributes(attributes)\n if subtitle\n span.meta\n if link\n span.meta\n a(href=link, tabindex=-1)= subtitle\n else\n span.meta= title\n if title\n if link\n h4\n a(href=link)= title\n else\n h4= title\n block\n if link && linkLabel\n a(href=link)= linkLabel\n\n","demoCall":".nest\n .sidebar\n +card(null,'News Item Title','12th December 16','#','Read more...')\n p Don't forget, you can stay updated with all our latest news by visiting our website!\n .sidebar\n +card('flat','Class 1 Driver','Job Title','#','Apply now...')\n p We are currently looking to recruit a driver to join the existing well established team.\n .sidebar\n +card('shadow','News Item Title','12th December 16','#','Read more...')\n p Don't forget, you can stay updated with all our latest news by visiting our website!"},"breadcrumbs":{"name":"breadcrumbs","title":"Breadcrumbs","docs":["On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation."],"breakout":false,"inline":false,"block":false,"attributes":false,"demo":"<ul class=\"breadcrumbs\"><li><a href=\"#\">Home</a></li><li><a href=\"#\">Category</a></li><li><a href=\"#\">Sub-Category</a></li><li>Current</li></ul>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"items":{"type":"array","description":"Array of objects with label/link strings","default":[{"label":"Home","link":"#"},{"label":"Category","link":"#","active":true},{"label":"Sub-Category","link":"#","active":true},{"label":"Current"}]}},"mixin":"mixin breadcrumbs(items)\n ul.breadcrumbs&attributes(attributes)\n if items\n each item in items\n if item.link\n li\n a(href=item.link)= item.label\n\n else\n li= item.label\n\n","demoCall":"+breadcrumbs([{\"label\":\"Home\",\"link\":\"#\"},{\"label\":\"Category\",\"link\":\"#\",\"active\":true},{\"label\":\"Sub-Category\",\"link\":\"#\",\"active\":true},{\"label\":\"Current\"}])"},"pagination":{"name":"pagination","title":"Pagination","docs":["When there is too much content for one page, we should make it easy for users to browse, skim or skip between pages. On small screens only the next and previous buttons are shown."],"breakout":false,"inline":false,"block":false,"attributes":true,"demo":"<div><ul class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\"><li class=\"pagination-previous\"><a href=\"#10\">Previous <span class=\"show-for-sr\">page</span></a></li><li><a href=\"#\" aria-label=\"Page 1\">1</a></li><li><a href=\"#10\" aria-label=\"Page 2\">2</a></li><li class=\"current\"><span class=\"show-for-sr\">You're on page</span> 3</li><li><a href=\"#30\" aria-label=\"Page 4\">4</a></li><li class=\"ellipsis\" aria-hidden=\"true\"></li><li><a href=\"#120\" aria-label=\"Page 13\">13</a></li><li><a href=\"#130\" aria-label=\"Page 14\">14</a></li><li class=\"pagination-next\"><a href=\"#30\">Next <span class=\"show-for-sr\">page</span></a></li></ul></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"pages":{"type":"array","default":[{"page":1,"link":"#"},{"page":2,"link":"#10"},{"page":3,"link":"#20"},{"page":4,"link":"#30"},{"page":5,"link":"#40"},{"page":6,"link":"#50"},{"page":7,"link":"#60"},{"page":8,"link":"#70"},{"page":9,"link":"#80"},{"page":10,"link":"#90"},{"page":11,"link":"#100"},{"page":12,"link":"#110"},{"page":13,"link":"#120"},{"page":14,"link":"#130"}],"description":"Array of objects with page number and link. This should include ALL pages, the mixin will remove ones that aren't needed"},"current":{"type":"number","default":"6","description":"The current page"},"relativeNumber":{"type":"number","default":"1","description":"Number of pages to show each side of current page"},"absoluteNumber":{"type":"number","default":"2","description":"Number of pages to show at start and end"}},"mixin":"mixin pagination(pages, current, relativeNumber, absoluteNumber)\n if pages.length\n - var current = current * 1\n - var total = pages.length || 0\n - var relativeNumber = relativeNumber ? relativeNumber * 1 : 1\n - var absoluteNumber = absoluteNumber ? absoluteNumber * 1 : 2\n - var previous = current > 1 ? true : false\n - var previousLink = previous && pages[current - 2] ? pages[current - 2].link : null\n - var next = current < total ? true : false\n - var nextLink = next ? pages[current].link : null\n div\n ul.pagination(role='navigation', aria-label='Pagination')&attributes(attributes)\n\n //- Do some clever stuff to choose which links to display in here and what dividers to show in between\n //- No links should repeat themselves :/\n\n //- Fetch the x pages before current and put them in a separate array\n - var before = []\n each page, index in pages\n if index > (current - 2 - relativeNumber) && index < (current - 1)\n - before.push(page)\n\n //- Fetch the x pages after current and put them in a separate array\n - var after = []\n each page, index in pages\n if index < (current + relativeNumber) && index > (current - 1)\n - after.push(page)\n\n //- Get the first x pages and check they are not already in the before array (by inversing the same if statement), and are below the current page\n - var start = []\n each page, index in pages\n if index < (current - 1) && index < absoluteNumber && !(index > (current - 2 - relativeNumber) && index < (current - 1))\n - start.push(page)\n\n //- Get the last x pages and check they are not already in the after array (by inversing the same if statement), and are above the current page\n - var end = []\n each page, index in pages\n if index > (current - 1) && (index > (total - absoluteNumber - 1)) && !(index < (current + relativeNumber) && index > (current - 1))\n - end.push(page)\n\n //- Previous\n if previous\n li.pagination-previous\n a(href=previousLink) Previous #[span.show-for-sr page]\n else\n li.pagination-previous.disabled Previous #[span.show-for-sr page]\n\n //-- Start\n each page in start\n li\n a(href=page.link, aria-label='Page ' + page.page)= page.page\n\n //- Divider (if there is a gap between start and before)\n if start[start.length - 1] && before[0] && start[start.length - 1].page + 2 < before[0].page + 1\n li.ellipsis(aria-hidden='true')\n\n //- Before\n each page in before\n li\n a(href=page.link, aria-label='Page ' + page.page)= page.page\n\n //- Current\n each page, index in pages\n if current - 1 === index\n li.current #[span.show-for-sr= 'You\\'re on page'] #{current}\n\n //- After\n each page in after\n li\n a(href=page.link, aria-label='Page ' + page.page)= page.page\n\n //- Divider (if there is a gap between after and end)\n if after[after.length - 1] && end[0] && after[after.length - 1].page + 2 < end[0].page + 1\n li.ellipsis(aria-hidden='true')\n\n //- End\n each page in end\n li\n a(href=page.link, aria-label='Page ' + page.page)= page.page\n\n //- Next\n if next\n li.pagination-next\n a(href=nextLink) Next #[span.show-for-sr page]\n else\n li.pagination-next.disabled Next #[span.show-for-sr page]\n\n","demoCall":"+pagination([{\"page\":1,\"link\":\"#\"},{\"page\":2,\"link\":\"#10\"},{\"page\":3,\"link\":\"#20\"},{\"page\":4,\"link\":\"#30\"},{\"page\":5,\"link\":\"#40\"},{\"page\":6,\"link\":\"#50\"},{\"page\":7,\"link\":\"#60\"},{\"page\":8,\"link\":\"#70\"},{\"page\":9,\"link\":\"#80\"},{\"page\":10,\"link\":\"#90\"},{\"page\":11,\"link\":\"#100\"},{\"page\":12,\"link\":\"#110\"},{\"page\":13,\"link\":\"#120\"},{\"page\":14,\"link\":\"#130\"}],3,1,2)"},"tab":{"name":"tab","title":"Tabs","docs":["To save on-screen space we can use tabbed content to alternate between views within the same context, whilst staying on the same page."],"breakout":false,"inline":false,"block":"h3 This is a tab\n p Some tab content","attributes":false,"demo":"<div class=\"tabs\"><ul role=\"tablist\"><li><a role=\"tab\" href=\"#tab-1\" tabindex=\"0\" data-tab=\"1\">Tab 1</a></li><li class=\"active\"><a role=\"tab\" href=\"#tab-2\" tabindex=\"0\" data-tab=\"2\">Tab 2</a></li><li><a role=\"tab\" href=\"#tab-3\" tabindex=\"0\" data-tab=\"3\">Tab 3</a></li><li><a role=\"tab\" href=\"#tab-4\" tabindex=\"0\" data-tab=\"4\">Tab 4</a></li></ul><div class=\"panel\" role=\"tabpanel\" id=\"tab-1\" data-tab=\"1\"><h2>This is tab 1</h2><p>Some tab content</p></div><div class=\"panel active\" role=\"tabpanel\" id=\"tab-2\" data-tab=\"2\"><h2>This is tab 2</h2><p>Some tab content</p></div><div class=\"panel\" role=\"tabpanel\" id=\"tab-3\" data-tab=\"3\"><h2>This is tab 3</h2><p>Some tab content</p></div><div class=\"panel\" role=\"tabpanel\" id=\"tab-4\" data-tab=\"4\"><h2>This is tab 4</h2><p>Some tab content</p></div></div>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"id":{"type":"string","default":"1","description":"The id of the tab, must correspond to tab-list id"},"active":{"type":"boolean","default":false,"description":"Is the tab active"}},"mixin":"mixin tab-list(tabs)\n .tabs&attributes(attributes)\n ul(role='tablist')\n each tab, index in tabs\n if tab.active\n li.active\n a(role='tab', href='#tab-' + tab.id || index, tabindex=0, data-tab=tab.id || index)= tab.label\n else\n li\n a(role='tab', href='#tab-' + tab.id || index, tabindex=0, data-tab=tab.id || index)= tab.label\n block\n\nmixin tab(id, active)\n .panel(role='tabpanel', id='tab-' + id, data-tab=id, class=active ? 'active' : '')\n block\n\n","demoCall":"+tab-list([{\"label\":\"Tab 1\",\"id\":1},{\"label\":\"Tab 2\",\"id\":2,\"active\":true},{\"label\":\"Tab 3\",\"id\":3},{\"label\":\"Tab 4\",\"id\":4}])\n +tab(1)\n h2 This is tab 1\n p Some tab content\n +tab(2, true)\n h2 This is tab 2\n p Some tab content\n +tab(3)\n h2 This is tab 3\n p Some tab content\n +tab(4)\n h2 This is tab 4\n p Some tab content"},"progress":{"name":"progress","title":"Progress Bar","docs":["A progress bar can be used to give an indication to users of how far through their wait they are. The <code><progress></code> element is used and the progress is set with the <code>value</code> and <code>max</code> attributes. The percentage can be shown in-line by adding the <code>.show-percent</code> class."],"demo":"<progress value=\"30\" max=\"100\"></progress><progress class=\"show-percent\" value=\"80\" max=\"100\"></progress><progress class=\"show-percent\" value=\"55\" max=\"100\"></progress>","demoCall":"progress(value=30, max=100)\nprogress.show-percent(value=80, max=100)\nprogress.show-percent(value=55, max=100)"},"login":{"name":"login","title":"Login Screen","docs":["The login screen can be used inline (within another page) or floated alone on a full page.","Users should be allowed to log in with their email address. If this is not technically possible, a link to instructions on how to find their username/user id etc should be provided underneath the relevant field.","No mixin / sample code is provided for this element because there are too many variables. Check the <code>docs.pug</code> source code for this example."],"breakout":true,"demo":"<div class=\"login-page\"><form class=\"login\" action=\"#\" method=\"post\"><h1>Login to My App</h1><div><label for=\"email\">Your email address:</label><input type=\"email\" id=\"email\" name=\"email\"/></div><div><label for=\"password\">Password:</label><input type=\"text\" id=\"password\" name=\"password\"/><span><a href=\"#\">Forgotten your password?</a></span></div><div><a class=\"login-go\" href=\"#\">Login</a></div><div class=\"login-signup\"><p>Don't have an account? <a href=\"#\">Sign Up</a></p></div></form></div>","mixinPath":"./pug/components/_input.pug","mixin":"mixin input(type, name, value, id, label, helperBelow, helperAbove, error)\n div(class=error ? 'has-error' : '')\n label(for=id)= label\n if helperAbove\n span= helperAbove\n input(type=type, id=id, name=name, value=value)&attributes(attributes)\n if helperBelow\n span= helperBelow\n block\n if error\n span.error-message= error\n\n","demoCall":".login-page\n form.login(action='#', method='post')\n h1 Login to My App\n +input('email', 'email', null, 'email', 'Your email address:')\n +input('text', 'password', null, 'password', 'Password:')\n span\n a(href='#') Forgotten your password?\n div\n a.login-go(href='#') Login\n .login-signup\n p Don't have an account? #[a(href='#') Sign Up]"},"closeable":{"name":"closeable","title":"Closeable Elements","docs":["Sometimes elements need to be closeable by the user. The helper class <code>.closeable</code> can be combined with a <code><span class="close">Close</span></code> element to add a close button to any element. The styles for this are an attempt at <em>one-size fits all</em> so they may need to be tweaked for each use case."],"demo":"<div class=\"nest\"><div class=\"sidebar\"><article class=\"card flat closeable\"><span class=\"meta\"></span><span class=\"meta\"><a href=\"#\" tabindex=\"-1\">12th December 16</a></span><h4><a href=\"#\">News Item Title</a></h4><span class=\"close\">Close</span><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href=\"#\">Read more...</a></article></div></div>","mixinPath":"./pug/components/_card.pug","mixin":"mixin card(type, title, subtitle, link, linkLabel)\n article.card(class=type)&attributes(attributes)\n if subtitle\n span.meta\n if link\n span.meta\n a(href=link, tabindex=-1)= subtitle\n else\n span.meta= title\n if title\n if link\n h4\n a(href=link)= title\n else\n h4= title\n block\n if link && linkLabel\n a(href=link)= linkLabel\n\n","demoCall":".nest\n .sidebar\n +card('flat','News Item Title','12th December 16','#','Read more...').closeable\n span.close Close\n p Don't forget, you can stay updated with all our latest news by visiting our website!"},"banner":{"name":"banner","title":"Banner Message","docs":["Banner callouts can be useful for displaying a quick eye-catching message. A logo can be included with the <code>.logo</code> class or the text can be centred with a <code>.center</code> class."],"breakout":true,"inline":false,"block":false,"attributes":false,"demo":"<section class=\"banner logo \"><div><h2>A fancy strapline</h2><h3>Call us on 0800 00 00 00</h3></div></section>","mixinPath":null,"scssPath":null,"jsPath":null,"params":{"heading":{"type":"string","default":"A fancy strapline","description":"The header of the banner"},"subHeading":{"type":"string","default":"Call us on 0800 00 00 00","description":"The sub-header of the banner"},"logo":{"type":"boolean","default":true,"description":"Should logo be included"},"center":{"type":"boolean","default":false,"description":"Should text be centered"}},"mixin":"mixin banner(heading, subHeading, logo, center)\n - var classes = ''\n - classes = classes + (logo ? 'logo ' : '')\n - classes = classes + (center ? 'center ' : '')\n section.banner(class=classes)&attributes(attributes)\n div\n h2= heading\n h3= subHeading\n\n","demoCall":"+banner(\"A fancy strapline\", \"Call us on 0800 00 00 00\", true, false)"},"footer":{"name":"footer","title":"Footer","docs":["The footer sits at the bottom of the screen and can contain 3 horizontal sections. It can be used for re-iterating navigation or adding extra information and links.","No mixin / sample code is provided for this element because there are too many variables. Check the <code>docs.pug</code> source code for this example."],"breakout":true,"demo":"<footer><div class=\"top\"><div class=\"contain\"><aside><h2>Style Guider - Generate style guides</h2><p>It's really good!</p><ul><li>Call on: 0800 00 00 00 <sup>*</sup></li><li>Email: <a href=\"\">[email protected]</a></li><li><small>* Calls may be recorded</small></li></ul></aside><nav><h4>Some Navigation</h4><ul><li><a href=\"#\">History</a></li><li><a href=\"#\">Team</a></li><li><a href=\"#\">Awards</a></li><li><a href=\"#\">Corporate Social Responsibility</a></li><li><a href=\"#\">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href=\"#\">History</a></li><li><a href=\"#\">Team</a></li><li><a href=\"#\">Awards</a></li><li><a href=\"#\">Corporate Social Responsibility</a></li><li><a href=\"#\">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href=\"#\">History</a></li><li><a href=\"#\">Team</a></li><li><a href=\"#\">Awards</a></li><li><a href=\"#\">Corporate Social Responsibility</a></li><li><a href=\"#\">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href=\"#\">History</a></li><li><a href=\"#\">Team</a></li><li><a href=\"#\">Awards</a></li><li><a href=\"#\">Corporate Social Responsibility</a></li><li><a href=\"#\">Careers</a></li></ul></nav></div></div><div class=\"middle\"><div class=\"contain\"><span class=\"copyright\">© 2017 Ian Egner</span><nav><ul><li><a href=\"#\">A text link</a></li><li><a href=\"#\">A text link</a></li><li><a href=\"#\">A text link</a></li><li><a href=\"#\">A text link</a></li><li><a href=\"#\">A text link</a></li></ul></nav></div></div><div class=\"bottom\"><p>Some Company Name, Some Address, Some Town, Some County, Some Postcode</p><p>Registered in England and Wales No. Some Company Number - VAT Registration No. Some VAT number</p></div></footer>","demoCall":"footer\n .top\n .contain\n aside\n h2 Style Guider - Generate style guides\n p It's really good!\n ul\n li Call on: 0800 00 00 00 #[sup *]\n li Email: #[a(href='') [email protected]]\n li #[small * Calls may be recorded]\n nav\n h4 Some Navigation\n ul\n li\n a(href='#') History\n li\n a(href='#') Team\n li\n a(href='#') Awards\n li\n a(href='#') Corporate Social Responsibility\n li\n a(href='#') Careers\n nav\n h4 More Navigation\n ul\n li\n a(href='#') History\n li\n a(href='#') Team\n li\n a(href='#') Awards\n li\n a(href='#') Corporate Social Responsibility\n li\n a(href='#') Careers\n nav\n h4 More Navigation\n ul\n li\n a(href='#') History\n li\n a(href='#') Team\n li\n a(href='#') Awards\n li\n a(href='#') Corporate Social Responsibility\n li\n a(href='#') Careers\n nav\n h4 More Navigation\n ul\n li\n a(href='#') History\n li\n a(href='#') Team\n li\n a(href='#') Awards\n li\n a(href='#') Corporate Social Responsibility\n li\n a(href='#') Careers\n .middle\n .contain\n span.copyright © 2017 Ian Egner\n nav\n ul\n li\n a(href='#') A text link\n li\n a(href='#') A text link\n li\n a(href='#') A text link\n li\n a(href='#') A text link\n li\n a(href='#') A text link\n .bottom\n p Some Company Name, Some Address, Some Town, Some County, Some Postcode\n p Registered in England and Wales No. Some Company Number - VAT Registration No. Some VAT number"},"_parameters":"\nmixin docs_select(name, title, id, description, options, selected)\n label(for=id)= title\n if description\n span= description\n select(name=name, id=id)\n each option in options\n option(value = option, selected=(option === selected))= camelToTitle(option)\n\nmixin docs_radio(name, title, id, description, options, selected)\n fieldset\n legend= title\n if description\n span= description\n each option in options\n input(type='radio', name=name, id=id + '-' + option, checked=(option === selected), value=option)\n label(for=id + '-' + option)= camelToTitle(option)\n\nmixin docs_json(name, title, id, description)\n label(for=id)= title\n if description\n span= description\n textarea(id=id, name=name)\n block\n\nmixin docs_text(name, title, id, description, value)\n label(for=id)= title\n if description\n span= description\n input(type='text', id=id, name=name, value=value)\n\nmixin docs_number(name, title, id, description, value, max, min, step)\n label(for=id)= title\n if description\n span= description\n input(type='number', id=id, name=name, value=value, max=max, min=min, step=step)\n"}</script>
</head>
<body>
<menu role="banner">
<div class="wrap"><a class="logo-link" href="#root" title="Home" tabindex="-1">Home</a><a class="menu-link" href="#">Menu<span class="menu-icon"></span></a>
<ul role="navigation">
<li><a href="#accessibility" tabindex="0">Accessibility</a>
</li>
<li><a href="#colour" tabindex="0">Colours</a>
</li>
<li class="has-dropdown"><a href="#" tabindex="0">Typography</a>
<ul role="menu">
<li><a href="#header" role="menuitem">Headers</a></li>
<li><a href="#bold-header" role="menuitem">Bold Headers</a></li>
<li><a href="#sub-header" role="menuitem">Sub Headers</a></li>
<li><a href="#link" role="menuitem">Links</a></li>
<li><a href="#list" role="menuitem">Lists</a></li>
<li><a href="#definition-list" role="menuitem">Definition Lists</a></li>
<li><a href="#blockquote" role="menuitem">Blockquote</a></li>
<li><a href="#divider" role="menuitem">Dividers</a></li>
</ul>
</li>
<li class="has-dropdown"><a href="#" tabindex="0">Forms</a>
<ul role="menu">
<li><a href="#input" role="menuitem">Text Inputs</a></li>
<li><a href="#textarea" role="menuitem">Text Area</a></li>
<li><a href="#select" role="menuitem">Select Menu</a></li>
<li><a href="#checkbox" role="menuitem">Checkboxes</a></li>
<li><a href="#radio" role="menuitem">Radio Buttons</a></li>
<li><a href="#upload" role="menuitem">File Upload</a></li>
<li><a href="#datepicker" role="menuitem">Date Picker</a></li>
<li><a href="#errors" role="menuitem">Form Errors</a></li>
<li><a href="#callout" role="menuitem">Error Callout</a></li>
<li><a href="#required" role="menuitem">Required Fields</a></li>
<li><a href="#disabled" role="menuitem">Disabled Fields</a></li>
<li><a href="#button" role="menuitem">Buttons</a></li>
<li><a href="#submit" role="menuitem">Submit Button</a></li>
<li><a href="#hidden" role="menuitem">Hidden Inputs</a></li>
</ul>
</li>
<li class="has-dropdown"><a href="#" tabindex="0">Custom UI Elements</a>
<ul role="menu">
<li><a href="#layout" role="menuitem">Layout</a></li>
<li><a href="#table" role="menuitem">Tables</a></li>
<li><a href="#top-menu" role="menuitem">Main Menu</a></li>
<li><a href="#hero" role="menuitem">Hero Image</a></li>
<li><a href="#alert" role="menuitem">Alert Message</a></li>
<li><a href="#sub-menu" role="menuitem">Sub-menu</a></li>
<li><a href="#quick-links" role="menuitem">Quick Links</a></li>
<li><a href="#card" role="menuitem">Floating Card</a></li>
<li><a href="#breadcrumbs" role="menuitem">Breadcrumbs</a></li>
<li><a href="#pagination" role="menuitem">Pagination</a></li>
<li><a href="#tab" role="menuitem">Tabs</a></li>
<li><a href="#progress" role="menuitem">Progress Bar</a></li>
<li><a href="#login" role="menuitem">Login Screen</a></li>
<li><a href="#closeable" role="menuitem">Closeable Elements</a></li>
<li><a href="#banner" role="menuitem">Banner Message</a></li>
<li><a href="#footer" role="menuitem">Footer</a></li>
</ul>
</li>
</ul>
</div>
</menu>
<main id="content">
<div class="full">
<h1 id="root">Style Guider Demo <small>0.1.0</small></h1>
<p>This is the style-guider-demo CSS framework and style guide, built with <a href="https://www.npmjs.com/package/generator-style-guider" target="_blank">Style Guider</a>. The source code for this style guide can be found on <a href="https://github.com/webdevian/style-guider-demo" target="_blank">GitHub</a>.</p>
<p>This fictional style guide is designed to give a demonstration of the wide variety of components that Style Guider docs can display</p>
<hr>
<div class="component">
<h2 id="accessibility">Accessibility</h2>
<p><blockquote>Accessibility is the degree to which anyone can access and use a website using any web browsing technology. <cite>Royal National Institute of Blind People</cite></blockquote></p>
<p>Our public-facing applications must be built to work on all devices, browsers and with assistive technologies. A lot of effort has been made to ensure that the components in this framework are accessible. Such as:</p><ul><li>Text and backgrounds have sufficient contrast ratios so text is legible.</li><li>Clickable elements are clear and uniform, so users know what they can click.</li><li>ARIA landmark roles and html5 elements help browsers define types of content.</li><li>Focus states on all elements so that interactions can be operated with a keyboard or screen reader.</li><li>Javascript features have a fallback for when javascript is not enabled.</li></ul><p><a href="http://a11yproject.com/checklist.html" target="_blank">This checklist from the A11Y Project</a> is a good guide to all the core web accessibility principles.</p>
</div>
<hr>
<div class="component">
<h2 id="colour">Colours</h2>
<p>There are a variety of colours to choose from for digital interfaces.</p>
<p>There are not pre-defined CSS classes for each colour, but they are available as SASS variables to use in your own extended styles.</p><h3>Primary Colours</h3><div class="swatches big"><span class="red">Red</span><span class="blue">Blue</span></div><h3>Secondary Colours</h3><div class="swatches small"><span class="claret">Claret</span><span class="flame">Flame</span><span class="carrot">Carrot</span><span class="buttercup">Buttercup</span><span class="sunglow">Sunglow</span><span class="malibu">Malibu</span><span class="bermuda">Bermuda</span><span class="java">Java</span><span class="verdun">Verdun</span><span class="grey">Grey</span></div>
</div>
<hr>
<div class="component">
<h2 id="typography">Typography</h2>
<p>All text uses Helvetica Neue with a fallback to Helvetica or Arial. Body text is legible with generous line-spacing and the font-size adapts to the screen size to ensure readability. Paragraphs have a bottom margin to match a vertical rhythm.</p>
<p>Paragraphs also have a maximum width of about 700px, so that long lines don't become too difficult to read.</p>
</div>
<div class="component">
<h3 id="header">Headers</h3>
<p>Headers use a lighter font-weight. They should be used in cascading order to denote the importance of a section's contents.</p><h1>h1. This is a very large header</h1><h2>h2. This is a large header</h2><h3>h3. This is a medium header</h3><h4>h4. This is a moderate header</h4><h5>h5. This is a small header</h5><h6>h6. This is a tiny header</h6>
</div>
<hr>
<div class="component">
<h3 id="bold-header">Bold Headers</h3>
<p>Sometimes a bolder header might be required for more emphasis. This can be done by adding the <code>.heavy</code> class. If this option is used it should be done consistently throughout the application or website.</p>
<p>By inserting a <code>small</code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.</p><h1 class="heavy">h1. This is a very large header</h1><h2 class="heavy">h2. This is a large header</h2><h3 class="heavy">h3. This is a medium heade</h3><h4 class="heavy">h4. This is a moderate header</h4><h5 class="heavy">h5. This is a small header</h5><h6 class="heavy">h6. This is a tiny header</h6>
</div>
<hr>
<div class="component">
<h3 id="sub-header">Sub Headers</h3>
<p>By inserting a <code>small</code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.</p><h4>This is a medium header <small>with a subheader</small></h4>
</div>
<hr>
<div class="component">
<h3 id="link">Links</h3>
<p>Text links should be intuitive, so that users know they can click or tap on them. Inline links are <a href="#">displayed in red</a> with an underline on hover</p>
</div>
<hr>
<div class="component">
<h3 id="list">Lists</h3>
<p>Lists are useful for a collection of text items and can be numbered or nested too.</p><p>This is what an un-ordered list looks like:</p><ul><li>A list item</li><li>Another list item</li><li>Another one</li><li>Ok, last one</li></ul><p>A list following a paragraph has reduced spacing, so that a paragraph can give context to a list:</p><ol><li>A list item</li><li>Another list item</li><li>Another one</li><li>Ok, last one</li></ol>
</div>
<hr>
<div class="component">
<h3 id="definition-list">Definition Lists</h3>
<p>A definition list <code><dl></code> is used to display name-value pairs, like FAQs. Each term <code><dt></code> is paired with one or more definitions <code><dd></code>.</p><dl><dt>A Definition Term</dt><dd>The definition, styled just like a paragraph, but with clever spacing between definitions.</dd><dt>Why should I use this style guide?</dt><dd>Because it looks good</dd></dl>
</div>
<hr>
<div class="component">
<h3 id="blockquote">Blockquote</h3>
<p>Sometimes other people say nice things, and we may want to mention those things with a quote that clearly shows who said it. Use a <code><cite></code> tag for the byline.</p><blockquote>I had a really good experience using this product.<cite>A. Customer</cite></blockquote>
</div>
<hr>
<div class="component">
<h3 id="divider">Dividers</h3>
<p>Use <code><hr></code> dividers to define thematic breaks between paragraphs or other page elements</p>
</div>
<hr>
<div class="component">
<h2 id="form">Forms</h2>
<p>Forms are key in interacting with users and gleaning information from them. Forms must be intuitive and accessible to stop users getting frustrated and leaving before finishing.</p>
</div>
<div class="component">
<h3 id="input">Text Inputs</h3>
<p>These input types create a single line text field: <code>text</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code></p>
<p>Using specific input types for different data formats can help improve usability. For example, using a <code>tel</code> input will open a numpad keyboard on mobile devices, making it easier for the user to input a phone number.</p>
<p>All form inputs should have a clear label, that describes what you want the user to enter. Clicking a label should focus on the form field. This is achieved by linking label elements to input elements with a <code>for</code> attribute.</p>
<p>Although popular in modern websites, inline placeholders should not be used because they disappear as soon as a user starts typing, and the user may think there is already text input. Instead an example or hint should be placed beneath the input.</p><div><label for="example-text">An example text field</label><input type="text" id="example-text" name="example-text"/><span>A helper or example for this field</span></div><span class="button show-code" data-open-component="input">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="input">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="textarea">Text Area</h3>
<p>Text areas are used for multi-line text input, for example on a comments form. A text area can also be given a helper label. The text area should be given an appropriate amount of rows (with the <code>rows</code> attribute) for the text that is expected to be entered.</p><div><label for="example-textarea">Example Text Area</label><span>Some helper text</span><textarea id="example-textarea" name="example-textarea" rows="3"></textarea></div><span class="button show-code" data-open-component="textarea">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="textarea">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="select">Select Menu</h3>
<p>Use select menus to combine many choices into one dropdown menu. This is useful for saving space, small screen devices have native UI patterns for dealing with these</p><div><label for="my-input">My Input</label><span>More helpful advice for this field</span><select id="my-input" name="my-input"><option value="1">An Option</option><option value="2" selected="selected">Another Option</option><option value="3">A Third Option</option></select><span>Some helpful advice for this field</span></div><span class="button show-code" data-open-component="select">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="select">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="checkbox">Checkboxes</h3>
<p>Use groups of checkboxes when the user may select multiple choices from a list</p><div><legend for="example-checkbox">Example Checkbox Group</legend><span>Some helper text</span><fieldset><div><input type="checkbox" id="example-checkbox-1" value="1" name="example-checkbox"/><label for="example-checkbox-1">An Option</label></div><div><input type="checkbox" id="example-checkbox-2" value="2" name="example-checkbox" checked="checked"/><label for="example-checkbox-2">Another Option</label></div><div><input type="checkbox" id="example-checkbox-3" value="3" name="example-checkbox"/><label for="example-checkbox-3">A Third Option</label></div></fieldset></div><span class="button show-code" data-open-component="checkbox">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="checkbox">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="radio">Radio Buttons</h3>
<p>Use radio buttons when the user must select just one choice</p><div role="radiogroup"><legend for="my-radios">My Radio options</legend><span>More helpful advice for this field</span><fieldset><div><input type="radio" id="my-radios-1" value="1" name="my-radios"/><label for="my-radios-1">An Option</label></div><div><input type="radio" id="my-radios-2" value="2" name="my-radios"/><label for="my-radios-2">Another Option</label></div><div><input type="radio" id="my-radios-3" value="3" name="my-radios"/><label for="my-radios-3">A Third Option</label></div></fieldset><span>Some helpful advice for this field</span></div><span class="button show-code" data-open-component="radio">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="radio">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="upload">File Upload</h3>
<p>File upload inputs are inconsistent across all browsers, so we use a label mask to display it like a button. When clicked it opens up the user's file browser</p><div><label for="example-file-upload">Upload your file</label><input type="file" id="example-file-upload" name="example-file-upload" tabindex="-1"/><label for="example-file-upload" tabindex="0">Upload</label></div><span class="button show-code" data-open-component="upload">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="upload">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="datepicker">Date Picker</h3>
<p>Inputs with an attribute of <code>data-datepicker</code> can be made more user friendly with the jQuery-ui datepicker widget. The datepicker input element is one case where a placeholder is useful, to indicate that the input must be clicked to open the calendar.</p><div><label for="Example Date Picker"></label><input type="date" id="Example Date Picker" name="example-date-picker" data-datepicker="data-datepicker" placeholder="Pick Date"/></div>
</div>
<hr>
<div class="component">
<h3 id="errors">Form Errors</h3>
<p>User input needs to be validated to check for erroneous or malicious data. To improve usability, human-friendly error messages should be shown on invalid fields.</p>
<p>In-line validation (inline feedback as the user is filling out the form) is much more effective than post-submission feedback.</p>
<p>Error messages can be added to the DOM by javascript or into the source html server-side. A wrapper with class <code>.has-error</code> around an input and label denotes an error. A span with class <code>.error-message</code> should show the specific error.</p><div class="has-error"><label for="example-text-error">Text field with an error</label><input type="text" id="example-text-error" name="example-text-error" value="Some erroneous text"/><span>Helper text</span><span class="error-message">This field is too long</span></div>
</div>
<hr>
<div class="component">
<h3 id="callout">Error Callout</h3>
<p>A callout should be included at the top of the form to indicate that there are errors after form submission. It should indicate which fields have errors to help the user amend them</p><div class="callout"><h5>There were some problems with your form</h5><p><a href="#example-text-error">Example Field</a> - Must be less than 30 characters</p><p><a href="#example-text-error">Another Field</a> - Must be a specific type of data</p></div><span class="button show-code" data-open-component="callout">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="callout">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="required">Required Fields</h3>
<p>In some applications different input fields will be required or optional. For best usability, optional fields should be marked as optional (in the helper text), and required fields should be the default.</p>
</div>
<hr>
<div class="component">
<h3 id="disabled">Disabled Fields</h3>
<p>Some applications will need to show a field but not accept user input, or disable the submit button until all required fields are completed. The <code>disabled</code> attribute stops input and styles it to makes it clear that inputs can not be modified by the user.</p><div><label for="example-text-disabled">An example disabled text field</label><input type="text" id="example-text-disabled" name="example-text-disabled" value="User cannot edit this text" disabled="disabled"/><span>You cannot edit this field</span></div>
</div>
<hr>
<div class="component">
<h3 id="button">Buttons</h3>
<p>Buttons are for users to trigger an actions, the text on the button should make it clear what the action will do. The colour of the button can also denote whether an action is constructive, destructive etc.</p>
<p>Buttons in a row are spaced apart so that a user won't press the wrong one by mistake.</p>
<p>Links or submit inputs can be styled as buttons with the <code>.button</code> class.</p>
<p><h4>Create new order?</h4></p>
<p><a class="button small secondary" href="#">Cancel</a> <a class="button" href="#">Create order</a></p>
<p>Button labels should be clear so that the user knows what action will happen when they click it. Constructive actions (Yes, Confirm, Save etc) should go on the right and be blue. Destructive actions (Delete etc) should be red. Back-tracking actions (Cancel, Undo, No) should be grey and on the left, and could be smaller.</p>
<p>Colour of buttons can be modified by adding a <code>.alert</code> or <code>.secondary</code> class. The size of buttons can be modified with <code>.small</code>, <code>.tiny</code>, <code>.large</code> and <code>.expanded</code> classes.</p><div><a class="button" href="#">Basic Button</a><a class="alert button" href="#">Alert Btn</a><a class="secondary button" href="#">Secondary Btn</a></div><div><a class="secondary small button" href="#">A Small Btn</a><a class="tiny button alert" href="#">An even smaller button</a><a class="large button" href="#">A large button</a></div><div><a class="small expanded button" href="#">An expanded button</a></div>
</div>
<hr>
<div class="component">
<h3 id="submit">Submit Button</h3>
<p>A mixin for inputs with a type of <code>hidden</code> has been included</p><input class="button" type="submit" value="Submit"/><br/><span class="button show-code" data-open-component="submit">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="submit">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="hidden">Hidden Inputs</h3>
<p>A mixin for inputs with a type of <code>hidden</code> has been included</p><!-- No demo--><span class="button show-code" data-open-component="hidden">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="hidden">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h2 id="ui-elements">Custom UI Elements</h2>
</div>
<div class="component">
<h3 id="layout">Layout</h3><div class="content"><p>There are 3 main layout components: Full-width, two-thirds and one-third. This <code>.content</code> column is two-thirds.</p><p>A <code>.full</code> element stretches across the width of the screen.</p><p>On small screens all three if of these components are full-width and stack on top of each other</p><h4>Helper layout classes</h4><p><code>.half</code>, <code>.third</code>, <code>.quarter</code> and <code>.sixth</code> are available for quick column width setting.</p><h4>Custom column layouts</h4><p>Columns should be implemented using Foundation's sass mixins - <a href="http://foundation.zurb.com/sites/docs/grid.html#building-semantically" target="_blank">see more details here</a>. There is also a useful grid-columns mixin in `scss/_mixins.scss`, see the documentation on that for more info</p></div><div class="sidebar"><h3>Sidebar</h3><p>This <code>.sidebar</code> element is one third width.</p></div>
</div>
<hr>
<div class="component">
<h3 id="table">Tables</h3>
<p>Tables are used for showing tabular data. A few simple style tweaks make tables much easier to read. Adding a class of <code>.hover</code> makes rows highlight on hover.</p>
<p>Adding a class of <code>.stack</code> to a table makes it stack up on small screens for a cleaner layout.</p><table class="stack hover"><thead><tr><th width="200">Table Header</th><th>Another Table Header</th><th>Table Header</th><th>Table Header</th></tr></thead><tbody><tr><td>Content Goes Here</td><td>This is longer content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td><a class="button small" href="">A Button</a></td></tr><tr><td>Content Goes Here</td><td>This is longer Content Donec id elit non mi porta gravida at eget metus.</td><td></td><td>Content Goes Here</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td>Content Goes Here</td></tr></tbody></table>
</div>
<hr>
<div class="component">
<h3 id="top-menu">Main Menu</h3>
<p>On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation.</p>
<div class="breakout"><menu role="banner"><div class="wrap"><a class="logo-link" href="#" title="Home" tabindex="-1">Home</a><a class="menu-link" href="#">Menu<span class="menu-icon"></span></a><ul role="navigation"><li><a href="#" tabindex="0">Home</a></li><li class="has-dropdown"><a href="#" tabindex="0">A dropdown Menu</a><ul role="menu"><li><a href="#" role="menuitem">Menu Item 1</a></li><li><a href="#" role="menuitem">Menu Item 2</a></li><li><a href="#" role="menuitem">Menu Item 3</a></li></ul></li><li class="has-dropdown active"><a href="#" tabindex="0">Active dropdown Menu</a><ul role="menu"><li><a href="#" role="menuitem">Menu Item 1</a></li><li class="active"><a href="#" role="menuitem">Menu Item 2</a></li><li><a href="#" role="menuitem">Menu Item 3</a></li></ul></li><li class="has-dropdown"><a href="#" tabindex="0">A dropdown Menu</a><ul role="menu"><li><a href="#" role="menuitem">Menu Item 1</a></li><li><a href="#" role="menuitem">Menu Item 2</a></li><li><a href="#" role="menuitem">Menu Item 3</a></li></ul></li></ul></div></menu>
</div><span class="button show-code" data-open-component="top-menu">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="top-menu">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="hero">Hero Image</h3>
<p>A hero image can sit beneath the menu and spans the full width of the screen.</p>
<p>Using a class of <code>.slim</code> squeezes the image to take up less vertical space. This is more appropriate for non-home pages.</p>
<p>Using a class of <code>.outline</code> adds an oval cutout overlay to the image. Be sure to test any images on all screen sizes to make sure important focal points are not cropped</p>
<div class="breakout"><div class="hero"><img src="https://unsplash.it/1200/400/?random" alt="A hero image"/></div>
</div><span class="button show-code" data-open-component="hero">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="hero">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="alert">Alert Message</h3>
<p>Alert messages can be displayed above or below the menu & hero for urgent messages to catch the user's attention.</p>
<p>Alert messages can be made dismissable by adding a <code>.close</code> span.</p>
<div class="breakout"><section class="message alert" role="status"><p>We’re recruiting! <a href="#">Click here</a> to discover our fantastic career opportunities and start your journey today</p></section>
</div><span class="button show-code" data-open-component="alert">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="alert">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="sub-menu">Sub-menu</h3>
<p>The submenu component can be used to help users navigate between pages or screens within the current section.</p>
<p>Active menu items (the page the user is currently on) should be given the <code>.active</code> class to highlight them</p>
<div class="breakout"><nav class="sub-menu"><ul><li><a href="#">Menu Item 1</a></li><li class="active"><a href="#">Active Menu Item</a></li><li><a href="#">Menu Item 3</a></li></ul></nav>
</div><span class="button show-code" data-open-component="sub-menu">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="sub-menu">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="quick-links">Quick Links</h3>
<p>An eye-catching navigation with big icons can be used for directing users to the most common pages and actions of a website or application.</p>
<p>The links on the menu should be consistent throughout the application to help users learn the pattern.</p>
<div class="breakout"><nav class="quick"><ul><li class="tablet"><a href="#">Products</a></li><li class="van"><a href="#">Services</a></li><li class="map"><a href="#">Reviews</a></li><li class="box"><a href="#">Case Studies</a></li><li class="laptop"><a href="#">Login</a></li></ul></nav><main><div class="content"><h4>Varying number of links</h4><p>The default amount of links in the quick link bar should be 5. If you need to have 4 or 6 link the classes <code>.four</code> and <code>.six</code> should be used to neatly arrange the spacing.</p><h4>Icons</h4><p>Icons are added to links with a class, the 5 icons shown here are using <code>.tablet</code>, <code>.van</code>, <code>.map</code>, <code>.box</code> and <code>.laptop</code>. To add new icons you will need to define the <code>background-image: url()</code> with your own class</p></div><div class="sidebar no-bottom-pad"><h4>Vertical quick links</h4><p>Quick links can be displayed vertically (for use in sidebars etc) by adding the <code>.vertical</code> class. On small devices, vertical quick links are dispayed the same as horizontal.</p><nav class="quick vertical "><ul><li class="tablet"><a href="#">Products</a></li><li class="van"><a href="#">Services</a></li><li class="map"><a href="#">Reviews</a></li><li class="box"><a href="#">Case Studies</a></li><li class="laptop"><a href="#">Login</a></li></ul></nav></div></main>
</div><span class="button show-code" data-open-component="quick-links">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="quick-links">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="card">Floating Card</h3>
<p>Floating cards can be useful for displaying single or repeating modules on a page, such as tweets or news stories. Cards fill the horizontal space they are in and stretch vertically to contain the content.</p>
<p>Cards can contain a <code><time></code> or a <code><span class="meta"></code> element, a header, paragraphs and link. If the card has a link, the header and time should also be linked.</p>
<p>Cards with a class of <code>.flat</code> will have a grey background. Cards with a class of <code>.shadow</code> will have a shadow effect.</p><div class="nest"><div class="sidebar"><article class="card"><span class="meta"></span><span class="meta"><a href="#" tabindex="-1">12th December 16</a></span><h4><a href="#">News Item Title</a></h4><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href="#">Read more...</a></article></div><div class="sidebar"><article class="card flat"><span class="meta"></span><span class="meta"><a href="#" tabindex="-1">Job Title</a></span><h4><a href="#">Class 1 Driver</a></h4><p>We are currently looking to recruit a driver to join the existing well established team.</p><a href="#">Apply now...</a></article></div><div class="sidebar"><article class="card shadow"><span class="meta"></span><span class="meta"><a href="#" tabindex="-1">12th December 16</a></span><h4><a href="#">News Item Title</a></h4><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href="#">Read more...</a></article></div></div><span class="button show-code" data-open-component="card">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="card">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="breadcrumbs">Breadcrumbs</h3>
<p>On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation.</p><ul class="breadcrumbs"><li><a href="#">Home</a></li><li><a href="#">Category</a></li><li><a href="#">Sub-Category</a></li><li>Current</li></ul><span class="button show-code" data-open-component="breadcrumbs">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="breadcrumbs">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="pagination">Pagination</h3>
<p>When there is too much content for one page, we should make it easy for users to browse, skim or skip between pages. On small screens only the next and previous buttons are shown.</p><div><ul class="pagination" role="navigation" aria-label="Pagination"><li class="pagination-previous"><a href="#10">Previous <span class="show-for-sr">page</span></a></li><li><a href="#" aria-label="Page 1">1</a></li><li><a href="#10" aria-label="Page 2">2</a></li><li class="current"><span class="show-for-sr">You're on page</span> 3</li><li><a href="#30" aria-label="Page 4">4</a></li><li class="ellipsis" aria-hidden="true"></li><li><a href="#120" aria-label="Page 13">13</a></li><li><a href="#130" aria-label="Page 14">14</a></li><li class="pagination-next"><a href="#30">Next <span class="show-for-sr">page</span></a></li></ul></div><span class="button show-code" data-open-component="pagination">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="pagination">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="tab">Tabs</h3>
<p>To save on-screen space we can use tabbed content to alternate between views within the same context, whilst staying on the same page.</p><div class="tabs"><ul role="tablist"><li><a role="tab" href="#tab-1" tabindex="0" data-tab="1">Tab 1</a></li><li class="active"><a role="tab" href="#tab-2" tabindex="0" data-tab="2">Tab 2</a></li><li><a role="tab" href="#tab-3" tabindex="0" data-tab="3">Tab 3</a></li><li><a role="tab" href="#tab-4" tabindex="0" data-tab="4">Tab 4</a></li></ul><div class="panel" role="tabpanel" id="tab-1" data-tab="1"><h2>This is tab 1</h2><p>Some tab content</p></div><div class="panel active" role="tabpanel" id="tab-2" data-tab="2"><h2>This is tab 2</h2><p>Some tab content</p></div><div class="panel" role="tabpanel" id="tab-3" data-tab="3"><h2>This is tab 3</h2><p>Some tab content</p></div><div class="panel" role="tabpanel" id="tab-4" data-tab="4"><h2>This is tab 4</h2><p>Some tab content</p></div></div><span class="button show-code" data-open-component="tab">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="tab">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="progress">Progress Bar</h3>
<p>A progress bar can be used to give an indication to users of how far through their wait they are. The <code><progress></code> element is used and the progress is set with the <code>value</code> and <code>max</code> attributes. The percentage can be shown in-line by adding the <code>.show-percent</code> class.</p><progress value="30" max="100"></progress><progress class="show-percent" value="80" max="100"></progress><progress class="show-percent" value="55" max="100"></progress>
</div>
<hr>
<div class="component">
<h3 id="login">Login Screen</h3>
<p>The login screen can be used inline (within another page) or floated alone on a full page.</p>
<p>Users should be allowed to log in with their email address. If this is not technically possible, a link to instructions on how to find their username/user id etc should be provided underneath the relevant field.</p>
<p>No mixin / sample code is provided for this element because there are too many variables. Check the <code>docs.pug</code> source code for this example.</p>
<div class="breakout"><div class="login-page"><form class="login" action="#" method="post"><h1>Login to My App</h1><div><label for="email">Your email address:</label><input type="email" id="email" name="email"/></div><div><label for="password">Password:</label><input type="text" id="password" name="password"/><span><a href="#">Forgotten your password?</a></span></div><div><a class="login-go" href="#">Login</a></div><div class="login-signup"><p>Don't have an account? <a href="#">Sign Up</a></p></div></form></div>
</div>
</div>
<hr>
<div class="component">
<h3 id="closeable">Closeable Elements</h3>
<p>Sometimes elements need to be closeable by the user. The helper class <code>.closeable</code> can be combined with a <code><span class="close">Close</span></code> element to add a close button to any element. The styles for this are an attempt at <em>one-size fits all</em> so they may need to be tweaked for each use case.</p><div class="nest"><div class="sidebar"><article class="card flat closeable"><span class="meta"></span><span class="meta"><a href="#" tabindex="-1">12th December 16</a></span><h4><a href="#">News Item Title</a></h4><span class="close">Close</span><p>Don't forget, you can stay updated with all our latest news by visiting our website!</p><a href="#">Read more...</a></article></div></div>
</div>
<hr>
<div class="component">
<h3 id="banner">Banner Message</h3>
<p>Banner callouts can be useful for displaying a quick eye-catching message. A logo can be included with the <code>.logo</code> class or the text can be centred with a <code>.center</code> class.</p>
<div class="breakout"><section class="banner logo "><div><h2>A fancy strapline</h2><h3>Call us on 0800 00 00 00</h3></div></section>
</div><span class="button show-code" data-open-component="banner">Show Code and Live Preview</span>
<div class="code" data-pug="data-pug" data-component="banner">
<div class="pug">
<h4>Pug Mixin</h4>
<p class="mixin-call"></p>
<h5>Parameters</h5>
<form action="#"></form>
<div class="blockField">
<h5>Block content</h5>
</div>
</div>
<div class="html">
<h5>Mixin Call</h5><code class="mixin block typescript"></code>
<h5>HTML Output</h5><code class="output block xml"></code>
</div>
<div class="result">
<h5>Live Preview</h5>
<div class="stage"></div>
</div>
</div>
</div>
<hr>
<div class="component">
<h3 id="footer">Footer</h3>
<p>The footer sits at the bottom of the screen and can contain 3 horizontal sections. It can be used for re-iterating navigation or adding extra information and links.</p>
<p>No mixin / sample code is provided for this element because there are too many variables. Check the <code>docs.pug</code> source code for this example.</p>
<div class="breakout"><footer><div class="top"><div class="contain"><aside><h2>Style Guider - Generate style guides</h2><p>It's really good!</p><ul><li>Call on: 0800 00 00 00 <sup>*</sup></li><li>Email: <a href="">[email protected]</a></li><li><small>* Calls may be recorded</small></li></ul></aside><nav><h4>Some Navigation</h4><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Awards</a></li><li><a href="#">Corporate Social Responsibility</a></li><li><a href="#">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Awards</a></li><li><a href="#">Corporate Social Responsibility</a></li><li><a href="#">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Awards</a></li><li><a href="#">Corporate Social Responsibility</a></li><li><a href="#">Careers</a></li></ul></nav><nav><h4>More Navigation</h4><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Awards</a></li><li><a href="#">Corporate Social Responsibility</a></li><li><a href="#">Careers</a></li></ul></nav></div></div><div class="middle"><div class="contain"><span class="copyright">© 2017 Ian Egner</span><nav><ul><li><a href="#">A text link</a></li><li><a href="#">A text link</a></li><li><a href="#">A text link</a></li><li><a href="#">A text link</a></li><li><a href="#">A text link</a></li></ul></nav></div></div><div class="bottom"><p>Some Company Name, Some Address, Some Town, Some County, Some Postcode</p><p>Registered in England and Wales No. Some Company Number - VAT Registration No. Some VAT number</p></div></footer>
</div>
</div>
</div>
</main>
<script src="docs/js/jquery.js"></script>
<script src="docs/js/jquery-ui.js"></script>
<script src="docs/js/scripts.js"></script>
<script src="docs/js/pug.js"></script>
<script src="docs/js/highlight.min.js"></script>
<script src="docs/js/docs.js"></script>
</body>
</html>