Here’s the style guide for blog posts and pages. Below you will see examples of common markup, default styles and examples of advanced styling.

Table of Contents

• Headers
• Text Style
• Align Text
• Blockquote
• Drop Cap
• Align Images
• Responsive Video
• Fluid Width
• Columns
• Page Layout
• Flowing Columns
• Tables
• Boxes
• Buttons
• Anchor Links
• Colors

Headers

• Never make headings bold.
• Do not include an h1 in blog posts. The blog post title creates an h1.
• Only use one h1 per page. It should be the first element on the page.

Text Style

.text_xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

(default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_small

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

<span class="highlight">[TEXT]</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Align Text

Blockquote

<blockquote>
   <p>[QUOTE]</p>
   <p class="text_small">
      <em>&mdash;[SOURCE]</em>
   </p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

They’ve done studies, you know. 60% of the time, it works everytime.

— Brian Fantana in Anchorman

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Drop Cap

<span class="drop_cap">[LETTER]</span>

T eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Align Images

Content will wrap around the image with the exception of .align_center.

• .align_left
• .align_right
• .align_center

<img class="align_left" src="example.jpg" alt="image-description">

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Responsive Video

This should work with all of the major video sources (youtube, vimeo, etc.) as long as they provide an embed that uses an iframe.

<div class="responsive_video break_small">
  [INSERT IFRAME EMBED CODE]
<div>

Fluid Width

Add a width(25, 35 … 75) AND .align_ left OR right to quotes, boxes or any div.

<div class="align_right width_35 box">[CONTENT]</div>

<p>[CONTENT]</p>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Columns

<div class="cols">
   <div class="col_50">[CONTENT]</div>
   <div class="col_50">[CONTENT]</div>
</div>

Note: Remove the width and height attributes, so images can scale proportionally to their parent container, specifically on mobile devices.

Page Layout

An example of markup for pages with content and a sidebar.

<div class="cols">
  <div class="col_75">
    [CONTENT]
  </div>
  <div class="col_25 text_small">
    [SIDEBAR]
  </div>
</div>

Flowing Columns

Flowing columns will flow content from one column to the next, just like a newspaper.

• .cols_flow_two
• .cols_flow_three
• .cols_flow_four

Note: This is NOT supported in IE<=9. The content will appear in a single continuous column.

<div class="cols_flow_two">
   <p>[CONTENT]</p>
</div>

Lorem Ipsum Dolor

Tables

<div class="table_index">
   <div class="table_row_header">
      <div class="table_cell">[LABEL]</div>
      <div class="table_cell">[LABEL]</div>
   </div>
   <div class="table_row">
      <div class="table_cell">[TEXT]</div>
      <div class="table_cell">[TEXT]</div>
   </div>
</div>

Boxes

<div class="box">
   <h3>[HEADING]</h3>
   <p>[CONTENT]</p>
</div>

Buttons

<a class="btn text_small" href="page.html">[TEXT]</a>

.btn .text_small .btn .btn .btn_gray

Anchor Links

Add id="a-headername" to a heading, then link to it with href="#a-headername".

Current Page

Link to anchor on the same page:

<h2 id="a-headername">[HEADING]</h2>

<a href="#a-headername">[TEXT]</a>

External Anchor

Link to anchor from email:

<h2 id="a-headername">[HEADING]</h2>

<a href="http://example.com/article#a-headername">[TEXT]</a>