Style Guide

Typography

Header 1

	<h1>Header 1</h1>
	

Header 2

	<h2>Header 2</h2>
	

Header 3

	<h3>Header 3</h3>
	

Header 4

	<h4>Header 4</h4>
	
Header 5
	<h5>Header 5</h5>
	
Header 6
	<h6>Header 6</h6>
	

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).


Header 1

Subheading 1

	<hgroup>
	    <h1>Header 1</h1>
	    <h1 class="subheading">Subheading 1</h1>
	</hgroup>
	

Header 2

Subheading 2

	<hgroup>
	    <h2>Header 2</h2>
	    <h2 class="subheading">Subheading 2</h2>
	</hgroup>
	

Header 3

Subheading 3

	<hgroup>
	    <h3>Header 3</h3>
	    <h3 class="subheading">Subheading 3</h3>
	</hgroup>
	

Header 4

Subheading 4

	<hgroup>
	    <h4>Header 4</h4>
	    <h4 class="subheading">Subheading 4</h4>
	</hgroup>
	
Header 5
Subheading 5
	<hgroup>
	    <h5>Header 5</h5>
	    <h5 class="subheading">Subheading 5</h5>
	</hgroup>
	

We use 8 faces from Proxima Nova. They are Light, Regular, Regular Italic, Bold, Extrabold, Extrabold Italic, Black, Black Italic. Below are samples of these with font weight values for css use.

Proxima Nova, Light 300

Proxima Nova, Regular, 400

Proxima Nova, Regular Italic, 400

Proxima Nova, Bold, 700

Proxima Nova, Extrabold, 800

Proxima Nova, Extrabold Italic, 800

Proxima Nova, Black, 900

Proxima Nova, Black Italic, 900


An alternate serif font is FF Tisa Pro Regular. font-weight.

Heading 1: ff-tisa-web-pro, 400

Heading 2: ff-tisa-web-pro

Heading 3: ff-tisa-web-pro

The code font is Monaco, Courier New, monospace


Paragraphs

The first paragraph can have a class of lead to show emphasis

	<p class="lead">
	

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Blockquotes

Short blockquote

"This stylesheet is going to help so freaking much." -Blockquote

Long blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.

Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.

Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.

List Types

Unordered List

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item

Nested unordered list

  • 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

Ordered list

Ordered lists are marked up using ‹ol› tags. An ordered list may have various numbering schemes presented through CSS.

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
  6. Ordered list item

Nested Ordered Lists

  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

Definition List

Description name
Description value
Description name
Description value
Description name
Description value

Misc Stuff - abbr, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

[top]