The Guide

A living style for the promotion of visual consistency, a unified approach to UX and devlopment, and to help speed up development time.

Branding

color

Primary : $c-primary
#363636
Background : $c-bg-primary
#fff
Secondary : $c-secondary
#FAE4B6
Background - Secondary : $c-bg-secondary
#F0F0F0
Component : $c-component
#1E3350
Accent : $c-accent
#1E5792
Resting : $c-resting
#DADADA
Back to Top
<!-- Manually add your UI colors here. -->
<div class="sg-colors sg-section">
  <div class="sg-color-grid">
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #363636;"></div>
      <div class="sg-color-name">Primary : $c-primary</div>
      <div class="sg-color-value">#363636</div>
    </div>
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #fff; border: #363636 solid 1px;"></div>
      <div class="sg-color-name">Background : $c-bg-primary</div>
      <div class="sg-color-value">#fff</div>
    </div>
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #FAE4B6;"></div>
      <div class="sg-color-name">Secondary : $c-secondary</div>
      <div class="sg-color-value">#FAE4B6</div>
    </div>
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #F0F0F0;"></div>
      <div class="sg-color-name">Background - Secondary : $c-bg-secondary</div>
      <div class="sg-color-value">#F0F0F0</div>
    </div>
  </div><!--/.sg-color-grid-->
  <div class="sg-color-grid">
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #1E3350;"></div>
      <div class="sg-color-name">Component : $c-component</div>
      <div class="sg-color-value">#1E3350</div>
    </div>
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #1E5792;"></div>
      <div class="sg-color-name">Accent : $c-accent</div>
      <div class="sg-color-value">#1E5792</div>
    </div>
    <div class="sg-color">
      <div class="sg-color-swatch" style="background-color: #DADADA;"></div>
      <div class="sg-color-name">Resting : $c-resting</div>
      <div class="sg-color-value">#DADADA</div>
    </div>
  </div><!--/.sg-color-grid-->
</div><!--/.sg-colors-->

fonts

Primary Font:
Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;
Primary Font Italic:
Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;
Primary Font Bold:
Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;
Back to Top
<!-- Manually add your fonts here. -->
<div class="sg-font-stacks sg-section">
  <dl class="sg-font-list">
    <dt>Primary Font:</dt>
    <dd style='font-family: Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;'>Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

    <dt>Primary Font Italic:</dt>
    <dd style='font-family: Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif; font-style: italic;'>Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

    <dt>Primary Font Bold:</dt>
    <dd style='font-family: Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: 800;'>Gotham, "HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

  </dl>
</div>

sizes

$micro : 0.750em
$small : 0.875em
$body : 1em
$halfstep : 1.125em
$medium : 1.5em
$large : 2.25em
$xLarge : 3.375em
Back to Top
<!-- Manually add your fonts here. -->
<div class="sg-font-stacks sg-section">
  <dl class="sg-font-list">
    <dd style='font-size: 0.75em'>$micro : 0.750em</dd>
    <dd style='font-size: 0.875em'>$small : 0.875em</dd>
    <dd style='font-size: 1em'>$body : 1em</dd>
    <dd style='font-size: 1.125em'>$halfstep : 1.125em</dd>
    <dd style='font-size: 1.5em'>$medium : 1.5em</dd>
    <dd style='font-size: 2.25em'>$large : 2.25em</dd>
    <dd style='font-size: 3.375em'>$xLarge : 3.375em</dd>
  </dl>
</div><!--/.sg-font-stacks-->

Base HTML

address

Usage

Add your personalized documentation here.

Company Name, Inc.
811 7th Ave, Suite 700
Manhattan, NY 10019
USA
Back to Top
<address>
  Company Name, Inc.<br>
  811 7th Ave, Suite 700<br>
  Manhattan, NY 10019<br>
  USA
</address>

blockquote

Usage

Add your personalized documentation here.

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.
Back to Top
<blockquote>
  <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
</blockquote>

<blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>

headings

Page Title

Intro Title

Hero Title

Content Title

Content Subtitle

Preview Title Small (h2)

Preview Title (h3)

Preview Title (h2)

Header 3

Bio Name

Back to Top
<h1>Page Title</h1>
<h2>Intro Title</h2>
<h2 class="hero_title">Hero Title</h2>
<h2 class="content_title">Content Title</h2>
<h3 class="content_subtitle">Content Subtitle</h3>
<h2 class="preview_title-small">Preview Title Small (h2)</h2>
<h3 class="preview_title">Preview Title (h3)</h3>
<h3 class="preview_title">Preview Title (h2)</h3>
<h3>Header 3</h3>
<h3 class="bio_name">Bio Name</h3>

