Permalink
Find file
6f58cc1 Jan 6, 2016
Andy Clarke Minor commit
1151 lines (824 sloc) 36.5 KB
<!doctype html>
<html lang="en">
<head>
<title>320andup</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="apple-mobile-web-app-title" content="">
<link rel="canonical" href="">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/320andup.css">
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.png" sizes="32x32">
<!--iOS -->
<link rel="apple-touch-icon" href="/assets/img/site/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/img/site/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/site/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/img/site/apple-touch-icon-144x144-precomposed.png">
<!-- Facebook/Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@">
<meta name="twitter:url" property="og:url" content="">
<meta name="twitter:title" property="og:title" content="">
<meta name="twitter:description" property="og:description" content="">
<meta name="twitter:image" property="og:image" content="">
<!-- Windows -->
<meta name="msapplication-TileColor" content="">
<meta name="msapplication-TileImage" content="/assets/img/site/apple-touch-icon-precomposed.png">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Merriweather|Lato:400,300,700' rel='stylesheet' type='text/css'></head>
<body id="www-stuffandnonsense-co-uk">
<div class="pattern__container">
<div class="pattern__page" id="pattern__cover">
<div class="pattern__cover__logo"><img src="http://placehold.it/640x480"></div>
<h1 class="pattern__cover__header">320andup web design guide</h1>
</div><!-- pattern__page -->
<section class="pattern__page" id="pattern__contents">
<div class="pattern-col-all">
<h2 class="pattern__contents__header">Contents</h2>
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern__contents__columns">
<h3 class="pattern__contents__title">Branding</h3>
<ol class="pattern__contents__list">
<li><a href="#pattern__branding">Main branding</a></li>
<li><a href="#pattern__colours">Colours</a></li>
</ol>
<h3 class="pattern__contents__title">Typography</h3>
<ol class="pattern__contents__list">
<li><a href="#pattern__primary__typeface">Primary typeface</a></li>
<li><a href="#pattern__complementary__typography">Complementary type</a></li>
</ol>
<h3 class="pattern__contents__title">Type elements</h3>
<ol class="pattern__contents__list">
<li><a href="#pattern__typography__headings">Headings</a></li>
<li><a href="#pattern__typography__paragraphs">Paragraphs</a></li>
<li><a href="#pattern__typography__quotations">Quotations</a></li>
<li><a href="#pattern__typography__lists">Lists</a></li>
<li><a href="#pattern__list__modules">List modules</a></li>
<li><a href="#pattern__list__text">Text-level elements</a></li>
<li><a href="#pattern__list__tables">Tables</a></li>
<li><a href="#pattern__form__inputs">Form inputs</a></li>
<li><a href="#pattern__form__buttons">Form buttons</a></li>
</ol>
<h3 class="pattern__contents__title">Modules</h3>
<ol class="pattern__contents__list">
<li><a href="#pattern__modules__media">Media module</a></li>
<li><a href="#pattern__modules__faqs">FAQs</a></li>
</ol>
</div><!-- pattern__contents__columns -->
</div><!-- col-all -->
<footer class="pattern__contents__footer">
<small>&#169; 2015. Design by Stuff and Nonsense.</small>
</footer>
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__branding">
<div class="pattern-col-all">
<div class="pattern-col pattern-col1-col2">
<h1 class="pattern__page__header">Main branding</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1-col2">
<figure>
<img src="http://placehold.it/640x480">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</figure>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col3">
<figure>
<img src="http://placehold.it/300x200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</figure>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__colours">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Colours in use</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col2">
<p><img src="http://placehold.it/150x100"></p>
<h5>Primary colour <small></small></h5>
<p class="milli">Used for hypertext link colour and the backgrounds of primary calls-to-action including buttons.</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col3">
<p><img src="http://placehold.it/150x100"></p>
<h5>Secondary colour <small></small></h5>
<p class="milli">Used for hover states on hypertext links and the backgrounds of primary calls-to-action including buttons.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col2">
<p><img src="http://placehold.it/150x100"></p>
<h5>Base colour <small></small></h5>
<p class="milli">Used in the backgrounds of buttons, boxes, tables and other elements.</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col3">
<p><img src="http://placehold.it/150x100"></p>
<h5>Border colour <small></small></h5>
<p class="milli">Used on the borders of buttons, boxes and other elements.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__primary__typeface">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Primary typeface</h1>
<p class="tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;letter-spacing:-2px">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular It</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;font-style:italic;letter-spacing:-2px">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Light</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;font-weight:300;letter-spacing:-2px">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Light It</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;font-weight:300;font-style:italic;letter-spacing:-2px">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Bold</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;font-weight:700;letter-spacing:-2px">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Bold It</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:2.4rem;font-weight:700;letter-spacing:-2px;">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! @ £ $ % & 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__complementary__typography">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Complementary typography</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p style="font-size:12rem;line-height:.75;">abc</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<p class="secondary" style="text-transform:uppercase;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="milli" style="text-transform:uppercase;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Regular</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="secondary" style="text-transform:uppercase;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Columns</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="columns">
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- columns -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__headings">
<h1 class="pattern__heading">Headings</h1>
<div class="pattern__item">
<div class="pattern__type">h1</div>
<h1><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h1>
<div class="pattern__notes">
</div>
</div>
<div class="pattern__item">
<div class="pattern__type">h2</div>
<h2><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h2>
<div class="pattern__notes">
</div>
</div>
<div class="pattern__item">
<div class="pattern__type">h3</div>
<h3><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h3>
<div class="pattern__notes">
</div>
</div>
<div class="pattern__item">
<div class="pattern__type">h4</div>
<h4>Lorem ipsum dolor sit amet</h4>
<div class="pattern__notes">
</div>
</div>
<div class="pattern__item">
<div class="pattern__type">h5</div>
<h5>Lorem ipsum dolor sit amet</h5>
<div class="pattern__notes">
</div>
</div>
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__typography__paragraphs">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Paragraphs</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Unclassified paragraph</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Lead paragraph</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Secondary paragraph</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Tertiary paragraph</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Milli paragraph</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p class="milli">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__typography__quotations">
<h1 class="pattern__heading">Quotations</h1>
<div class="pattern__item">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<small><cite>Lorem ipsum dolor sit amet</cite></small>
</blockquote>
<div class="pattern__notes">
</div>
</div>
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__typography__lists">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Lists</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Unordered list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Nested unordered list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<ul>
<li>Unordered list item</li>
<li>
<ul>
<li>Nested unordered list item</li>
<li>Nested unordered list item</li>
<li>Nested unordered list item</li>
</ul>
</li>
<li>Unordered list item</li>
</ul>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Ordered list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__list__text">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Definition list</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all pattern__item">
<div class="pattern-col pattern-col1">
<p class="milli">Definition list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<dl>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
</dl>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all pattern__item">
<div class="pattern-col pattern-col1">
<p class="milli">Inline definition list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<dl class="dl--inline">
<dt>Published</dt>
<dd>Smashing Magazine</dd>
<dd>2015</dd>
<dt>ISBN (EPUB)</dt>
<dd>978-3-945749-35-7</dd>
<dt>ISBN (KINDLE)</dt>
<dd>978-3-945749-36-4</dd>
<dt>ISBN (Print)</dt>
<dd>978-3-945749-37-1</dd>
</dl>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Text-level elements</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">em, strong, i, b, abbr, cite, code, del, ins, dfn, mark, sup and sub</p>
</div>
<div class="pattern-col pattern-col2-col3">
<p>Text level <abbr title="HyperText Markup Language">HTML</abbr> elements may be used within other elements. They include: <em>em</em> and <strong>strong</strong> for semantic emphasis, <i>i</i> and <b>b</b> for presentational formatting, <abbr title="Abbreviation">abbr</abbr> abbreviations, <cite>cite</cite> citations, <code>code</code> example, <del>del</del>, <ins>ins</ins> for visibly deleted and inserted content, <dfn>dfn</dfn> definitions, <mark>mark</mark> for highlighted passages, <sup>sup</sup> superscript and <sub>sub</sub> subscript.</p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">Ligatures (if available)</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Ligatures</p>
</div>
<div class="pattern-col pattern-col2-col3">
<h1>ct ff fff fi ffi ffj fl ffl st</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page">
<div class="pattern-col-all pattern__item">
<div class="pattern-col pattern-col1">
<p class="milli">Inline list</p>
</div>
<div class="pattern-col pattern-col2-col3">
<ul class="list--inline">
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
<li><a href="javascript:void(0)">Privacy</a></li>
<li><a href="javascript:void(0)">Terms and conditions</a></li>
</ul>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__modules__faqs">
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h1 class="pattern__page__header">FAQs</h1>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col2-col3">
<h3 class="faq__question"><a href="#faq-1">Lorem ipsum dolor sit amet</a></h3>
<div class="faq__answer" id="faq-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- faq__answer -->
<h3 class="faq__question"><a href="#faq-2">Lorem ipsum dolor sit amet</a></h3>
<div class="faq__answer" id="faq-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- faq__answer -->
<h3 class="faq__question"><a href="#faq-3">Lorem ipsum dolor sit amet</a></h3>
<div class="faq__answer" id="faq-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- faq__answer -->
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__tables">
<div class="pattern-col-all">
<h1 class="pattern__page__header">Tables</h1>
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Unclassified table</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<table>
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Condensed table</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<table class="table--condensed">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Striped table</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<table class="table--stripe">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>1,000</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__form__inputs">
<div class="pattern-col-all">
<h1 class="pattern__page__header">Form inputs</h1>
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Text</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<input type="text" id="text" class="form-control">
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Email</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<input type="email" id="email" class="form-control" placeholder="Must contain an @ symbol">
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">URL</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<input type="url" id="url" class="form-control">
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Number</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<input type="number" id="number" class="form-control">
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Tel</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<input type="tel" id="tel" class="form-control">
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Select</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<select class="form-control">
<option>Jan</option>
<option>Feb</option>
<option>March</option>
<option>April</option>
<option>May</option>
</select>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Checkbox/radio</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2">
<ul class="list--plain">
<li><label class="checkbox"><input type="checkbox" checked> Checkbox</label></li>
<li><label class="checkbox"><input type="checkbox"> Checkbox</label></li>
</ul>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col3">
<ul class="list--plain">
<li><label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Radio</label></li>
<li><label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Radio</label></li>
</ul>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Custom checkbox</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<ul class="list--plain">
<li><input type="checkbox" id="checkbox" class="checkbox--custom" autofocus>
<label for="checkbox">Checkbox</label></li>
<li><input type="checkbox" id="checkbox-1" class="checkbox--custom" checked>
<label for="checkbox-1">Checkbox</label></li>
<li><input type="checkbox" id="checkbox-2" class="checkbox--custom" disabled>
<label for="checkbox-2">Checkbox</label></li>
<li><input type="checkbox" id="checkbox-3" class="checkbox--custom" checked disabled>
<label for="checkbox-3">Checkbox</label></li>
</ul>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Textarea</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<textarea id="textarea" class="form-control"> </textarea>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Search</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<div class="form__search">
<input type="search" placeholder="Enter keywords">
<button class="btn">Search</button>
</div><!-- form__search -->
</div><!-- pattern-col -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__form__buttons">
<div class="pattern-col-all">
<h1 class="pattern__page__header">Buttons</h1>
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">System button and link</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<p><button>System button</button> and <a href="javascript:void(0)">hyperlink</a></p>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Large button</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<button class="btn btn--large">Button</button> <button class="btn btn--primary btn--large">Primary</button> <a href="javascript:void(0)" class="btn btn--large">Hyperlink</a>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Standard button</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<button class="btn">Button</button> <button class="btn btn--primary">Primary</button> <a href="javascript:void(0)" class="btn">Hyperlink</a>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Mini button</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<button class="btn btn--mini">Button</button> <button class="btn btn--primary btn--mini">Primary</button> <a href="javascript:void(0)" class="btn btn--mini">Hyperlink</a>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Small button</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<button class="btn btn--small">Button</button> <button class="btn btn--primary btn--small">Primary</button> <a href="javascript:void(0)" class="btn btn--small">Hyperlink</a>
</div><!-- pattern-col -->
</div><!-- col-all -->
<div class="pattern-col-all">
<div class="pattern-col pattern-col1">
<p class="milli">Block button</p>
</div><!-- pattern-col -->
<div class="pattern-col pattern-col2-col3">
<button class="btn btn--block">Button</button>
</div><!-- pattern-col -->
</div><!-- col-all -->
</div><!-- col-all -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="pattern__modules__media">
<div class="pattern-col-all">
<h1 class="pattern__page__header">Media</h1>
</div><!-- col-all -->
<div class="media">
<div class="media__figure">
<img src="http://placehold.it/150x150">
</div><!-- media__figure -->
<div class="media__content">
<h3 class="media__header"><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- media__content -->
</div><!-- media -->
<!-- Next -->
<div class="media media--reverse">
<div class="media__figure">
<img src="http://placehold.it/150x150">
</div><!-- media__figure -->
<div class="media__content">
<h3 class="media__header"><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- media__content -->
</div><!-- media -->
</section><!-- pattern__page -->
<!-- Next _____________________________________________________________-->
<section class="pattern__page" id="">
<div class="pattern-col-all">
<h1 class="pattern__page__header"></h1>
</div><!-- col-all -->
</section><!-- pattern__page -->
</div><!-- pattern__container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery.min.js"><\/script>')</script>
<!-- @javascript main.js -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script></body>
</html>