PageSourceSearch

https://outline-css.surge.sh/get-started.html

html outline-css.surge.sh collected 2026-10-03 14:56:07 UTC 63,804 bytes, 1,908 lines download raw bytes

1<!--
2  _    _ _                           _
3 | |  | (_)                         | |
4 | |__| |_ _ __ ___   _ __ ___   ___| |
5 |  __  | | '__/ _ \ | '_ ` _ \ / _ \ |
6 | |  | | | | |  __/ | | | | | |  __/_|
7 |_|  |_|_|_|  \___| |_| |_| |_|\___(_)
8
9Need a Front End Developer? Take my card.
10http://matt-harris.net/take-my-card.html
11-->
12<!DOCTYPE html>
13<html lang="en">
14  <head>
15    <meta charset="utf-8" />
16    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
17    <title>Outline - The clean & simple responsive CSS framework.</title>
18    <meta name="description" content="" />
19    <meta name="viewport" content="width=device-width, initial-scale=1" />
20    <!-- favicon -->
21    <link rel="shortcut icon" href="favicon.ico" />
22    <link rel="apple-touch-icon-precomposed" href="favicon-152.png" />
23    <meta name="msapplication-TileColor" content="#38a1d6" />
24    <meta name="msapplication-TileImage" content="favicon-152.png" />
25    <!-- google fonts -->
26    <link
27      href="//fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather:400,400italic,700,700italic"
28      rel="stylesheet"
29      type="text/css"
30    />
31    <!-- site style -->
32    <link href="css/outline.min.css" media="all" rel="stylesheet" type="text/css" />
33    
33<script src="js/min/modernizr.custom.js"></script>
33
34  </head>
35  <body>
36    <div class="clearfix" role="main">
37      <div class="sidebar hide-for-medium-down">
38        <a class="logo" href="/">
39          <img src="img/min/logo.png" width="200" alt="Outline CSS framework" />
40        </a>
41
42        <nav>
43          <ul class="sidebar__nav list--unstyled">
44            <li>
45              <a href="#get-started" data-scroll>Get started</a>
46              <ul>
47                <li>
48                  <a href="#overview" data-scroll>Overview</a>
49                </li>
50              </ul>
51            </li>
52            <li>
53              <a href="#susy" data-scroll>Susy</a>
54            </li>
55            <li>
56              <a href="#colours" data-scroll>Colours</a>
57            </li>
58            <li>
59              <a href="#breakpoints" data-scroll>Breakpoints</a>
60            </li>
61            <li>
62              <a href="#typography" data-scroll>Typography</a>
63              <ul>
64                <li>
65                  <a href="#headings" data-scroll>Headings</a>
66                </li>
67                <li>
68                  <a href="#fonts" data-scroll>Fonts</a>
69                </li>
70                <li>
71                  <a href="#body" data-scroll>Body</a>
72                </li>
73                <li>
74                  <a href="#links" data-scroll>Links</a>
75                </li>
76                <li>
77                  <a href="#hr" data-scroll>Horizonal line</a>
78                </li>
79                <li>
80                  <a href="#blockquote" data-scroll>Blockquote</a>
81                </li>
82                <li>
83                  <a href="#figure" data-scroll>Figure</a>
84                </li>
85              </ul>
86            </li>
87            <li>
88              <a href="#components" data-scroll>Components</a>
89              <ul>
90                <li>
91                  <a href="#buttons" data-scroll>Buttons</a>
92                </li>
93                <li>
94                  <a href="#code" data-scroll>Code</a>
95                </li>
96                <li>
97                  <a href="#embed" data-scroll>Embed</a>
98                </li>
99                <li>
100                  <a href="#forms" data-scroll>Forms</a>
101                </li>
102                <li>
103                  <a href="#lists" data-scroll>Lists</a>
104                </li>
105                <li>
106                  <a href="#media-objects" data-scroll>Media objects</a>
107                </li>
108                <li>
109                  <a href="#pagination" data-scroll>Pagination</a>
110                </li>
111                <li>
112                  <a href="#tables" data-scroll>Tables</a>
113                </li>
114              </ul>
115            </li>
116            <li>
117              <a href="#utilities" data-scroll>Utilities</a>
118              <ul>
119                <li>
120                  <a href="#variables" data-scroll>Variables</a>
121                </li>
122                <li>
123                  <a href="#helpers" data-scroll>Helpers</a>
124                </li>
125                <li>
126                  <a href="#mixins" data-scroll>Mixins</a>
127                </li>
128                <li>
129                  <a href="#functions" data-scroll>Functions</a>
130                </li>
131              </ul>
132            </li>
133            <li>
134              <a href="#vendor" data-scroll>Vendor</a>
135              <ul>
136                <li>
137                  <a href="#font-awesome" data-scroll>Font awesome</a>
138                </li>
139              </ul>
140            </li>
141          </ul>
142        </nav>
143      </div>
144
145      <div class="docs">
146        <div class="nav-bar clearfix">
147          <a class="logo hide-for-medium-up float-left" href="/">
148            <img src="img/min/logo.png" alt="Outline CSS framework" />
149          </a>
150
151          <i class="nav-icon" id="trigger-overlay"></i>
152
153          <div class="nav-overlay">
154            <i class="nav-close"></i>
155            <nav class="nav">
156              <ul>
157                <li class="nav__item">
158                  <a href="/">Home</a>
159                </li>
160                <li class="nav__item">
161                  <a href="get-started.html">Get started</a>
162                </li>
163                <li class="nav__item">
164                  <a href="https://github.com/matt-harris/outline">View on GitHub</a>
165                </li>
166                <li class="nav__item">
167                  <a href="http://outline-mail.surge.sh/" target="_blank"
168                    >Outline Email framework</a
169                  >
170                </li>
171              </ul>
172            </nav>
173          </div>
174        </div>
175
176        <div class="docs__content clearfix">
177          <section class="docs__item" id="get-started">
178            <h1 class="docs__heading">Get started</h1>
179
180            <p>There are a few ways to get started with Outline.</p>
181
182            <p>
183              Download the
184              <a href="https://github.com/matt-harris/outline/archive/master.zip">latest release</a>
185              from GitHub.
186            </p>
187
188            <p>Install with Bower</p>
189
190            <pre><code>bower install outline</code></pre>
191
192            <p>
193              To clone the <a href="https://github.com/matt-harris/outline">git repository</a>. Just
194              run the following command.
195            </p>
196
197            <pre><code>[sudo] git clone [email protected]:matt-harris/outline.git</code></pre>
198          </section>
199
200          <section class="docs__item" id="overview">
201            <h2 class="docs__heading">Overview</h2>
202
203            <h4>Compiling Sass</h4>
204
205            <p>
206              You will need a Sass compiler to watch and compile your Sass files into a CSS file.
207            </p>
208
209            <p>
210              Outline uses <a href="http://gulpjs.com/">gulp.js</a>
210 to watch and compile the Sass
211              files but also makes use of build tasks including
212              <a href="https://github.com/postcss/autoprefixer">autoprefixer</a>, minifying files,
213              JS file concatenation, image compression and browser refresh. Outline comes with a
214              fully commented <code>gulpfile.js</code> and <code>package.json</code> file which
215              lists the plugins used. For more information about getting sarted with gulp read this
216              excellent
217              <a href="http://markgoodyear.com/2014/01/getting-started-with-gulp/"
218                >intro by Mark Goodyear</a
219              >
220            </p>
221
222            <p>
223              Of course you can also use a compiler / build tool of your choice. A couple of the
224              more popular options are:-
225            </p>
226
227            <ul>
228              <li><a href="https://prepros.io/">Prepros</a></li>
229              <li><a href="https://incident57.com/codekit/">CodeKit</a></li>
230              <li><a href="http://gruntjs.com/">Grunt</a></li>
231            </ul>
232
233            <h4>Writing CSS</h4>
234
235            <p>
236              Outline follows the BEM (Block, Element, Modifier) method for writing &amp; organising
237              CSS. BEM helps keep CSS logical and predictable. The naming convention follows this
238              pattern:
239            </p>
240
241            <pre><code>.block {}
242.block__element {}
243.block__element--modifier {}
244</code></pre>
245
246            <ul>
247              <li>.block represents the higher level of an abstraction or component.</li>
248              <li>
249                .block__element represents a descendent of .block that helps form .block as a whole.
250              </li>
251              <li>.block--modifier represents a different state or version of .block.</li>
252            </ul>
253
254            <p>
255              For more information about BEM, read
256              <a
257                href="http://www.csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/"
258                >this</a
259              >
260              and <a href="https://css-tricks.com/bem-101/">this</a>.
261            </p>
262
263            <h4>Writing Sass</h4>
264
265            <p>
266              Have a read of the excellent <a href="http://sass-guidelin.es/">Sass guidelines</a>.
267              It's a styleguide for Sass that helps everyone to write maintainable and scalable
268              Sass.
269            </p>
270
271            <h4>Start creating your HTML</h4>
272
273            <p>I’ve included <code>index.html</code> as a starting point.</p>
274          </section>
275
276          <hr class="hr-alt" />
277
278          <section class="docs__item" id="susy">
279            <h2 class="docs__heading">Susy</h2>
280
281            <p>
282              <a href="http://susy.oddbird.net/">Susy</a> [soo-zee], is a Sass add on for grids.
283              Susy allows you to build custom responsive grids on demand, rather than a framework.
284              This allows you to:-
285            </p>
286
287            <ul>
288              <li>Separate style from markup</li>
289              <li>Simple modular maintenance</li>
290              <li>Only need to write necessary CSS (No bloat)</li>
291            </ul>
292
293            <p>
294              I have created a
295              <a href="http://codepen.io/collection/DKpqjq/">Codepen collection</a> of example Susy
296              layouts.
297            </p>
298
299            <blockquote>
300              <p>I like the idea of grids-on-demand, rather than a strict framework.</p>
301              <cite>— Chris Coyier, CodePen</cite>
302            </blockquote>
303
304            <h4>Resources</h4>
305
306            <ul>
307              <li>
308                <a href="http://susy.oddbird.net/demos/">A list of Susy tutorials</a>
309              </li>
310              <li>
311                <a href="http://leveluptuts.com/tutorials/susy-tutorials"
312                  >Susy Tutorials - 11 Parts (video)</a
313                >
314              </li>
315              <li>
316                <a href="http://css-tricks.com/build-web-layouts-easily-susy/"
317                  >Build Web Layouts Easily with Susy</a
318                >
319              </li>
320            </ul>
321          </section>
322
323          <hr class="hr-alt" />
324
325          <section class="docs__item" id="colours">
326            <h2 class="docs__heading">Colours</h2>
327
328            <h4>Palette</h4>
329
330            <div class="swatch">
331              <div class="swatch__colour bg-primary"></div>
332              <div class="swatch__text">Primary</div>
333            </div>
334
335            <div class="swatch">
336              <div class="swatch__colour bg-secondary"></div>
337              <div class="swatch__text">Secondary</div>
338            </div>
339
340            <div class="swatch">
341              <div class="swatch__colour bg-tertiary"></div>
342              <div class="swatch__text">Tertiary</div>
343            </div>
344
345            <div class="swatch">
346              <div class="swatch__colour bg-grey"></div>
347              <div class="swatch__text">Grey</div>
348            </div>
349
350            <div class="swatch">
351              <div class="swatch__colour bg-grey-light"></div>
352              <div class="swatch__text">Light grey</div>
353            </div>
354
355            <div class="swatch">
356              <div class="swatch__colour bg-grey-dark"></div>
357              <div class="swatch__text">Dark grey</div>
358            </div>
359
360            <h4>Helper colours</h4>
361
362            <p>
363              You add background and text colours to your project. You can add these classes to a
364              tag e.g <code>.bg-primary</code> or use <code>@extend</code> e.g.
365              <code>@extend %bg-primary</code>.
366            </p>
367
368            <pre><code>// background colours
369.bg-primary // $color-primary
370.bg-secondary // $color-secondary
371.bg-tertiary // $color-tertiary
372.bg-grey // $color-grey
373.bg-grey-light // $color-grey-light
374.bg-grey-dark // $color-grey-dark
375.bg-white // #fff
376
377// text colours
378.text-primary // $color-primary
379.text-secondary // $color-secondary
380.text-tertiary // $color-tertiary
381.text-grey // $color-grey
382.text-grey-light // $color-grey-light
383.text-white // #fff
384</code></pre>
385          </section>
386
387          <hr class="hr-alt" />
388
389          <section class="docs__item" id="breakpoints">
390            <h2 class="docs__heading">Breakpoints</h2>
391
392            <p>
393              Outline uses the following breakpoints as a starting point. To add new breakpoints go
394              into the <code>utils/_variables.scss</code> file and add a new breakpoint variable.
395            </p>
396
397            <pre><code>$mobile-landscape: 30rem; // 480px
398$tablet: 40rem; // 640px
399$tablet-wide: 48rem; // 768px
400$desktop: 64rem; // 1024px
401$widescreen: 71.25rem; // 1140px
402</code></pre>
403          </section>
404
405          <hr class="hr-alt" />
406
407          <section class="docs__item" id="typography">
408            <h2 class="docs__heading">Typography <code>base/_typography.scss</code></h2>
409          </section>
410
411          <section class="docs__item" id="headings">
412            <h1>Heading 1</h1>
413            <h2>Heading 2</h2>
414            <h3>Heading 3</h3>
415            <h4>Heading 4</h4>
416            <h5>Heading 5</h5>
417            <h6>Heading 6</h6>
418
419            <pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
420&lt;h2&gt;Heading 2&lt;/h2&gt;
421&lt;h3&gt;Heading 3&lt;/h3&gt;
422&lt;h4&gt;Heading 4&lt;/h4&gt;
423&lt;h5&gt;Heading 5&lt;/h5&gt;
424&lt;h6&gt;Heading 6&lt;/h6&gt;
425</code></pre>
426          </section>
427
428          <section class="docs__item" id="fonts">
429            <h2 class="docs__heading">Fonts</h2>
430
431            <p>Outline uses a google font combination of Lato and Merriweather.</p>
432
433            <p class="font-primary">This is the Merriweather font included in Outline.</p>
434
435            <p class="font-secondary">This is the Lato font included in Outline.</p>
436
437            <p>
438              To change the fonts goto <a href="http://www.google.com/fonts">Google fonts</a>,
439              select the fonts you require and then replace the following code on your website with
440              the new code provided.
441            </p>
442
443            <pre><code>&lt;link href=&quot;//fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather:400,400italic,700,700italic&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
444</code></pre>
445          </section>
446
447          <section class="docs__item" id="body">
448            <h2 class="docs__heading">Body</h2>
449
450            <h4>Paragragh</h4>
451
452            <p>
453              All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me
454              luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter
455              wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone
456              and done it hark at ee fornbree excepteur glider me babber.
457            </p>
458
459            <pre><code>&lt;p&gt;All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider me babber.&lt;/p&gt;
460</code></pre>
461
462            <h4>Lead text</h4>
463
464            <p class="lead">
465              All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me
466              luvver tamorra dint aute as-dal.
467            </p>
468
469            <pre><code>&lt;p class=&quot;lead&quot;&gt;...&lt;/p&gt;
470</code></pre>
471
472            <h4>Small</h4>
473
474            <small>This text is small.</small>
475
476            <p class="text-small">This text is small.</p>
477
478            <pre><code>&lt;small&gt;This text is small.&lt;/small&gt;
479&lt;p class=&quot;text-small&quot;&gt;This text is small&lt;/p&gt;
480</code></pre>
481
482            <h4>Muted</h4>
483
484            <p class="text-muted">This text is muted.</p>
485
486            <pre><code>&lt;p class=&quot;text-muted&quot;&gt;This text is muted.&lt;/p&gt;
487</code></pre>
488
489            <h4>Hyphenate</h4>
490
491            <h6 class="hyphenate">ThisIsAReallyLongWordAndDoesNotBreakLayout</h6>
492
493            <pre><code>&lt;h3 class=&quot;hyphenate&quot;&gt;ThisIsAReallyLongWordAndDoesNotBreakLayout&lt;/h3&gt;
494</code></pre>
495
496            <h4>Strong</h4>
497
498            <p>This text is <strong>strong</strong>.</p>
499
500            <pre><code>&lt;p&gt;This text is &lt;strong&gt;strong&lt;/strong&gt;.&lt;/p&gt;
501</code></pre>
502
503            <h4>
503Emphasis</h4>
504
505            <p>This text is <em>emphasised</em>.</p>
506
507            <pre><code>&lt;p&gt;This text is &lt;em&gt;emphasised&lt;/em&gt;.&lt;/p&gt;
508</code></pre>
509
510            <h4>Subscript &amp; Superscript</h4>
511
512            <p>This text is <sub>subscripted</sub></p>
513
514            <p>This text is <sup>superscripted</sup></p>
515
516            <pre><code>&lt;p&gt;This text is &lt;sub&gt;subscripted&lt;/sub&gt;&lt;/p&gt;
517&lt;p&gt;This text is &lt;sup&gt;superscripted&lt;/sup&gt;&lt;/p&gt;
518</code></pre>
519
520            <h4>Mark</h4>
521
522            <p>The <code>&lt;mark&gt;</code> element is used to <mark>highlight</mark> text.</p>
523
524            <pre><code>&lt;p&gt;The &lt;code&gt;&lt;mark&gt;&lt;/code&gt; element is used to &lt;mark&gt;highlight&lt;/mark&gt; text.&lt;/p&gt;
525</code></pre>
526          </section>
527
528          <section class="docs__item" id="links">
529            <h2 class="docs__heading">Links</h2>
530
531            <p>
532              This is the <a href="#">link</a> style. Text hyperlinks are used for
533              <a href="#">destinations</a>, or moving from one page to <a href="#">another</a>.
534            </p>
535
536            <pre><code>&lt;p&gt;This is the &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt; style. Text hyperlinks are used for &lt;a href=&quot;#&quot;&gt;destinations&lt;/a&gt;, or moving from one page to &lt;a href=&quot;#&quot;&gt;another&lt;/a&gt;.&lt;/p&gt;
537</code></pre>
538          </section>
539
540          <section class="docs__item" id="hr">
541            <h2 class="docs__heading">Horizontal line</h2>
542
543            <hr />
544
545            <pre><code>&lt;hr&gt;</code></pre>
546          </section>
547
548          <section class="docs__item" id="blockquote">
549            <h2 class="docs__heading">Blockquote</h2>
550
551            <blockquote>
552              <p>
553                Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric
554                me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider.
555              </p>
556              <cite>Brizzle Ipsum, Made in Bristol</cite>
557            </blockquote>
558
559            <pre><code>&lt;blockquote&gt;
560  &lt;p&gt;Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider.&lt;/p&gt;
561  &lt;cite&gt;Brizzle Ipsum, Made in Bristol&lt;/cite&gt;
562&lt;/blockquote&gt;
563</code></pre>
564          </section>
565
566          <section class="docs__item" id="figure">
567            <h2 class="docs__heading">Figure</h2>
568
569            <figure>
570              <img src="img/min/16x9-img-placholder.png" />
571              <figcaption>This is a caption for the above image.</figcaption>
572            </figure>
573
574            <pre><code>&lt;figure&gt;
575  &lt;img src=&quot;img/min/16x9-img-placholder.png&quot; &gt;
576  &lt;figcaption&gt;This is a caption for the above image.&lt;/figcaption&gt;
577&lt;/figure&gt;
578</code></pre>
579          </section>
580
581          <hr class="hr-alt" />
582
583          <section class="docs__item" id="components">
584            <h2 class="docs__heading">Components</h2>
585          </section>
586
587          <section class="docs__item" id="buttons">
588            <h2 class="docs__heading">Buttons <code>components/_buttons.scss</code></h2>
589
590            <p>
591              Buttons are created using the <code>button</code> element or adding the
592              <code>.btn</code> class to any element. You can add some of the following classes
593              below to get different design combinations.
594            </p>
595
596            <button type="button">Default</button>
597            <a class="btn" href="#" role="button">Default</a>
598
599            <pre><code>&lt;button type=&quot;button&quot;&gt;Default&lt;/button&gt;
600&lt;a class=&quot;btn&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Default&lt;/a&gt;
601</code></pre>
602
603            <h4>Colours</h4>
604
605            <button class="btn--primary" type="button">Colour Primary</button>
606            <button class="btn--secondary" type="button">Colour Secondary</button>
607            <button class="btn--tertiary" type="button">Colour Tertiary</button>
608            <button class="btn--grey" type="button">Colour Grey</button>
609
610            <pre><code>&lt;button class=&quot;btn--primary&quot; type=&quot;button&quot;&gt;Colour Primary&lt;/button&gt;
611&lt;button class=&quot;btn--secondary&quot; type=&quot;button&quot;&gt;Colour Secondary&lt;/button&gt;
612&lt;button class=&quot;btn--tertiary&quot; type=&quot;button&quot;&gt;Colour Tertiary&lt;/button&gt;
613&lt;button class=&quot;btn--grey&quot; type=&quot;button&quot;&gt;Colour Grey&lt;/button&gt;
614</code></pre>
615
616            <h4>Sizes</h4>
617
618            <button class="btn--small" type="button">Small</button>
619            <button class="btn" type="button">Default</button>
620            <button class="btn--large" type="button">Large</button>
621            <button class="btn--xlarge" type="button">Xtra Large</button>
622
623            <pre><code>&lt;button class=&quot;btn--small&quot; type=&quot;button&quot;&gt;Small&lt;/button&gt;
624&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;Default&lt;/button&gt;
625&lt;button class=&quot;btn--large&quot; type=&quot;button&quot;&gt;Large&lt;/button&gt;
626&lt;button class=&quot;btn--xlarge&quot; type=&quot;button&quot;&gt;Xtra Large&lt;/button&gt;
627</code></pre>
628
629            <h4>Styles</h4>
630
631            <button class="btn--rounded" type="button">Rounded</button>
632            <button class="btn--pill" type="button">Pill</button>
633            <button class="btn--ghost" type="button">Ghost</button>
634
635            <pre><code>&lt;button class=&quot;btn--rounded&quot; type=&quot;button&quot;&gt;Rounded&lt;/button&gt;
636&lt;button class=&quot;btn--pill&quot; type=&quot;button&quot;&gt;Pill&lt;/button&gt;
637&lt;button class=&quot;btn--ghost&quot; type=&quot;button&quot;&gt;Ghost&lt;/button&gt;
638</code></pre>
639
640            <h4>Block</h4>
641
642            <button class="btn--block" type="button">Block</button>
643
644            <pre><code>&lt;button class=&quot;btn--block&quot; type=&quot;button&quot;&gt;Block&lt;/button&gt;
645</code></pre>
646          </section>
647
648          <section class="docs__item" id="code">
649            <h2 class="docs__heading">Code <code>components/_code.scss</code></h2>
650
651            <p>
652              A block of code should be contained within <code>&lt;pre&gt;</code> and
653              <code>&lt;code&gt;</code> tags.
654            </p>
655
656            <pre><code>&lt;pre&gt;&lt;code&gt;.text {
657  color: red;
658}
659
660.footer .text {
661  color: blue;
662}&lt;/code&gt;&lt;/pre&gt;
663</code></pre>
664
665            <p>
666              Wrap inline code within the <code>&lt;code&gt;</code> element e.g. This is a
667              <code>&lt;table&gt;</code> tag.
668            </p>
669
670            <pre><code>&lt;p&gt;This is a &lt;code&gt;table&lt;/code&gt; tag.&lt;/p&gt;
671</code></pre>
672          </section>
673
674          <section class="docs__item" id="embed">
675            <h2 class="docs__heading">Embed <code>components/_embed.scss</code></h2>
676
677            <p>
678              To make embedded content responsive wrap it with the class <code>.embed-wrap</code>.
679            </p>
680
681            <pre><code>&lt;div class=&quot;embed-wrap&quot;&gt;
682  embedded content goes here...
683&lt;/div&gt;
684</code></pre>
685
686            <h4>YouTube example</h4>
687
688            <div class="embed-wrap">
689              <iframe
690                width="853"
691                height="480"
692                src="https://www.youtube.com/embed/kRmbVOI6oIM?rel=0"
693                frameborder="0"
694                allowfullscreen
695              ></iframe>
696            </div>
697
698            <pre><code>&lt;div class=&quot;embed-wrap&quot;&gt;
699  &lt;iframe width=&quot;853&quot; height=&quot;480&quot; src=&quot;https://www.youtube.com/embed/kRmbVOI6oIM?rel=0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
700&lt;/div&gt;
701</code></pre>
702
703            <h4>Vimeo example</h4>
704
705            <div class="embed-wrap">
706              <iframe
707                src="https://player.vimeo.com/video/67476280"
708                width="500"
709                height="281"
710                frameborder="0"
711                webkitallowfullscreen
712                mozallowfullscreen
713                allowfullscreen
714              ></iframe>
715            </div>
716
717            <pre><code>&lt;div class=&quot;embed-wrap&quot;&gt;
718  &lt;iframe src=&quot;https://player.vimeo.com/video/67476280&quot; width=&quot;500&quot; height=&quot;281&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
719&lt;/div&gt;
720</code></pre>
721
722            <h4>Google Maps</h4>
723
724            <div class="embed-wrap">
725              <iframe
726                width="425"
727                height="350"
728                frameborder="0"
729                scrolling="no"
730                marginheight="0"
731                marginwidth="0"
732                src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=bristol&amp;aq=&amp;sll=51.468489,-2.590709&amp;sspn=0.321233,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=Bristol,+City+of+Bristol,+United+Kingdom&amp;ll=51.468552,-2.590714&amp;spn=0.321332,0.837021&amp;t=m&amp;z=11&amp;output=embed&amp;iwloc=near"
733              ></iframe>
734            </div>
735
736            <pre><code>&lt;div class=&quot;embed-wrap&quot;&gt;
737  &lt;iframe width=&quot;425&quot; height=&quot;350&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=bristol&amp;aq=&amp;sll=51.468489,-2.590709&amp;sspn=0.321233,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=Bristol,+City+of+Bristol,+United+Kingdom&amp;ll=51.468552,-2.590714&amp;spn=0.321332,0.837021&amp;t=m&amp;z=11&amp;output=embed&amp;iwloc=near&quot;&gt;&lt;/iframe&gt;
738&lt;/div&gt;
739</code></pre>
740
741            <h4>Generic iFrame</h4>
742
743            <div class="embed-wrap">
744              <iframe
745                src="http://alistapart.com/article/responsive-web-design/"
746                style="border: 0"
747              ></iframe>
748            </div>
749
750            <pre><code>&lt;div class=&quot;embed-wrap&quot;&gt;
751  &lt;iframe src=&quot;http://alistapart.com/article/responsive-web-design/&quot; style=&quot;border:0&quot;&gt;&lt;/iframe&gt;
752&lt;/div&gt;
753</code></pre>
754          </section>
755
756          <section class="docs__item" id="forms">
757            <h2 class="docs__heading">Forms <code>components/_forms.scss</code></h2>
758
759            <p>
760              Default styles of form elements including labels, inputs, checkbox and radio controls,
761              selects, fieldsets and legends.
762            </p>
763
764            <h4>Fieldset</h4>
765
766            <form>
767              <fieldset>
768                <legend>Legend</legend>
769                <div class="form__row">
770                  <label for="fieldset-example">label:</label>
771                  <input type="text" id="fieldset-example" placeholder="Placeholder text example" />
772                </div>
773              </fieldset>
774            </form>
775
776            <pre><code>&lt;form&gt;
777  &lt;fieldset&gt;
778    &lt;legend&gt;Legend&lt;/legend&gt;
779      &lt;div class=&quot;form__row&quot;&gt;
780        &lt;label for=&quot;fieldset-example&quot;&gt;label:&lt;/label&gt;
781        &lt;input type=&quot;text&quot; id=&quot;fieldset-example&quot; placeholder=&quot;Placeholder text example&quot;&gt;
782      &lt;/div&gt;
783  &lt;/fieldset&gt;
784&lt;/form&gt;
785</code></pre>
786
787            <h4>Form elements</h4>
788
789            <form>
790              <div class="form__row">
791                <label for="text-input">Text input:</label>
792                <input type="text" id="text-input" placeholder="Text input" />
793              </div>
794
795              <div class="form__row">
796                <label for="date-input">Date input:</label>
797                <input type="date" id="date-input" placeholder="Date input" />
798              </div>
799
800              <div class="form__row">
801                <label for="email-input">Email input:</label>
802                <input type="email" id="email-input" placeholder="Email input" />
803              </div>
804
805              <div class="form__row">
806                <label for="number-input">Number input:</label>
807                <input type="number" id="number-input" placeholder="Number input" />
808              </div>
809
810              <div class="form__row">
811                <label for="password-input">Password input:</label>
812                <input type="password" id="password-input" placeholder="Password input" />
813              </div>
814
815              <div class="form__row">
816                <label for="search-input">Search input:</label>
817                <input type="search" id="search-input" placeholder="Search input" />
818              </div>
819
820              <div class="form__row">
821                <label for="tel-input">Telephone input:</label>
822                <input type="tel" id="tel-input" placeholder="Telephone input" />
823              </div>
824
825              <div class="form__row">
826                <label for="url-input">URL input:</label>
827                <input type="url" id="url-input" placeholder="URL input" />
828              </div>
829
830              <div class="form__row">
831                <label for="disabled-input">Disabled:</label>
832                <input type="text" id="disabled-input" disabled placeholder="Disabled" />
833              </div>
834
835              <div class="form__row">
836                <label for="textarea">Text area:</label>
837                <textarea id="textarea" placeholder="Write your message..."></textarea>
838              </div>
839
840              <div class="form__row">
841                <label>Select an option:</label>
842                <select>
843                  <option>Option 1</option>
844                  <option>Option 2</option>
845                  <option>Option 3</option>
846                </select>
847              </div>
848
849              <div class="form__row">
850                <label>
851                  <input type="checkbox" />
852                  Check box option
853                </label>
854              </div>
855
856              <div class="form__row">
857                <label>
858                  <input type="radio" name="radio" />
859                  Radio option
860                </label>
861              </div>
862
863              <input type="submit" value="Submit" />
864            </form>
865
866            <pre><code>&lt;form&gt;
867  &lt;div class=&quot;form__row&quot;&gt;
868    &lt;label for=&quot;text-input&quot;&gt;Text input:&lt;/label&gt;
869    &lt;input type=&quot;text&quot; id=&quot;text-input&quot; placeholder=&quot;Text input&quot;&gt;
870  &lt;/div&gt;
871
872  &lt;div class=&quot;form__row&quot;&gt;
873    &lt;label for=&quot;date-input&quot;&gt;Date input:&lt;/label&gt;
874    &lt;input type=&quot;date&quot; id=&quot;date-input&quot; placeholder=&quot;Date input&quot;&gt;
875  &lt;/div&gt;
876
877  &lt;div class=&quot;form__row&quot;&gt;
878    &lt;label for=&quot;email-input&quot;&gt;Email input:&lt;/label&gt;
879    &lt;input type=&quot;email&quot; id=&quot;email-input&quot; placeholder=&quot;Email input&quot;&gt;
880  &lt;/div&gt;
881
882  &lt;div class=&quot;form__row&quot;&gt;
883    &lt;label for=&quot;number-input&quot;&gt;Number input:&lt;/label&gt;
884    &lt;input type=&quot;number&quot; id=&quot;number-input&quot; placeholder=&quot;Number input&quot;&gt;
885  &lt;/div&gt;
886
887  &lt;div class=&quot;form__row&quot;&gt;
888    &lt;label for=&quot;password-input&quot;&gt;Password input:&lt;/label&gt;
889    &lt;input type=&quot;password&quot; id=&quot;password-input&quot; placeholder=&quot;Password input&quot;&gt;
890  &lt;/div&gt;
891
892  &lt;div class=&quot;form__row&quot;&gt;
893    &lt;label for=&quot;search-input&quot;&gt;Search input:&lt;/label&gt;
894    &lt;input type=&quot;search&quot; id=&quot;search-input&quot; placeholder=&quot;Search input&quot;&gt;
895  &lt;/div&gt;
896
897  &lt;div class=&quot;form__row&quot;&gt;
898    &lt;label for=&quot;tel-input&quot;&gt;Telephone input:&lt;/label&gt;
899    &lt;input type=&quot;tel&quot; id=&quot;tel-input&quot; placeholder=&quot;Telephone input&quot;&gt;
900  &lt;/div&gt;
901
902  &lt;div class=&quot;form__row&quot;&gt;
903    &lt;label for=&quot;url-input&quot;&gt;URL input:&lt;/label&gt;
904    &lt;input type=&quot;url&quot; id=&quot;url-input&quot; placeholder=&quot;URL input&quot;&gt;
905  &lt;/div&gt;
906
907  &lt;div class=&quot;form__row&quot;&gt;
908    &lt;label for=&quot;disabled-input&quot;&gt;Disabled:&lt;/label&gt;
909    &lt;input type=&quot;text&quot; id=&quot;disabled-input&quot; disabled placeholder=&quot;Disabled&quot;&gt;
910  &lt;/div&gt;
911
912  &lt;div class=&quot;form__row&quot;&gt;
913    &lt;label for=&quot;textarea&quot;&gt;Text area:&lt;/label&gt;
914    &lt;textarea id=&quot;textarea&quot; placeholder=&quot;Write your message...&quot;&gt;&lt;/textarea&gt;
915  &lt;/div&gt;
916
917  &lt;div class=&quot;form__row&quot;&gt;
918    &lt;label&gt;Select an option:&lt;/label&gt;
919    &lt;select&gt;
920      &lt;option&gt;Option 1&lt;/option&gt;
921      &lt;option&gt;Option 2&lt;/option&gt;
922      &lt;option&gt;Option 3&lt;/option&gt;
923    &lt;/select&gt;
924  &lt;/div&gt;
925
926  &lt;div class=&quot;form__row&quot;&gt;
927    &lt;label&gt;
928      &lt;input type=&quot;checkbox&quot;&gt;
929      Check box option
930    &lt;/label&gt;
931  &lt;/div&gt;
932
933  &lt;div class=&quot;form__row&quot;&gt;
934    &lt;label&gt;
935      &lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt;
936      Radio option
937    &lt;/label&gt;
938  &lt;/div&gt;
939
940  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
941&lt;/form&gt;
942</code></pre>
943
944            <h4>Form Inline</h4>
945
946            <form class="form--inline">
947              <div class="form__row">
948                <label for="inline-input">Name</label>
949                <input type="text" id="inline-input" placeholder="Your name" />
950              </div>
951
952              <div class="form__row">
953                <label for="inline-input2">Email</label>
954                <input type="text" id="inline-input2" placeholder="Your email" />
955              </div>
956
957              <div class="form__row--controls">
958                <label>
959                  <input type="checkbox" />
960                  Check box option
961                </label>
962              </div>
963
964              <div class="form__row--actions">
965                <input type="submit" value="Submit" />
966              </div>
967            </form>
968
969            <pre><code>&lt;form class=&quot;form--inline&quot;&gt;
970  &lt;div class=&quot;form__row&quot;&gt;
971    &lt;label for=&quot;inline-input&quot;&gt;Name&lt;/label&gt;
972    &lt;input type=&quot;text&quot; id=&quot;inline-input&quot; placeholder=&quot;Your name&quot;&gt;
973  &lt;/div&gt;
974
975  &lt;div class=&quot;form__row&quot;&gt;
976    &lt;label for=&quot;inline-input2&quot;&gt;Email&lt;/label&gt;
977    &lt;input type=&quot;text&quot; id=&quot;inline-input2&quot; placeholder=&quot;Your email&quot;&gt;
978  &lt;/div&gt;
979
980  &lt;div class=&quot;form__row--controls&quot;&gt;
981    &lt;label&gt;
982      &lt;input type=&quot;checkbox&quot;&gt;
983      Check box option
984    &lt;/label&gt;
985  &lt;/div&gt;
986
987  &lt;div class=&quot;form__row--actions&quot;&gt;
988    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
989  &lt;/div&gt;
990&lt;/form&gt;
991</code></pre>
992          </section>
993
994          <section class="docs__item" id="lists">
995            <h2 class="docs__heading">Lists <code>components/_lists.scss</code></h2>
996
997            <h4>Unordered</h4>
998
999            <ul>
1000              <li>
1001                One
1002                <ul>
1003                  <li>One nested</li>
1004                  <li>
1005                    Two nested
1006                    <ul>
1007                      <li>One nested</li>
1008                      <li>Two nested</li>
1009                    </ul>
1010                  </li>
1011                </ul>
1012              </li>
1013              <li>Two</li>
1014              <li>Three</li>
1015            </ul>
1016
1017            <pre><code>&lt;ul&gt;
1018  &lt;li&gt;...&lt;/li&gt;
1019&lt;/ul&gt;
1020</code></pre>
1021
1022            <h4>Ordered</h4>
1023
1024            <ol>
1025              <li>
1026                One
1027                <ol>
1028                  <li>One nested</li>
1029                  <li>
1030                    Two nested
1031                    <ol>
1032                      <li>One nested</li>
1033                      <li>Two nested</li>
1034                    </ol>
1035                  </li>
1036                </ol>
1037              </li>
1038              <li>Two</li>
1039              <li>Three</li>
1040            </ol>
1041
1042            <pre><code>&lt;ol&gt;
1043  &lt;li&gt;...&lt;/li&gt;
1044&lt;/ol&gt;
1045</code></pre>
1046
1047            <h4>Definition</h4>
1048
1049            <dl>
1050              <dt>Term 1</dt>
1051              <dd>Definition of term 1</dd>
1052              <dt>Term 2</dt>
1053              <dd>Definition of term 2</dd>
1054              <dt>Term 3</dt>
1055              <dd>Definition of term 3</dd>
1056            </dl>
1057
1058            <pre><code>&lt;dl&gt;
1059  &lt;dt&gt;...&lt;/dt&gt;
1060  &lt;dd&gt;...&lt;/dd&gt;
1061&lt;/dl&gt;
1062</code></pre>
1063
1064            <h4>Unstyled</h4>
1065
1066            <ul class="list--unstyled">
1067              <li>One</li>
1068              <li>Two</li>
1069              <li>Three</li>
1070            </ul>
1071
1072            <pre><code>&lt;ul class="list--unstyled"&gt;
1073  &lt;li&gt;...&lt;/li&gt;
1074&lt;/ul&gt;
1075</code></pre>
1076
1077            <h4>Inline</h4>
1078
1079            <ul class="list--inline">
1080              <li>One</li>
1081              <li>Two</li>
1082              <li>Three</li>
1083            </ul>
1084
1085            <pre><code>&lt;ul class="list--inline"&gt;
1086  &lt;li&gt;...&lt;/li&gt;
1087&lt;/ul&gt;
1088</code></pre>
1089          </section>
1090
1091          <section class="docs__item" id="media-objects">
1092            <h2 class="docs__heading">Media / Flag objects <code>components/_media.scss</code></h2>
1093
1094            <p>
1095              The
1096              <a
1097                href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code"
1098                >media object</a
1099              >
1100              places any image (item) and text content side by side.
1101            </p>
1102
1103            <p>
1104              The <a href="http://csswizardry.com/2
1104013/05/the-flag-object/">flag object</a> places
1105              any image (item) and text content side by side with vertical alignment.
1106            </p>
1107
1108            <h4>Media default</h4>
1109
1110            <div class="media">
1111              <img
1112                class="media__item example-mediaBlock__img"
1113                src="img/min/16x9-img-placholder.png"
1114                alt="Place holder for media object"
1115              />
1116              <p class="media__body">
1117                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
1118                incididunt ut labore et dolore magna aliqua.
1119              </p>
1120            </div>
1121
1122            <pre><code>&lt;div class=&quot;media&quot;&gt;
1123  &lt;img class=&quot;media__item&quot; src=&quot;img/min/16x9-img-placholder.png&quot; alt=&quot;Place holder for media object&quot;&gt;
1124  &lt;p class=&quot;media__body&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
1125&lt;/div&gt;
1126</code></pre>
1127
1128            <h4>Media reversed</h4>
1129
1130            <div class="media">
1131              <img
1132                class="media__item--reversed example-mediaBlock__img"
1133                src="img/min/16x9-img-placholder.png"
1134                alt="Place holder for media object"
1135              />
1136              <p class="media__body">
1137                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
1138                incididunt ut labore et dolore magna aliqua.
1139              </p>
1140            </div>
1141
1142            <pre><code>&lt;div class=&quot;media&quot;&gt;
1143  &lt;img class=&quot;media__item--reversed&quot; src=&quot;img/min/16x9-img-placholder.png&quot; alt=&quot;Place holder for media object&quot;&gt;
1144  &lt;p class=&quot;media__body&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
1145&lt;/div&gt;
1146</code></pre>
1147
1148            <h4>Flag default</h4>
1149
1150            <div class="flag">
1151              <div class="flag__item">
1152                <img
1153                  src="img/min/16x9-img-placholder.png"
1154                  alt="Place holder for glag object"
1155                  width="120"
1156                />
1157              </div>
1158              <div class="flag__body">
1159                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1160              </div>
1161            </div>
1162
1163            <pre><code>&lt;div class=&quot;flag&quot;&gt;
1164  &lt;div class=&quot;flag__item&quot;&gt;
1165    &lt;img src=&quot;img/min/16x9-img-placholder.png&quot; alt=&quot;Place holder for glag object&quot; width=&quot;120&quot;&gt;
1166  &lt;/div&gt;
1167  &lt;div class=&quot;flag__body&quot;&gt;
1168    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
1169  &lt;/div&gt;
1170&lt;/div&gt;
1171</code></pre>
1172
1173            <h4>Flag top</h4>
1174
1175            <div class="flag flag--top">
1176              <div class="flag__item">
1177                <img
1178                  src="img/min/16x9-img-placholder.png"
1179                  alt="Place holder for glag object"
1180                  width="120"
1181                />
1182              </div>
1183              <div class="flag__body">
1184                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1185              </div>
1186            </div>
1187
1188            <pre><code>&lt;div class=&quot;flag flag--top&quot;&gt;
1189  ...
1190&lt;/div&gt;
1191</code></pre>
1192
1193            <h4>Flag bottom</h4>
1194
1195            <div class="flag flag--bottom">
1196              <div class="flag__item">
1197                <img
1198                  src="img/min/16x9-img-placholder.png"
1199                  alt="Place holder for glag object"
1200                  width="120"
1201                />
1202              </div>
1203              <div class="flag__body">
1204                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1205              </div>
1206            </div>
1207
1208            <pre><code>&lt;div class=&quot;flag flag--bottom&quot;&gt;
1209  ...
1210&lt;/div&gt;
1211</code></pre>
1212
1213            <h4>Flag reversed</h4>
1214
1215            <div class="flag flag--reversed">
1216              <div class="flag__body">
1217                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1218              </div>
1219              <div class="flag__item">
1220                <img
1221                  src="img/min/16x9-img-placholder.png"
1222                  alt="Place holder for glag object"
1223                  width="120"
1224                />
1225              </div>
1226            </div>
1227
1228            <pre><code>&lt;div class=&quot;flag flag--reversed&quot;&gt;
1229  &lt;div class=&quot;flag__body&quot;&gt;
1230    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
1231  &lt;/div&gt;
1232  &lt;div class=&quot;flag__item&quot;&gt;
1233    &lt;img src=&quot;img/min/16x9-img-placholder.png&quot; alt=&quot;Place holder for glag object&quot; width=&quot;120&quot;&gt;
1234  &lt;/div&gt;
1235&lt;/div&gt;
1236</code></pre>
1237
1238            <h4>Flag reversed top</h4>
1239
1240            <div class="flag flag--reversed flag--top">
1241              <div class="flag__body">
1242                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1243              </div>
1244              <div class="flag__item">
1245                <img
1246                  src="img/min/16x9-img-placholder.png"
1247                  alt="Place holder for glag object"
1248                  width="120"
1249                />
1250              </div>
1251            </div>
1252
1253            <pre><code>&lt;div class=&quot;flag flag--reversed flag--top&quot;&gt;
1254  ...
1255&lt;/div&gt;
1256</code></pre>
1257
1258            <h4>Flag reversed bottom</h4>
1259
1260            <div class="flag flag--reversed flag--bottom">
1261              <div class="flag__body">
1262                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1263              </div>
1264              <div class="flag__item">
1265                <img
1266                  src="img/min/16x9-img-placholder.png"
1267                  alt="Place holder for glag object"
1268                  width="120"
1269                />
1270              </div>
1271            </div>
1272
1273            <pre><code>&lt;div class=&quot;flag flag--reversed flag--bottom&quot;&gt;
1274  ...
1275&lt;/div&gt;
1276</code></pre>
1277          </section>
1278
1279          <section class="docs__item" id="pagination">
1280            <h2 class="docs__heading">Pagination <code>components/_pagination.scss</code></h2>
1281
1282            <p>
1283              The pagination component provides styles for any project that contains long content
1284              which requires spliting up into shorter, easier to understand blocks.
1285            </p>
1286
1287            <ul class="pager">
1288              <li><a href="#">&lt;</a></li>
1289              <li class="pager--current"><a href="#">1</a></li>
1290              <li><a href="#">2</a></li>
1291              <li><a href="#">3</a></li>
1292              <li><a href="#">4</a></li>
1293              <li><a href="#">&gt;</a></li>
1294            </ul>
1295
1296            <pre><code>&lt;ul class=&quot;pager&quot;&gt;
1297  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;&lt;/a&gt;&lt;/li&gt;
1298  &lt;li class=&quot;pager--current&quot;&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
1299  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
1300  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
1301  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
1302  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&gt;&lt;/a&gt;&lt;/li&gt;
1303&lt;/ul&gt;
1304</code></pre>
1305          </section>
1306
1307          <section class="docs__item" id="tables">
1308            <h2 class="docs__heading">Tables <code>components/_tables.scss</code></h2>
1309
1310            <h4>Basic</h4>
1311
1312            <table class="table">
1313              <thead>
1314                <tr>
1315                  <th>#</th>
1316                  <th>
1316Name</th>
1317                  <th>Posistion</th>
1318                </tr>
1319              </thead>
1320              <tbody>
1321                <tr>
1322                  <td>11</td>
1323                  <td>Mesut Özil</td>
1324                  <td>Midfielder</td>
1325                </tr>
1326                <tr>
1327                  <td>10</td>
1328                  <td>Jack Wilshere</td>
1329                  <td>Midfielder</td>
1330                </tr>
1331                <tr>
1332                  <td>12</td>
1333                  <td>Olivier Giroud</td>
1334                  <td>Forward</td>
1335                </tr>
1336              </tbody>
1337            </table>
1338
1339            <pre><code>&lt;table class=&quot;table&quot;&gt;
1340  &lt;thead&gt;
1341    &lt;tr&gt;
1342      &lt;th&gt;#&lt;/th&gt;
1343      &lt;th&gt;Name&lt;/th&gt;
1344      &lt;th&gt;Posistion&lt;/th&gt;
1345    &lt;/tr&gt;
1346  &lt;/thead&gt;
1347  &lt;tbody&gt;
1348    &lt;tr&gt;
1349      &lt;td&gt;11&lt;/td&gt;
1350      &lt;td&gt;Mesut Özil&lt;/td&gt;
1351      &lt;td&gt;Midfielder&lt;/td&gt;
1352    &lt;/tr&gt;
1353    &lt;tr&gt;
1354      &lt;td&gt;10&lt;/td&gt;
1355      &lt;td&gt;Jack Wilshere&lt;/td&gt;
1356      &lt;td&gt;Midfielder&lt;/td&gt;
1357    &lt;/tr&gt;
1358    &lt;tr&gt;
1359      &lt;td&gt;12&lt;/td&gt;
1360      &lt;td&gt;Olivier Giroud&lt;/td&gt;
1361      &lt;td&gt;Forward&lt;/td&gt;
1362    &lt;/tr&gt;
1363  &lt;/tbody&gt;
1364&lt;/table&gt;
1365</code></pre>
1366
1367            <h4>Stripes</h4>
1368
1369            <table class="table--stripes">
1370              <thead>
1371                <tr>
1372                  <th>#</th>
1373                  <th>Name</th>
1374                  <th>Posistion</th>
1375                </tr>
1376              </thead>
1377              <tbody>
1378                <tr>
1379                  <td>11</td>
1380                  <td>Mesut Özil</td>
1381                  <td>Midfielder</td>
1382                </tr>
1383                <tr>
1384                  <td>10</td>
1385                  <td>Jack Wilshere</td>
1386                  <td>Midfielder</td>
1387                </tr>
1388                <tr>
1389                  <td>12</td>
1390                  <td>Olivier Giroud</td>
1391                  <td>Forward</td>
1392                </tr>
1393              </tbody>
1394            </table>
1395
1396            <pre><code>&lt;table class=&quot;table--stripes&quot;&gt;
1397  ...
1398&lt;/table&gt;
1399</code></pre>
1400
1401            <h4>Bordered rows</h4>
1402
1403            <table class="table--border-rows">
1404              <thead>
1405                <tr>
1406                  <th>#</th>
1407                  <th>Name</th>
1408                  <th>Posistion</th>
1409                </tr>
1410              </thead>
1411              <tbody>
1412                <tr>
1413                  <td>11</td>
1414                  <td>Mesut Özil</td>
1415                  <td>Midfielder</td>
1416                </tr>
1417                <tr>
1418                  <td>10</td>
1419                  <td>Jack Wilshere</td>
1420                  <td>Midfielder</td>
1421                </tr>
1422                <tr>
1423                  <td>12</td>
1424                  <td>Olivier Giroud</td>
1425                  <td>Forward</td>
1426                </tr>
1427              </tbody>
1428            </table>
1429
1430            <pre><code>&lt;table class=&quot;table--border-rows&quot;&gt;
1431  ...
1432&lt;/table&gt;
1433</code></pre>
1434
1435            <h4>Bordered cells</h4>
1436
1437            <table class="table--border-cells">
1438              <thead>
1439                <tr>
1440                  <th>#</th>
1441                  <th>Name</th>
1442                  <th>Posistion</th>
1443                </tr>
1444              </thead>
1445              <tbody>
1446                <tr>
1447                  <td>11</td>
1448                  <td>Mesut Özil</td>
1449                  <td>Midfielder</td>
1450                </tr>
1451                <tr>
1452                  <td>10</td>
1453                  <td>Jack Wilshere</td>
1454                  <td>Midfielder</td>
1455                </tr>
1456                <tr>
1457                  <td>12</td>
1458                  <td>Olivier Giroud</td>
1459                  <td>Forward</td>
1460                </tr>
1461              </tbody>
1462            </table>
1463
1464            <pre><code>&lt;table class=&quot;table--border-cells&quot;&gt;
1465  ...
1466&lt;/table&gt;
1467</code></pre>
1468
1469            <h4>Condensed</h4>
1470
1471            <table class="table--condensed">
1472              <thead>
1473                <tr>
1474                  <th>#</th>
1475                  <th>
1475Name</th>
1476                  <th>Posistion</th>
1477                </tr>
1478              </thead>
1479              <tbody>
1480                <tr>
1481                  <td>11</td>
1482                  <td>Mesut Özil</td>
1483                  <td>Midfielder</td>
1484                </tr>
1485                <tr>
1486                  <td>10</td>
1487                  <td>Jack Wilshere</td>
1488                  <td>Midfielder</td>
1489                </tr>
1490                <tr>
1491                  <td>12</td>
1492                  <td>Olivier Giroud</td>
1493                  <td>Forward</td>
1494                </tr>
1495              </tbody>
1496            </table>
1497
1498            <pre><code>&lt;table class=&quot;table--condensed&quot;&gt;
1499  ...
1500&lt;/table&gt;
1501</code></pre>
1502
1503            <h4>Responsive</h4>
1504
1505            <p>
1506              To make any table responsive, wrap the <code>&lt;table&gt;</code> in a
1507              <code>&lt;div&gt;</code> with the class <code>.table--responsive</code>
1508            </p>
1509
1510            <div class="table--responsive">
1511              <table class="table--stripes">
1512                <thead>
1513                  <tr>
1514                    <th>#</th>
1515                    <th>Name</th>
1516                    <th>Posistion</th>
1517                    <th>Country</th>
1518                    <th>DOB</th>
1519                  </tr>
1520                </thead>
1521                <tbody>
1522                  <tr>
1523                    <td>11</td>
1524                    <td>Mesut Özil</td>
1525                    <td>Midfielder</td>
1526                    <td>Germany</td>
1527                    <td>15/10/1988</td>
1528                  </tr>
1529                  <tr>
1530                    <td>10</td>
1531                    <td>Jack Wilshere</td>
1532                    <td>Midfielder</td>
1533                    <td>England</td>
1534                    <td>1/1/1992</td>
1535                  </tr>
1536                  <tr>
1537                    <td>12</td>
1538                    <td>Olivier Giroud</td>
1539                    <td>Forward</td>
1540                    <td>France</td>
1541                    <td>30/9/1986</td>
1542                  </tr>
1543                </tbody>
1544              </table>
1545            </div>
1546
1547            <pre><code>&lt;div class=&quot;table--responsive&quot;&gt;
1548  &lt;table class=&quot;table--stripes&quot;&gt;
1549    ...
1550  &lt;/table&gt;
1551&lt;/div&gt;
1552</code></pre>
1553          </section>
1554
1555          <hr class="hr-alt" />
1556
1557          <section class="docs__item" id="utilities">
1558            <h2 class="docs__heading">Utilities</h2>
1559
1560            <p>
1561              This folder contains the project variables, mixins, functions and the helper classes.
1562            </p>
1563          </section>
1564
1565          <section class="docs__item" id="variables">
1566            <h2 class="docs__heading">Variables <code>utils/_variables.scss</code></h2>
1567
1568            <p>
1569              This file contains all your project variables. The default variables included are
1570              (please expand on default variables):-
1571            </p>
1572
1573            <ul>
1574              <li>Font base size</li>
1575              <li>Spacing</li>
1576              <li>Fonts</li>
1577              <li>Colours</li>
1578              <li>Placeholder text colour</li>
1579              <li>Breakpoints</li>
1580            </ul>
1581          </section>
1582
1583          <section class="docs__item" id="helpers">
1584            <h2 class="docs__heading">Helpers <code>utils/_helpers.scss</code></h2>
1585
1586            <p>This file contains all your helper classes.</p>
1587
1588            <h4>Clearfix</h4>
1589            <p>
1590              The <code>.clearfix</code> class clears floats. You can add this class to a tag or use
1591              <code>@extend</code>.
1592            </p>
1593
1594            <pre><code>&lt;div class=&quot;clearfix&quot;&gt;
1595  ...
1596&lt;/div&gt;
1597
1598.someClass {
1599  @extend %clearfix;
1600}
1601</code></pre>
1602
1603            <h4>Align</h4>
1604
1605            <p>You can add these classes to a tag or use <code>@extend</code>.</p>
1606
1607            <p class="align-left">Align left</p>
1608
1609            <p class="align-center">Align center</p>
1610
1611            <p class="align-right">Align right</p>
1612
1613            <p class="justify">
1614              <strong>Justify text</strong>. All right me luvver ipsum dolor sit amet dolor dolore
1615              non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa
1616              jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer
1617              discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider
1618              me babber. Ginormous hark at ee mint in it casnt.
1619            </p>
1620
1621            <pre><code>&lt;p class=&quot;align-left&quot;&gt;...&lt;/p&gt;
1622
1623&lt;p class=&quot;align-center&quot;&gt;...&lt;/p&gt;
1624
1625&lt;p class=&quot;align-right&quot;&gt;...&lt;/p&gt;
1626
1627&lt;p class=&quot;justify&quot;&gt;...&lt;/p&gt;
1628
1629@extend:
1630&lt;p class=&quot;example&quot;&gt;...&lt;/p&gt;
1631
1632.example {
1633  color: red;
1634  @extend %align-right;
1635}
1636</code></pre>
1637
1638            <h4>Floats</h4>
1639
1640            <p>You can add these classes to a tag or use <code>@extend</code>.</p>
1641
1642            <div class="clearfix">
1643              <div class="float-left">Float left</div>
1644              <div class="float-center" style="width: 280px; clear: left">
1645                Float center <small>must have <code>width</code> set</small>.
1646              </div>
1647              <div class="float-right">Float right</div>
1648            </div>
1649
1650            <pre><code>&lt;div class=&quot;float-left&quot;&gt;...&lt;/div&gt;
1651&lt;div class=&quot;float-center&quot;&gt;...&lt;/div&gt;
1652&lt;div class=&quot;float-right&quot;&gt;...&lt;/div&gt;
1653</code></pre>
1654
1655            <h4>Spacing</h4>
1656
1657            <p>You can add these classes to a tag or use <code>@extend</code>.</p>
1658
1659            <pre><code>.no-margin - No margin or padding
1660.space - Margin on all sides
1661.space-top - Margin on the top
1662.space-right - Margin on the right
1663.space-btm - Margin on the bottom
1664.space-left - Margin on the left
1665</code></pre>
1666
1667            <h4>General</h4>
1668
1669            <p>You can add these classes to a tag or use <code>@extend</code>.</p>
1670
1671            <pre><code>.img-center - To center an image.
1672.is-uppercase - To make text uppercase.
1673</code></pre>
1674
1675            <h4>Visual</h4>
1676
1677            <p>You can add these classes to a tag or use <code>@extend</code>.</p>
1678
1679            <pre><code>.hide - Hide from browsers and screenreaders.
1680.visuallyhidden - Hide visually, but available for screenreaders.
1681</code></pre>
1682          </section>
1683
1684          <section class="docs__item" id="mixins">
1685            <h2 class="docs__heading">Mixins <code>utils/_mixins.scss</code></h2>
1686
1687            <h4>Include breakpoints</h4>
1688
1689            <p>
1690              Generates media-quieries using min-width. You can pass in variables e.g
1691              <code>$tablet-wide</code> or values e.g <code>560px</code>
1692            </p>
1693
1694            <pre><code>.someClass {
1695  color: red;
1696
1697  @include respond-min($tablet-wide) {
1698    color: blue;
1699  }
1700}
1701</code></pre>
1702
1703            <h4>Ghost buttons</h4>
1704
1705            <p>
1706              Use this mixin to create styles for your 'ghost' button. The mixin sets the text and
1707              border color. You can use variables or any colour values.
1708            </p>
1709
1710            <button class="example-btn">Example</button>
1711
1712            <pre><code>&lt;button class=&quot;example-btn&quot;&gt;Example&lt;/button&gt;
1713
1714.example-btn {
1715  @include ghost-btn($color-secondary)
1716}
1717</code></pre>
1718
1719            <h4>Gradients</h4>
1720
1721            <p>
1722              Use this mixin to create styles for your two colour gradients. You need to include the
1723              angle of your gradient and the start and stop colour. You can use variables or any
1724              colour values.
1725            </p>
1726
1727            <div class="example-gradient"></div>
1728
1729            <pre><code>&lt;div class=&quot;example-gradient&quot;&gt;&lt;/div&gt;
1730
1731.example-gradient {
1732  @include gradient(90, $color-primary, $color-secondary);
1733  height: 5rem;
1734}
1735</code></pre>
1736
1737            <h4>Icons</h4>
1738
1739            <p><a href="#font-awesome" data-scroll>See Font awesome</a></p>
1740          </section>
1741
1742          <section class="docs__item" id="functions">
1743            <h2 class="docs__heading">Functions <code>utils/_functions.scss</code></h2>
1744
1745            <h4>Tint</h4>
1746
1747            <p>The tint function slightly lightens a colour.</p>
1748
1749            <div class="swatch">
1750              <div class="swatch__colour bg-primary"></div>
1751              <div class="swatch__text">Primary</div>
1752            </div>
1753
1754            <div class="swatch">
1755              <div class="swatch__colour tint-example"></div>
1756              <div class="swatch__text">lighten by 20%</div>
1757            </div>
1758
1759            <pre><code>// lighten $color-primary by 20%
1760.tint-example {
1761  background-color: tint($color-primary, 20%);
1762}
1763</code></pre>
1764
1765            <h4>
1765Shade</h4>
1766
1767            <p>The shade function slightly darkens a colour.</p>
1768
1769            <div class="swatch">
1770              <div class="swatch__colour bg-primary"></div>
1771              <div class="swatch__text">Primary</div>
1772            </div>
1773
1774            <div class="swatch">
1775              <div class="swatch__colour shade-example"></div>
1776              <div class="swatch__text">darken by 20%</div>
1777            </div>
1778
1779            <pre><code>// darken $color-primary by 20%
1780.shade-example {
1781  background-color: shade($color-primary, 20%);
1782}
1783</code></pre>
1784          </section>
1785
1786          <hr class="hr-alt" />
1787
1788          <section class="docs__item" id="vendor">
1789            <h2 class="docs__heading">Vendor</h2>
1790          </section>
1791
1792          <section class="docs__item" id="font-awesome">
1793            <h2 class="docs__heading">Font awesome <code>vendors/_font-awesome.scss</code></h2>
1794
1795            <p>
1796              Outline comes with the excellent
1797              <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> icons (4.5)
1798              included. Outline uses Font Awesome with mixins for adding icons to semantic HTML and
1799              without loading every single icon class definition when you only use some of the
1800              icons.
1801            </p>
1802
1803            <p>This is the default mixin for an icon.</p>
1804
1805            <pre><code>@mixin icon($icon) {
1806  @extend %icon;
1807  @extend %icon-#{$icon};
1808}
1809</code></pre>
1810
1811            <p>
1812              This icon mixin adds padding to the right. You can use the default value set in mixin
1813              (.5rem) or specify your own value. For example you could use this for an icon in a
1814              button
1815            </p>
1816
1817            <pre><code>@mixin icon-before($icon, $padding: .5rem) {
1818  &:before {
1819    @extend %icon;
1820    @extend %icon-#{$icon};
1821    padding-right: $padding;
1822  }
1823}
1824</code></pre>
1825
1826            <h4>Examples</h4>
1827
1828            <div class="subway-sign">
1829              <i class="subway-sign__icon"></i>
1830              <span class="subway-sign__text">Subway</span>
1831            </div>
1832
1833            <pre><code>&lt;div class=&quot;subway-sign&quot;&gt;
1834  &lt;i class=&quot;subway-sign__icon&quot;&gt;&lt;/i&gt;
1835  &lt;span class=&quot;subway-sign__text&quot;&gt;Subway&lt;/span&gt;
1836&lt;/div&gt;
1837
1838.subway-sign {
1839  width: 8rem;
1840  padding: $spacing;
1841  background-color: $color-grey-dark;
1842  text-align: center;
1843  color: #fff;
1844
1845  .subway-sign__icon {
1846    @include icon(subway);
1847    display: block;
1848    font-size: 3rem;
1849    margin-bottom: .5rem;
1850  }
1851
1852  .subway-sign__text {
1853    font-family: $font-secondary;
1854    font-size: 1.25rem;
1855  }
1856}
1857</code></pre>
1858
1859            <button class="btn--large download">Download</button>
1860
1861            <pre><code>&lt;button class=&quot;btn--large download&quot;&gt;Download&lt;/button&gt;
1862
1863.download {
1864  @include icon-before(cloud-download, .75rem)
1865}
1866</code></pre>
1867          </section>
1868
1869          <hr class="hr-alt" />
1870
1871          <footer class="footer docs__item clearfix">
1872            <div class="container">
1873              Outline is a project by <a href="http://www.matt-harris.net">Matt Harris</a>
1874            </div>
1875          </footer>
1876        </div>
1877      </div>
1878    </div>
1879
1880    
1880<script>
1881      (function (i, s, o, g, r, a, m) {
1882        i.GoogleAnalyticsObject = r;
1883        (i[r] =
1884          i[r] ||
1885          function () {
1886            (i[r].q = i[r].q || []).push(arguments);
1887          }),
1888          (i[r].l = 1 * new Date());
1889        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
1890        a.async = 1;
1891        a.src = g;
1892        m.parentNode.insertBefore(a, m);
1893      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
1894
1895      ga('create', 'UA-49516749-2', 'auto');
1896      ga('send', 'pageview');
1897    </script>
1897
1898
1899    
1899<script src="js/min/bundle.js"></script>
1899
1900    
1900<script>
1901      smoothScroll.init({
1902        speed: 800,
1903        easing: 'easeOutQuad',
1904        updateURL: false,
1905      });
1906    </script>
1906
1907  </body>
1908</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.