list ordered

Usage

Add your personalized documentation here.

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1
Back to Top
<ol>
  <li>list item 1</li>
  <li>list item 1
    <ol>
      <li>list item 2</li>
      <li>list item 2
        <ol>
          <li>list item 3</li>
          <li>list item 3</li>
        </ol>
      </li>
      <li>list item 2</li>
      <li>list item 2</li>
    </ol>
  </li>
  <li>list item 1</li>
  <li>list item 1</li>
</ol>

list unordered

Usage

Add your personalized documentation here.

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1
Back to Top
<ul>
  <li>list item 1</li>
  <li>list item 1
    <ul>
      <li>list item 2</li>
      <li>list item 2
        <ul>
          <li>list item 3</li>
          <li>list item 3</li>
        </ul>
      </li>
      <li>list item 2</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>list item 1</li>
  <li>list item 1</li>
</ul>

paragraphs

Standard Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nihil ipsum id harum accusantium necessitatibus expedita. Ratione, illo obcaecati nulla, nostrum itaque inventore ad nihil, in magni fuga maxime aliquam.

Intro Blurb: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt beatae, eaque similique maiores pariatur libero saepe cumque! Qui, cupiditate numquam temporibus eveniet officia alias, non magnam! Quos quod ipsa itaque.

Bio Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt beatae, eaque similique maiores pariatur libero saepe cumque! Qui, cupiditate numquam temporibus eveniet officia alias, non magnam! Quos quod ipsa itaque.

Back to Top
<p><b>Standard Paragraph:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nihil ipsum id harum accusantium necessitatibus expedita. Ratione, illo obcaecati nulla, nostrum itaque inventore ad nihil, in magni fuga maxime aliquam.</p>
<p class="intro_blurb"><b>Intro Blurb:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt beatae, eaque similique maiores pariatur libero saepe cumque! Qui, cupiditate numquam temporibus eveniet officia alias, non magnam! Quos quod ipsa itaque.</p>
<p class="bio_content"><b>Bio Content:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt beatae, eaque similique maiores pariatur libero saepe cumque! Qui, cupiditate numquam temporibus eveniet officia alias, non magnam! Quos quod ipsa itaque.</p>

text elements

Usage

Add your personalized documentation here.

The a element example

The abbr element and an abbr element with title examples

The b element example

The cite element example

h1, h2 {
	@extend %displayFont;
}

h1  { 
	font-size: $xLarge;
}

h2  { 
	font-size: $large;
}

The em element example

The i element example

The mark element example

The q element example

The q element inside a q element example

The samp element example

The small element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example

Back to Top
<p>The <a href="#">a element example</a></p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p><pre><code>h1, h2 {
	@extend %displayFont;
}

h1  { 
	font-size: $xLarge;
}

h2  { 
	font-size: $large;
}</code></pre></p>
<p>The <em>em element</em> example</p>
<p>The <i>i element</i> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p>

video

Back to Top
<div class="video_container">
	<video class="video lazyload" data-poster="images/poster.png" controls preload="none">
		<source src="video/videoArchive-m.mp4" type="video/mp4" />
		<source src="video/videoArchive-m.ogv" type="video/ogg" />
		<track src="video/test.vtt" label="Captions" kind="captions" srclang="en" default type="text/vtt">
	</video>
	<a href="https://vimeo.com/channels/staffpicks/136061500" class="video_link" >Video</a>
</div>

Patterns

bio

Miles Roxas

Co-Founder, Creative Director

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.

Back to Top
<div class="bio">
	<div class="bio_img" >
		<img src="images/bio_img.png" alt="" >
	</div>
	<h3 class="bio_name">Miles Roxas</h3>
	<div class="bio_title">Co-Founder, Creative Director</div>
	<p class="bio_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.</p>
</div>

contactInfo unique

Visit

240 Kent Ave
Brooklyn, NY 11294
Back to Top
<div class="contactInfo-unique">
	<h3>Visit</h3>
	<address>
		240 Kent Ave<br/>
		Brooklyn, NY 11294
	</address>
	<div><a href="#">Get Directions</a></div>
</div>
Back to Top

<h3 class="h-center">Visit</h3>
<div class="contactInfo">
	<address>
		240 Kent Ave<br/>
		Brooklyn, NY
	</address>
	<div>315-558-4577</div>
	<div><a href="mailto:[email protected]">[email protected]</a></div>
