Colors

Backgrounds

Backgrounds 
<div class="bg-grey">This is content</div>
<div class="bg-grey-light">This is content</div>
<div class="bg-grey-lighter">This is content</div>
<div class="bg-grey-dark">This is content</div>
<div class="bg-blue">This is content</div>
<div class="bg-blue-light">This is content</div>
<div class="bg-blue-lighter">This is content</div>

To set a background color for a given element, use a class of bg-colorname.

This is content
This is content
This is content
This is content
This is content
This is content
This is content
Environment 
 <div class="bg-grey-lighter light md-padding">
      	<h1>Heading 1</h1>
      	<h2>Heading 2</h2>
      	<h3>Heading 3</h3>
      	<p>This is a paragraph</p>
      	<a class="btn">Button</a>
      </div>
       <div class="bg-blue dark md-padding">
      	<h1>Heading 1</h1>
      	<h2>Heading 2</h2>
      	<h3>Heading 3</h3>
      	<p>This is a paragraph</p>
      	<a class="btn">Button</a>
      </div>

Set the environment background using the classname light or dark. This will change the text and button colors accordingly.

Heading 1

Heading 2

Heading 3

This is a paragraph

Button

Heading 1

Heading 2

Heading 3

This is a paragraph

Button

Layout

Grid 
<div class="grid-12"></div>
<div class="grid-11"></div><div class="grid-1"></div>
<div class="grid-10"></div><div class="grid-2"></div>
<div class="grid-9"></div><div class="grid-3"></div>
<div class="grid-8"></div><div class="grid-4"></div>
<div class="grid-7"></div><div class="grid-5"></div>
<div class="grid-6"></div><div class="grid-6"></div>
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
	.column(12);
}

@media all and (min-width:38em){

.grid-1 {
	.column(1);
}

.grid-2 {
	.column(2);
}

.grid-3 {
	.column(3);
}

.grid-4 {
	.column(4);
}

.grid-5 {
	.column(5);
}

.grid-6 {
	.column(6);
}

.grid-7 {
	.column(7);
}

.grid-8 {
	.column(8);
}

.grid-9 {
	.column(9);
}

.grid-10 {
	.column(10);
}

.grid-11 {
	.column(11);
}

.grid-12 {
	.column(12);
}
}

The grid is based on a fluid 12-column grid and is a customized version of semantic.gs.

.column(12)

.column(11)

.column(1)

.column(10)

.column(2)

.column(9)

.column(3)

.column(8)

.column(4)

.column(7)

.column(5)

.column(6)

.column(6)

2-column lists

Multi-column lists can be created using the classes, .two or .three. To use this style, the <ul> should be a child of an element with the class: .content

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
3-column lists

Multi-column lists can be created using the classes, .two or .three. To use this style, the <ul> should be a child of an element with the class: .content

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Typography

Fonts

Headlines and body text should be set in Proxima Nova, using the class: .font-headline and .font-body

Proxima Nova

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

Heading-1 
<h1>Heading One</h1>

Heading One

Heading-2 
<h2>Heading Two</h2>

Heading Two

Heading-2 (left-aligned) 
<h2 class="align-left">Heading Two</h2>

Heading Two

Heading-3 
<h3>Heading Three</h3>

Heading Three

Heading-4 
<h4>Heading Four</h4>

Heading Four

Unordered List 
<div class="content">
	<ul>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>
</div>

Content lists include softer bullets than the default list style. To use this style, the <ul> should be a child of an element with the class: .content

  • List Item
  • List Item
  • List Item
Paragraph 
<p>This is a paragraph</p>

This is a paragraph

Large Paragraph 
<p class="large">This is a large paragraph</p>

This is a large paragraph

Small Paragraph 
<p class="small">This is a small paragraph</p>
<p><small>This is a small paragraph</small></p>

This is a small paragraph

This is a small paragraph

Blockquote 
<blockquote>
	This is an example quotation that uses the blockquote tag.
	<br />Here is another line to make it look bigger.
</blockquote>
This is an example quotation that uses the blockquote tag.
Here is another line to make it look bigger.

Buttons

Buttons in Dark Environment
Button Button Button Button Button Button Button Button

Forms

Input
Radio Buttons
Checkbox

Media

Image Wide

Wide images should be used for larger screens.

Image Thumb

The image thumb aspect ratio is used for smaller size images and as a small screen alternative when art directing wide images.

Elements

Borders
Video Callout

Featured on the homepage, this section highlghts a video and provides a bit of content and a call to action.

video-1-thumb Play

This is a headline

This is some content

Button

video-1-thumb Play

This is a headline

This is some content

Button

Icons

Icons

Icons created with icomoon.

Mixins

.border-radius()
.border-radius(@radius: 4px) {
	border-radius: @radius;
}
.transition()
.transition(@time: 0.2s){
	transition: all @time ease-in-out;
}
.letter-spacing()
.letter-spacing(@size:0.12em){
	letter-spacing: @size;
}
.box()
.box(@color:@blue) {
	background: @color;
	padding: 2em;
	.border-radius;
}