Getting Started

View the GitHub repository for setup details.


    ATOMS

  • Colors View code

    <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>

    The color palette.

    • #ff0000
    • #00ff00
    • #0000ff
    • #ffff00
    • #00ffff
    • #ff00ff
    • #ffffff
    • #808080
    • #000000
  • Fonts View code

    <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>

    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;

  • Animations View code

    <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>

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

    <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>

    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

  • Headings View code

    <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>

    Heading Level 2

    Heading Level 3

    Heading Level 4

    Heading Level 5
    Heading Level 6
  • Paragraphs View code

    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

    A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

  • Blockquote View code

    <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>

    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.

  • Inline Elements View code

    <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-->

    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

  • Datetime View code

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

  • Preformatted Text View code

    <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>

    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 { | } ~
    
  • Horizontal Rule View code

    <hr />


  • Unordered List View code

    <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>

    • 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
  • Ordered List View code

    <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>

    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
  • Definition List View code

    <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>

    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.
  • Landscape 4x3 View code

    <img src="/patternlab-jekyll/images/fpo_4x3.png" alt="4x3 Image" />

    4x3 Image
  • Landscape 16x9 View code

    <img src="/patternlab-jekyll/images/fpo_16x9.png" alt="16x9 Image" />

    16x9 Image
  • Square Images View code

    <img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />

    Square Thumbnail
  • Avatars View code

    <img src="/patternlab-jekyll/images/fpo_avatar.png" alt="Avatar" />

    Avatar
  • Icons View code

    <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 View code

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

    Loading
  • Favicon View code

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

  • Text Fields View code

    <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="number">Number Input <abbr title="Required">*</abbr></label>
            <input id="number" 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 View code

    <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>

  • Checkboxes View code

    <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>

    Checkbox *
  • Radio Buttons View code

    <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>

    Radio
  • HTML5 Inputs View code

    <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 View code

    <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>

    Button

    Alternate Button

    Disabled Button

    Text Button

  • Tables View code

    <table>
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</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>

    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
    Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 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
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

  • MOLECULES

  • Byline View code

    <div class="byline">by Author Name</div>

  • Address View code

    <div class="vcard">
    	<div class="org">Company Name</div>
    	<div class="adr">
    		<div class="street-address">1234 Main St.</div>
    		<span class="locality">Anywhere</span>,
    		<span class="postal-code">101010</span>,
    		<abbr class="region" title="California">CA</abbr>
    		<div class="country-name">U.S.A</div>
    	</div>
    	<div class="tel">+1.888.123.4567</div>
    </div>

    Company Name
    1234 Main St.
    Anywhere, 101010, CA
    U.S.A
    +1.888.123.4567
  • Hgroup View code

    <div class="hgroup">
    	<h2>This is the heading group's main heading</h2>
    	<h3>This is the heading group's subheading</h3>
    </div>

    This is the heading group's main heading

    This is the heading group's subheading

  • Blockquote with citation View code

    <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>
    	<cite class="citation">Quote Source</cite>
    </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.

    Quote Source
  • Intro paragraph View code

    <p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>

    The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

  • One column grid View code

    <div class="demo">
    	<!--Grid 1up-->
    	<div class="g g-1up">
    		<div class="gi">1/1</div>
    	</div>
    	<!--End Grid 1up-->
    </div><!--end .demo-->

    1/1
  • Two column grid View code

    <div class="demo">
    	<!--Grid 2up-->
    	<div class="g g-2up">
    		<div class="gi">1/2</div>
    		<div class="gi">1/2</div>
    	</div>
    </div>

    1/2
    1/2
  • Three column grid View code

    <div class="demo">
    	<!--Grid 3up-->
    	<div class="g g-3up">
    		<div class="gi">1/3</div>
    		<div class="gi">1/3</div>
    		<div class="gi">1/3</div>
    	</div>
    </div>

    1/3
    1/3
    1/3
  • Four column grid View code

    <div class="demo">
    	<!--Grid 4up-->
    	<div class="g g-4up">
    		<div class="gi">1/4</div>
    		<div class="gi">1/4</div>
    		<div class="gi">1/4</div>
    		<div class="gi">1/4</div>
    	</div>
    </div>

    1/4
    1/4
    1/4
    1/4
  • Media Block View code

    <div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>

  • Block Headline View code

    <div class="block block-headline">
    	<a href="http://karissademi.github.io/patternlab-jekyll" class="b-inner">
    		<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    		
    	</a>
    </div>

  • Block Hero View code

    <div class="block block-hero">
    	<a href="http://karissademi.github.io/patternlab-jekyll" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_16x9.png" alt="16x9 Image" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
    		</div>
    	</a>
    </div>

  • Block thumbnail headline View code

    <div class="block block-thumb">
    	<a href="http://karissademi.github.io/patternlab-jekyll" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Pattern Lab</h2>
    		</div>
    	</a>
    </div>

  • Block headline View code

    <div class="block block-headline">
    	<a href="http://karissademi.github.io/patternlab-jekyll">
    		<h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    	</a>
    </div>

  • Block Headline inset View code

    <div class="block block-inset">
        <a href="http://karissademi.github.io/patternlab-jekyll" class="inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_16x9.png" alt="16x9 Image" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
    		</div>
    	</a>
    </div>

  • Figure with caption View code

    <figure>
    	<img src="/patternlab-jekyll/images/fpo_16x9.png" alt="16x9 Image" />
    
    	<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
    </figure>

    16x9 Image
    This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
  • Comment Form View code

    <form method="post" action="http://karissademi.github.io/patternlab-jekyll" class="comment-form">
    	<fieldset>
    		<div class="field-container">
    			<label for="comment-name">Name</label>
    			<input id="comment-name" type="text" placeholder="Enter Your Name" />
    		</div>
    		<div class="field-container">
    			<label for="comment-email">Email</label>
    			<input id="comment-email" type="email" placeholder="Your email address" />
    		</div>
    		<div class="field-container">
    			<label for="comment-url">URL</label>
    			<input id="comment-url" type="url" placeholder="Website if you got one" />
    		</div>
    		<div class="field-container">
    			<label for="comment-field">Comment</label>
    			<textarea id="comment-field" rows="5" placeholder="Write you comment here"></textarea>
    		</div>
    	</fieldset>
    </form>

  • Newsletter View code

    <form action="http://karissademi.github.io/patternlab-jekyll" method="post" class="inline-form newsletter-form">
      <fieldset>
        <legend>Sign up for our newsletter</legend>
        <label for="newsletter-scope">Sign up for our newsletter</label>
        <div class="inline-container">
          <input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
        	<button class="btn newsletter-submit">Sign Me Up</button>
    	</div>
      </fieldset>
    </form>

  • Primary Nav View code

    <nav id="nav" class="nav">
    	<ul class="nav-list">
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Home</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">About</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Blog</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Contact</a></li>
    	</ul>
    </nav><!--end .nav-->

  • Breadcrumbs View code

    <ul class="breadcrumbs">
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">Grandparent</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">Parent</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">Child</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">Grandchild</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">Great-Grandchild</a></li>
    </ul>

  • Pagination View code

    <ol class="pagination">
    	<li class="current"><a href="http://karissademi.github.io/patternlab-jekyll">1</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">2</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">3</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">4</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">5</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">6</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">7</a></li>
    </ol>

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
  • Tabs View code

    <div class="tabs">
    	<ul class="tab-list">
    		<li><a href="http://karissademi.github.io/patternlab-jekyll" class="active">Tab 1</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Tab 2</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Tab 3</a></li>
    	</ul>
    </div>

  • Social Share View code

    <div class="social-share">
    	<ul class="social-share-list">
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Like</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Tweet</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Email</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Comment</a></li>
    	</ul>
    </div>

  • Accordion View code

    <div class="accordion">
    	<ul>
    		<li>
    			<a href="#" class="acc-handle">Accordion 1</a>
    			<div class="acc-panel">
    			</div>
    		</li>
    		<li>
    			<a href="#" class="acc-handle">Accordion 2</a>
    			<div class="acc-panel">
    			</div>
    		</li>
    		<li>
    			<a href="#" class="acc-handle">Accordion 3</a>
    			<div class="acc-panel">
    			</div>
    		</li>
    	</ul>
    </div>

  • Single Comment View code

    <li class="comment-container">
    	<div class="comment-meta">
    		<img src="/patternlab-jekyll/images/fpo_avatar.png" alt="Avatar" />
    
    		<h4 class="comment-name"><a href="#">Lacy Way</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>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.</p>
    	</div>
    </li>

  • 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.

  • Alert View code

    <div class="alert alert-">
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • ORGANISMS

  • Header View code

    <!-- Begin .header -->
    <header class="header cf" role="banner">
    	<a href="http://karissademi.github.io/patternlab-jekyll"><img src="/patternlab-jekyll/images/logo.png" class="logo" alt="Logo Alt Text" /></a>
    
    	<a href="#search-form" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>
    	<a href="#nav" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>
    	<nav id="nav" class="nav">
    	<ul class="nav-list">
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Home</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">About</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Blog</a></li>
    		<li><a href="http://karissademi.github.io/patternlab-jekyll">Contact</a></li>
    	</ul>
    </nav><!--end .nav-->
    
    	<form action="http://karissademi.github.io/patternlab-jekyll" method="post" class="inline-form search-form">
        <fieldset>
    	    <legend class="is-vishidden">Search</legend>
    	    <label for="search-field" class="is-vishidden">Search</label>
    	    <input type="search" placeholder="Search" id="search-field" class="search-field" />
    	    <button class="search-submit">
    	    	<span class="icon-search" aria-hidden="true"></span>
    	    	<span class="is-vishidden">Search</span>
    	    </button>
        </fieldset>
    </form>
    
    </header>
    <!-- End .header -->

  • Article Body View code

    <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. </p>
    
    <p><a href="#">Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.</p>
    
    <img src="/patternlab-jekyll/images/fpo_16x9.png" alt="16x9 Image" />
    
    
    <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.
    </p>
    
    <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>
    
    
    <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.
    </p>
    
    <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>
    
    
    <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>
    
    
    <p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
    </p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    16x9 Image

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

    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.

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

    • 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
    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

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

  • Comment Thread View code

    <section class="comments section">
    	<div class="comments-container" id="comments-container">
    		<h2 class="section-title">59 Comments</h2>
    		<form method="post" action="http://karissademi.github.io/patternlab-jekyll" class="comment-form">
    	<fieldset>
    		<div class="field-container">
    			<label for="comment-name">Name</label>
    			<input id="comment-name" type="text" placeholder="Enter Your Name" />
    		</div>
    		<div class="field-container">
    			<label for="comment-email">Email</label>
    			<input id="comment-email" type="email" placeholder="Your email address" />
    		</div>
    		<div class="field-container">
    			<label for="comment-url">URL</label>
    			<input id="comment-url" type="url" placeholder="Website if you got one" />
    		</div>
    		<div class="field-container">
    			<label for="comment-field">Comment</label>
    			<textarea id="comment-field" rows="5" placeholder="Write you comment here"></textarea>
    		</div>
    	</fieldset>
    </form>
    
    		<ul class="comment-list">
    			
    				<li class="comment-container">
    	<div class="comment-meta">
    		<img src="/patternlab-jekyll/images/fpo_avatar.png" alt="Avatar" />
    
    		<h4 class="comment-name"><a href="#">Lacy Way</a></h4>
    	</div>
    	<div class="comment-text">
    		<p>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.</p>
    	</div>
    </li>
    
    			
    		</ul>
    	</div>
    	<ol class="pagination">
    	<li class="current"><a href="http://karissademi.github.io/patternlab-jekyll">1</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">2</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">3</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">4</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">5</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">6</a></li>
    	<li><a href="http://karissademi.github.io/patternlab-jekyll">7</a></li>
    </ol>
    
    </section>

    59 Comments

    • 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.

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
  • Latest Posts View code

    <section class="section latest-posts">
    	<h2 class="section-title">Latest Posts</h2>
    	<ul class="post-list">
    		<li><div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>
    </li>
    		<li><div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>
    </li>
    		<li><div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>
    </li>
    		<li><div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>
    </li>
    		<li><div class="block block-thumb">
        <a href="" class="b-inner">
    		<div class="b-thumb">
    			<img src="/patternlab-jekyll/images/fpo_square.png" alt="Square Thumbnail" />
    
    		</div>
    		<div class="b-text">
    			<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    	</a>
    </div>
    </li>
    	</ul>
    	<a href="#" class="text-btn">View more posts</a>
    </section>

    Latest Posts

    View more posts
  • Recent Tweets View code

    <section class="section related-posts">
    	<h3 class="section-title">Recent Tweets</h3>
    	<ul class="headline-list">
    		<li><h4><a href="#">Headline Lorem ipsum dolor sit amet</a></h4> </li>
    		<li><h4><a href="#">Laborum, molestiae, rerum, dolores eveniet </a></h4> </li>
    		<li><h4><a href="#">quae est fugit distinctio iure odit minus non ipsum </a></h4> </li>
    		<li><h4><a href="#">dolorum deserunt omnis voluptates voluptatum</a></h4> </li>
    		<li><h4><a href="#">nventore dignissimos vel molestiae, rerum, dolore</a></h4> </li>
    		<li><h4><a href="#"></a></h4></li>
    	</ul>
    	<a href="#" class="text-btn">Follow us on Twitter</a>
    </section>