</div>

contentImagePair right

Not Holistic. Unified.

Integrate Everything

Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.

Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.

Back to Top
<section class="content">
	<div class="imgConPair imgConPair-right js-animateScroll">	
 					
 		<div class="imgConPair_img">
 			<img src="images/approach_first.jpg" alt="" class="intro_img lazyload">
 		</div>
 	
 		<div class="imgConPair_content">
 			<h2 class="imgConPair_title content_title">Not Holistic. Unified.</h2>
 			<h3 class="imageConPair_subtitle content_subtitle">Integrate Everything</h3>
 			<p>Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.</p>
			<p>Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.</p>
 		</div>
 	
 	</div>
</section>

contentImagePair

Not Holistic. Unified.

Integrate Everything

Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.

Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.

Back to Top
<section class="content">
	<div class="imgConPair js-animateScroll">
 					
 		<div class="imgConPair_img">
 			<img src="images/approach_first.jpg" alt="" class="intro_img lazyload">
 		</div>
 	
 		<div class="imgConPair_content">
 			<h2 class="imgConPair_title content_title">Not Holistic. Unified.</h2>
 			<h3 class="imageConPair_subtitle content_subtitle">Integrate Everything</h3>
 			<p>Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.</p>
			<p>Instead, we approach our relationships with a diagnostic perspective. You have problems and goals, we form solutions and ideas for how to reach those goals. We consistently innovate to adapt to your audience as they grow and change, offering new ideas at every step of that evolution.</p>
 		</div>
 	
 	</div>
</section>
Back to Top
<div class="cta-contact_container l-row">
	<a href="#" class="cta-contact">
		<span>Get In Touch With Us</span>
	</a>
</div>
Back to Top
<footer class="footer">
	<section class="footer_contact">
		<h2 class="a-hide">Contact Suits &amp; Sandals</h2>
		<div class="l-row l-container">
			<div class="l-col_thrd">
				<h3>New Bussiness</h3>
				<div class="contactInfo">
					<div><a href="mailto:[email protected]">[email protected]</a></div>
					<div>315-558-4577</div>
				</div>
			</div>
			<div class="l-col_thrd">
				<h3>Visit</h3>
				<div class="contactInfo">
					<address>
						240 Kent Ave<br/>
						Brooklyn, NY
					</address>
				</div>
			</div>
			<div class="l-col_thrd">
				<h3>Connect</h3>
				<div>
					<a href="#" class="btn-social"><img src="images/facebook.png" alt="Facebook"></a>
					<a href="#" class="btn-social"><img src="images/twitter.png" alt="Twitter"></a>
				</div>
			</div>
		</div>
	</section>
	<section class="footer_copyright">
		<div>Suits &amp; Sandal &copy; 2015</div>
	</section>
</footer>

form

Let's Talk
Back to Top
<div class="lazyload" data-script="js/contact.min.js" id="form" name="form">

	<form method="post" accept-charset="utf-8" >
	
		<div id="form">
			<fieldset>
				<legend>Let's Talk</legend>
				
				<div class="error_box"></div>

				<div class="input_container">
					<label for="questions[getAtUsBoom_name]">
						Your Name							
					</label>
	
					<input type="text" required aria-required="true" data-val-required="'Name' is required" data-val="true" class="text"  id="getAtUsBoom_name" name="questions[getAtUsBoom_name]" value="">
				</div>
	
	
				<div class="input_container">
					<label for="questions[getAtUsBoom_email]">
						Your Email
					</label>
	
					<input type="email" required="" aria-required="true" data-val-required="'Email' is required" data-val="true" class="text"  id="getAtUsBoom_email" name="questions[getAtUsBoom_email]" value="">
				</div>
	
				<div class="input_container">
					<label for="questions[getAtUsBoom_email]" class="a-hide">
						Subject
					</label>
	
					<select name="" id="">
						<option value="">Subject</option>
						<option value="">Bussiness</option>
						<option value="">Press</option>
						<option value="">Job/Internship Inquery</option>
						<option value="">General</option>
					</select>
				</div>
	
			
				<div class="input_container">
					<label for="questions[getAtUsBoom_wordsWordsWords]">
						Begin your message...
					</label>
	
					<textarea required="" aria-required="true" data-val-required="'Words words words...' is required" data-val="true" class="text"  cols="20" rows="2" id="getAtUsBoom_wordsWordsWords" name="questions[getAtUsBoom_wordsWordsWords]"></textarea>
				</div>			
					
				<div class="btns">
					<input type="submit" class="submit action" id="btnSubmit" value="Submit" name="btnSubmit">
				</div>
	
			</fieldset>
		</div>
	</form>
