## Colors

- #ff0000
- #00ff00
- #0000ff
- #ffff00
- #00ffff
- #ff00ff
- #ffffff
- #808080
- #000000

### HTML

                        <ul class="sg-colors">
    	<li>
    		<span class="sg-swatch" style="background: #ff0000;"></span>
    		<span class="sg-label">#ff0000</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #00ff00;"></span>
    		<span class="sg-label">#00ff00</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #0000ff;"></span>
    		<span class="sg-label">#0000ff</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #ffff00;"></span>
    		<span class="sg-label">#ffff00</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #00ffff;"></span>
    		<span class="sg-label">#00ffff</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #ff00ff;"></span>
    		<span class="sg-label">#ff00ff</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #ffffff;"></span>
    		<span class="sg-label">#ffffff</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #808080;"></span>
    		<span class="sg-label">#808080</span>
    	</li>
    	<li>
    		<span class="sg-swatch" style="background: #000000;"></span>
    		<span class="sg-label">#000000</span>
    	</li>
    </ul>

## Fonts

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: Georgia, Times, "Times New Roman", serif;

Secondary font italic: Georgia, Times, "Times New Roman", serif;

Secondary font bold: Georgia, Times, "Times New Roman", serif;

### HTML

                        <p>Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</p>
    <p><em>Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</em></p>
    <p><strong>Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</strong></p>
    <p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
    <p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
    <p class="font-secondary"><strong>Secondary font bold: Georgia, Times, "Times New Roman", serif;</strong></p>

## Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

### HTML

                        <div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>

    <div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: ease-in-out; (Hover to see effect)</div>

## Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

### HTML

                        <p class="hide-small">This text is hidden on smaller screens</p>

    <p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>

    <p class="hide-med">This text is hidden on medium screens only</p>

    <p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>

    <p class="hide-large">This text is hidden on large screens</p>

    <p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>

## Headings

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

### HTML

                        <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5>
    <h6>Heading Level 6</h6>

## Subheadings

# Subheading Level 1

## Subheading Level 2

### Subheading Level 3

#### Subheading Level 4

##### Subheading Level 5

###### Subheading Level 6

### HTML

                        <h1 class="subheading">Subheading Level 1</h1>
    <h2 class="subheading">Subheading Level 2</h2>
    <h3 class="subheading">Subheading Level 3</h3>
    <h4 class="subheading">Subheading Level 4</h4>
    <h5 class="subheading">Subheading Level 5</h5>
    <h6 class="subheading">Subheading Level 6</h6>

## Headings With Links

# Heading 1 with link

## Heading 2 with link

### Heading 3 with link

#### Heading 4 with link

##### Heading 5 with link

###### Heading 6 with link

### HTML

                        <h1><a href="#">Heading 1 with link</a></h1>
    <h2><a href="#">Heading 2 with link</a></h2>
    <h3><a href="#">Heading 3 with link</a></h3>
    <h4><a href="#">Heading 4 with link</a></h4>
    <h5><a href="#">Heading 5 with link</a></h5>
    <h6><a href="#">Heading 6 with link</a></h6>

## Paragraph

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

### HTML

                        <p>So, setting about it as methodically as men might smoke out a wasps&#39; nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>

## Blockquote

> A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

### HTML

                        <blockquote>
    	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
    </blockquote>

## Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: `Cmd`

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

`This is what inline code looks like.`

`This is sample output from a computer program`

The variable element, such as x = y

### HTML

                        <div class="text">
    	<p><a href="#">This is a text link</a></p>

    	<p><strong>Strong is used to indicate strong importance</strong></p>

    	<p><em>This text has added emphasis</em></p>

    	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

    	<p>The <i>i element</i> is text that is set off from the normal text</p>

    	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

    	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

    	<p><s>This text has a strikethrough</s></p>

    	<p>Superscript<sup>®</sup></p>

    	<p>Subscript for things like H<sub>2</sub>O</p>

    	<p><small>This small text is small for for fine print, etc.</small></p>

    	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

    	<p>Keybord input: <kbd>Cmd</kbd></p>

    	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

    	<p><cite>This is a citation</cite></p>

    	<p>The <dfn>dfn element</dfn> indicates a definition.</p>

    	<p>The <mark>mark element</mark> indicates a highlight</p>

    	<p><code>This is what inline code looks like.</code></p>

    	<p><samp>This is sample output from a computer program</samp></p>

    	<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
    </div><!--end .text-->

## Time

2 weeks ago

### HTML

                        <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

## Preformatted Text

    P R E F O R M A T T E D T E X T
    ! " # $ % & ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; < = > ?
    @ 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 [ \ ] ^ _
    ` 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 { | } ~

### HTML

                        <pre>
    P R E F O R M A T T E D T E X T
    ! " # $ % &amp; ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
    @ 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 [ \ ] ^ _
    ` 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 { | } ~
    </pre>

## Emphasis Colors

This is what error text looks like

This is what valid text looks like

This is what warning text looks like

This is what information text looks like.

### HTML

                        <p class="error">This is what error text looks like</p>
    <p class="valid">This is what valid text looks like</p>
    <p class="warning">This is what warning text looks like</p>
    <p class="information">This is what information text looks like.</p>

## Hr

### HTML

                        <hr />

## Caption

A caption can be applied to an image, quote, form field, etc.

### HTML

                        <p class="caption">A caption can be applied to an image, quote, form field, etc.</p>

## Unordered

- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- Lists can be nested inside of each other
  - This is a nested list item
  - This is another nested list item in an unordered list
- This is the last list item

