Styleguide
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 anh1
. - Only use one
h1
per page. It should be the first element on the page.
<h1>
Lorem Ipsum Dolor Sit
<h2>
Lorem Ipsum Dolor Sit
<h3>
Lorem Ipsum Dolor Sit
<h4>
Lorem Ipsum Dolor Sit
<h5>
Lorem Ipsum Dolor Sit
<h6>
Lorem Ipsum Dolor Sit
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
.text_center
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.
.text_right
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.
Blockquote
<blockquote> <p>[QUOTE]</p> <p class="text_small"> <em>—[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>
width_35 align_right box_gray
Lorem ipsum dolor sit amet, consectetur adipisicing elit
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>
.col_50
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.col_50
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.col_33
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
.col_33
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
.col_33
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
.col_66
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.
.col_33
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
.col_25
Lorem ipsum dolor sit amet, consectetur.
.col_25
Lorem ipsum dolor sit amet, consectetur.
.col_25
Lorem ipsum dolor sit amet, consectetur.
.col_25
Lorem ipsum dolor sit amet, consectetur.
.col_75
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.
.col_25
Lorem ipsum dolor sit amet, consectetur.
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
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- Alabama
- Alaska
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- Florida
- Georgia
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Washington
- West Virginia
- Wisconsin
- Wyoming
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>
.box
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.
.box_gray
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.
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>