</div>

gridded list

A Gridded List

Back to Top
<div class="content">
	<div class="list-gridded_container l-container">
		<h2 class="lists_title content_title">A Gridded List</h2>
		<ul class="list-gridded">
			<li class="list-gridded_item"><a href="#">Cava Construction &amp; Development</a></li>
			<li class="list-gridded_item">ReGen Medical</li>
			<li class="list-gridded_item"><a href="#">The Jewish Foundation for the Rightous</a></li>
			<li class="list-gridded_item"><a href="">Infinite Explorers</a></li>
			<li class="list-gridded_item"><a href="">Nationwide Coils</a></li>
			<li class="list-gridded_item">Savage Associates</li>
			<li class="list-gridded_item"><a href="">Electric Lady Studios</a></li>
			<li class="list-gridded_item">Central Jersey Newborn Care</li>
			<li class="list-gridded_item">Markle Foundation</li>
			<li class="list-gridded_item">Dualtone Records</li>
			<li class="list-gridded_item">Competitive Telecoms Group</li>
			<li class="list-gridded_item">Indika Entertainment Advertising</li>
			<li class="list-gridded_item">Merrill Lynch Wealth Management</li>
			<li class="list-gridded_item">iRocku</li>
			<li class="list-gridded_item">Johnny Ex., Inc.</li>
			<li class="list-gridded_item"><a href="">Still the One Distillery</a></li>
			<li class="list-gridded_item">Verizon</li>
			<li class="list-gridded_item">Xeno Productions</li>
		</ul>
	</div>
</div>
Back to Top
<header class="header">

	<h1 class="title">
		<a href="#" class="title_link">
			Suits &amp; Sandals
		</a>
	</h1>

	<div class="a-tab"><a href="#skippedNav" id="backToNav">Skip Navigation</a></div>

	<nav class="nav-primary">
		<ul class="nav-primary_list">
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					Home
			    </a>
			</li>
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					About
			    </a>
			</li>
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					Work
			    </a>
			</li>
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					Thoughts
			    </a>
			</li>
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					The Lab
			    </a>
			</li>
			<li class="nav-primary_item">
			    <a class="nav-primary_link" href="#">
					Contact
			    </a>
			</li>
		</ul>
	</nav>

	<div class="a-tab"><a href="#backToNav" id="skippedNav">Return to Navigation</a></div>
		
</header>

hero

Connect People, Solve Problems

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cum, eius mollitia sed, accusamus aspernatur ea praesentium deleniti magnam consequatur cupiditate vero. Facere quos consequuntur, explicabo dignissimos! Error, velit, a?

Back to Top
<header class="hero">
	<img sizes="100vw" srcset="images/s-hero-home.jpg 400w, images/m-hero-home.jpg 800w, images/l-hero-home.jpg 1200w" src="images/s-hero-home.jpg" alt="">
	<div class="hero_inner">
		<h2 class="hero_title">Connect People, Solve Problems</h2>
		<p class="hero_blurb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cum, eius mollitia sed, accusamus aspernatur ea praesentium deleniti magnam consequatur cupiditate vero. Facere quos consequuntur, explicabo dignissimos! Error, velit, a?</p>
		<div class="btn"><a href="#">Watch Our Reel</a></div>
	</div>
</header>

intro

About

Ideas That Build Relationships

Our Philosophy

We understand that the web is more than just a powerful tool. It’s a place for expression, and an extension of our identities. Our calling is to partner with brands that are looking to access that emotion, and help them forge meaningful connections with their consumers. Ones that bonds people and businesses over shared interests and values. Since 2011, we’ve used this philosophy to help brands redefine, innovate and grow. Here’s how.

Back to Top
<header>

	<h1 class="page_title">About</h1>
			
	<div class="intro">
		
		<img src="images/approach_intro.jpg" alt="" class="intro_img">
				
		<h2 class="intro_title">Ideas That Build Relationships</h2>
		<h3 class="intro_subtitle" >Our Philosophy</h3>
				
		<p class="intro_blurb">We understand that the web is more than just a powerful tool. It’s a place for expression, and an extension of our identities. Our calling is to partner with brands that are looking to access that emotion, and help them forge meaningful connections with their consumers. Ones that bonds people and businesses over shared interests and values. Since 2011, we’ve used this philosophy to help brands redefine, innovate and grow. Here’s how.  </p>
	</div>