### HTML

                        <div class="text">
    	<ul>
    		<li>This is a list item in an unordered list</li>
    		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
    		<li>
    			Lists can be nested inside of each other
    			<ul>
    				<li>This is a nested list item</li>
    				<li>This is another nested list item in an unordered list</li>
    			</ul>
    		</li>
    		<li>This is the last list item</li>
    	</ul>
    </div>

## Ordered

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

### HTML

                        <div class="text">
    	<ol>
    		<li>This is a list item in an ordered list</li>
    		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
    		<li>
    			Lists can be nested inside of each other
    			<ol>
    				<li>This is a nested list item</li>
    				<li>This is another nested list item in an ordered list</li>
    			</ol>
    		</li>
    		<li>This is the last list item</li>
    	</ol>
    </div>

## Definition

Definition List
  A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
  This is the definition of that term, which both live in a `dl`.
Here is another term.
  And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
  And it gets a definition too, which is this line.

### HTML

                        <dl>
    	<dt>Definition List</dt>
    	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
        <dt>This is a term.</dt>
        <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
        <dt>Here is another term.</dt>
        <dd>And it gets a definition too, which is this line.</dd>
        <dt>Here is term that shares a definition with the term below.</dt>
        <dd>And it gets a definition too, which is this line.</dd>
    </dl>

## Logo

### HTML

                        <a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>

## Landscape 4x3

### HTML

                        <img src="..&#x2F;..&#x2F;images&#x2F;fpo_4x3.png" alt="4x3 Image" />

## Landscape 16x9

### HTML

                        <img src="..&#x2F;..&#x2F;images&#x2F;fpo_16x9.png" alt="16x9 Image" />

## Square

### HTML

                        <img src="..&#x2F;..&#x2F;images&#x2F;fpo_square.png" alt="Square Thumbnail" />

## Avatar

### HTML

                        <img src="..&#x2F;..&#x2F;images&#x2F;fpo_avatar.png" alt="Avatar" />

## Icons

### HTML

                        <ul class="icons inline-list">
    	<li class="icon-twitter"></li>
    	<li class="icon-facebook"></li>
    	<li class="icon-stumbleupon"></li>
    	<li class="icon-linkedin"></li>
    	<li class="icon-pinterest"></li>
    	<li class="icon-google-plus"></li>
    	<li class="icon-youtube"></li>
    	<li class="icon-feed"></li>
    	<li class="icon-search"></li>
    	<li class="icon-play"></li>
    </ul>

## Loading Icon

### HTML

                        <img src="../../images/ajax-loader.gif" alt="Loading" />

## Favicon

### HTML

                        <img src="../../images/favicon_16x16.jpg" />
    <img src="../../images/favicon_32x32.jpg" />

## Text Fields

Text Input *
Password
Web Address
Email Address
Search
Number Input *
Textarea
Error Input
Valid

### HTML

                        <fieldset>
        <div class="field-container">
            <label for="text">Text Input <abbr title="Required">*</abbr></label>
            <input id="text" type="text" placeholder="Text Input">
        </div>
        <div class="field-container">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Type your Password">
        </div>
        <div class="field-container">
            <label for="webaddress">Web Address</label>
            <input id="webaddress" type="url" placeholder="http://yoursite.com">
        </div>
        <div class="field-container">
            <label for="emailaddress">Email Address</label>
            <input id="emailaddress" type="email" placeholder="name@email.com">
        </div>
        <div class="field-container">
            <label for="search">Search</label>
            <input id="search" type="search" placeholder="Enter Search Term">
        </div>
        <div class="field-container">
            <label for="text">Number Input <abbr title="Required">*</abbr></label>
            <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
        </div>
        <div class="field-container">
            <label for="textarea">Textarea</label>
            <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
        </div>
        <div class="field-container">
            <label class="error">Error Input</label>
            <input class="is-error" type="text" placeholder="Text Input">
        </div>
        <div class="field-container">
            <label  class="valid">Valid</label>
            <input  class="is-valid" type="text" placeholder="Text Input">
        </div>
    </fieldset>

## Select Menu

Select

### HTML

                        <fieldset>
        <div class="field-container">
            <label for="select">Select</label>
            <select id="select">
                <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                </optgroup>
            </select>
        </div>
    </fieldset>

## Checkbox

Checkbox *

- Choice A
- Choice B
- Choice C

### HTML

                        <form action="#">
        <fieldset class="options">
            <legend>Checkbox <abbr title="Required">*</abbr></legend>
            <ul>
                <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
                <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
                <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
            </ul>
        </fieldset>
    </form>

## Radio Buttons

Radio

- Option 1
- Option 2
- Option 3

### HTML

                        <form action="#">
        <fieldset class="options">
            <legend>Radio</legend>
            <ul>
                <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
                <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
                <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
            </ul>
        </fieldset>
    </form>

## Html5 Inputs

Color input
Number input
Range input
Date input
Month input
Week input
Datetime input
Datetime-local input

### HTML

                        	<fieldset>
        <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
        <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
        <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
        <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
        <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
        <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
        <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
        <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
    </fieldset>

## Buttons

Button

Alternate Button

Disabled Button

Text Button

### HTML

                        <p><a href="#" class="btn">Button</a></p>
    <p><a href="#" class="btn alt">Alternate Button</a></p>
    <p><a href="#" class="btn disabled">Disabled Button</a></p>
    <p><a href="#" class="text-btn">Text Button</a></p>

## Table

Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 3 | Table Heading 4
--- | --- | --- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 3 | Table Footer 4
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5

### HTML

                        <table>
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

## Video

### HTML

                        <video width="640" height="360" controls="">
    	<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    	<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
    	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
    	<img src="" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download">
    </video>

## Audio

### HTML

                        <audio controls="controls">
       <source src="#" />
       <source src="#" />
    </audio>