</header>

lists

A Group of Lists

Strategy

  • Content Strategy
  • Information Architecture
  • User Research
  • Digital Research
  • Organic SEO
  • Inbound Marketing Strategy
  • Organic SEO
  • Inbound Marketing Strategy

Strategy

  • Content Strategy
  • Information Architecture
  • User Research
  • Digital Research
  • Organic SEO
  • Inbound Marketing Strategy

Strategy

  • Content Strategy
  • Information Architecture
  • User Research
  • Digital Research
  • Organic SEO
  • Inbound Marketing Strategy

Strategy

  • Content Strategy
  • Information Architecture
  • User Research
  • Digital Research
  • Organic SEO
  • Inbound Marketing Strategy
  • Organic SEO
  • Inbound Marketing Strategy

Strategy

  • Content Strategy
  • Information Architecture
  • Organic SEO
  • Inbound Marketing Strategy

Strategy

  • Content Strategy
  • Information Architecture
  • User Research
  • Digital Research
  • Organic SEO
  • Inbound Marketing Strategy
Back to Top
<div class="content">
	<div class="lists l-container">
		<h2 class="lists_title content_title">A Group of Lists</h2>
	
			<div class="lists_container">
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>User Research</li>
						<li>Digital Research</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
					
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>User Research</li>
						<li>Digital Research</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
					
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>User Research</li>
						<li>Digital Research</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
					
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>User Research</li>
						<li>Digital Research</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
					
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
					
				<div class="lists_list">
					<h3>Strategy</h3>
					<ul>
						<li>Content Strategy</li>
						<li>Information Architecture</li>
						<li>User Research</li>
						<li>Digital Research</li>
						<li>Organic SEO</li>
						<li>Inbound Marketing Strategy</li>
					</ul>
				</div>
			</div>
	</div>
</div>

pagination

Back to Top
<nav class="pagination">
	<h3 class="a-hide">Pagination</h3>
	<ul class="pagination_list">
		<li class="pagination_item"><a href="#">1</a></li>
		<li class="pagination_item"><a href="#">2</a></li>
		<li class="pagination_item"><a href="#">3</a></li>
		<li class="pagination_item"><a href="#">4</a></li>
	</ul>
</nav>

post header

Web Design is NOT Dead. You're Just Talking About it Wrong.

Efficiency, speed, accessibility, theory, strategy, and code, web design is still a vibrant part of experience design.

Back to Top
<header class="post_header">
	<h1 class="post_title">Web Design is NOT Dead. You're Just Talking About it Wrong.</h1>
	<p class="post_blurb">Efficiency, speed, accessibility, theory, strategy, and code, web design is still a vibrant part of experience design.</p>
	<div class="post_meta"><span>By Nick Dank</span> | <span>July 17, 2015</span>  | <span><a href="#">Web Design</a>, <a href="#">Insights</a></span></div>
</header>
Back to Top

<a href="#" class="preview preview-article preview-ph1 ">
	<h2 class="preview_title">Web Design is NOT Dead. You're Just Talking About it Wrong.</h2>
		<p class="preview_blurb">Efficiency, speed, accessibility, theory, strategy, and code, web design is still a vibrant part of experience design.</p>
		<div class="preview_byline btn-var">By Nick Dank | Jully 17, 2015</div>
</a>
Back to Top
<a href="#" class="preview preview-caseStudy preview-ph1">
	<picture class="preview_img">
		<img src="images/preview_img.jpg" />
	</picture>
	<h2 class="preview_title-small">
		Netionwide Coils
	</h2>
	<h3 class="preview_title">Outperform the Competition</h3>
	<div class="preview_btn btn">View Work</div>
</a>

section header

Back to Top
<header class="header-section">
	<div class="header-section_inner">
		<h1 class="header-section_title">The Brief</h1>

		<nav class="nav-secondary">
			<ul class="nav-secondary_list">
				<li class="nav-secondary_item">
					<a class="nav-secondary_link" href="#">
					    Approach
					</a>
				</li>
				<li class="nav-secondary_item">
					<a class="nav-secondary_link" href="#">
					    Capabilities
					</a>
				</li>
				<li class="nav-secondary_item">
					<a class="nav-secondary_link" href="#">
					    Clients
					</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
Back to Top
<aside class="smartLink_container">
	<a href="#" class="smartLink">
		<span>View Capabilities</span>
	</a>
</aside>