Font styling

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Styling

Big Title [class="title--big"]

Bigger Title [class="title--bigger"]

Biggest Title [class="title--biggest"]

Uppercase text [class="text--uppercase"]

Underline text [class="text--underline"]

Text align left [class="text--left"]

Text align center [class="text--center"]

Text align right [class="text--right"]

Text that's bigger than normal size (18px) [class="text--big"]

Text that's bigger than normal size (21px) [class="text--bigger"]

Text that's bigger than normal size (24px) [class="text--biggest"]

Text that's smaller than normal size (14px) [class="text--small"]

Text that's smaller than normal size (12px) [class="text--smaller"]

Text that's smaller than normal size (11px) [class="text--smallest"]

---

Color classes

Yellow text [class="color--yellow"] (can be applied to any element)

Black text [class="color--black"] (can be applied to any element)

Grey text [class="color--grey"] (can be applied to any element)

---

Background classes

Yellow background [class="bg--yellow"] (can be applied to any element)

Black background [class="bg--black"] (can be applied to any element)

White background [class="bg--white"] (can be applied to any element)

Grey background [class="bg--grey"] (can be applied to any element)

---

Link Styling

Standard Link

Primary Button [class="button button--primary"] or [class="button"]

Secondary Button [class="button button--secondary"]

Tertiary Button [class="button button--tertiary"]

Arrow up [class="button button--arrow-up"]

Arrow right [class="button button--arrow-right"]

Arrow down [class="button button--arrow-down"]v

Arrow left [class="button button--arrow-left"]

---

Grid

See http://getbootstrap.com/css/#grid for explaination

---

Margins (helper classes)

.push { margin: 30px!important; }
.push--top { margin-top: 30px!important; }
.push--right { margin-right: 30px!important; }
.push--bottom { margin-bottom:30px!important; }
.push--left { margin-left: 30px!important; }
.push--ends { margin-top: 30px!important; margin-bottom:30px!important; }
.push--sides { margin-right: 30px!important; margin-left: 30px!important; }

.push-half { margin: 15px!important; }
.push-half--top { margin-top: 15px!important; }
.push-half--right { margin-right: 15px!important; }
.push-half--bottom { margin-bottom:15px!important; }
.push-half--left { margin-left: 15px!important; }
.push-half--ends { margin-top: 15px!important; margin-bottom:15px!important; }
.push-half--sides { margin-right: 15px!important; margin-left: 15px!important; }

.flush { margin: 0!important; }
.flush--top { margin-top: 0!important; }
.flush--right { margin-right: 0!important; }
.flush--bottom { margin-bottom:0!important; }
.flush--left { margin-left: 0!important; }
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
.flush--sides { margin-right: 0!important; margin-left: 0!important; }

---

Padding (helper classes)

.soft { margin: 30px!important; }
.soft--top { margin-top: 30px!important; }
.soft--right { margin-right: 30px!important; }
.soft--bottom { margin-bottom:30px!important; }
.soft--left { margin-left: 30px!important; }
.soft--ends { margin-top: 30px!important; margin-bottom:30px!important; }
.soft--sides { margin-right: 30px!important; margin-left: 30px!important; }

.soft-half { margin: 15px!important; }
.soft-half--top { margin-top: 15px!important; }
.soft-half--right { margin-right: 15px!important; }
.soft-half--bottom { margin-bottom:15px!important; }
.soft-half--left { margin-left: 15px!important; }
.soft-half--ends { margin-top: 15px!important; margin-bottom:15px!important; }
.soft-half--sides { margin-right: 15px!important; margin-left: 15px!important; }

.hard { margin: 0!important; }
.hard--top { margin-top: 0!important; }
.hard--right { margin-right: 0!important; }
.hard--bottom { margin-bottom:0!important; }
.hard--left { margin-left: 0!important; }
.hard--ends { margin-top: 0!important; margin-bottom:0!important; }
.hard--sides { margin-right: 0!important; margin-left: 0!important; }

---

Form

Name *

Email *

State * Pennsylvania Canada

Questions / Comments Questions or comments

Checkbox

Radio button Radio button2

---

Tables

Heading 1	Heading 2	Heading 3	Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.
Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.
Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.
Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.
Donec vel condimentum ligula. Proin suscipit at sapien eget viverra. Vivamus commodo lacinia sagittis. Curabitur non mauris in elit gravida congue. Sed hendrerit, tortor id congue cursus, nulla neque elementum massa, ut lacinia diam est at massa. Vivamus non elit quis ipsum sagittis lacinia.

Heading 1	Heading 2	Heading 3	Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.
Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.
Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.
Vestibulum non orci. Sed vestibulum magna sit amet est porttitor, quis semper velit fringilla. Maecenas vitae rutrum dui.	Pretium lectus. Morbi congue a est et hendrerit. Nullam lectus turpis, dignissim et ante in, mattis cursus sem.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat nulla vel fermentum bibendum.	Duis id justo euismod, ullamcorper metus sit amet, vestibulum ex. Duis ut purus ornare, fermentum nisi facilisis.
Donec vel condimentum ligula. Proin suscipit at sapien eget viverra. Vivamus commodo lacinia sagittis. Curabitur non mauris in elit gravida congue. Sed hendrerit, tortor id congue cursus, nulla neque elementum massa, ut lacinia diam est at massa. Vivamus non elit quis ipsum sagittis lacinia.

---

Lists

Unordered list

• Suspendisse mattis libero tincidunt turpis consectetur viverra. Etiam efficitur urna imperdiet sodales dignissim. Donec finibus neque a purus maximus tincidunt. Aenean eget nisi ante. Donec aliquet laoreet felis, id sodales odio lobortis feugiat.
• Cras a lorem nunc. Aenean tincidunt at nulla et pretium.
• Sed ac justo convallis, sodales ante sit amet, rutrum est.
• Donec justo erat, hendrerit nec sem at, accumsan consectetur arcu. Donec mi lacus, lacinia laoreet felis id, pellen que interdum lorem. Aenean laoreet euismod enim. Maecenas at sollicitudin lacus, dignissim vulputate augue. Curabitur lacinia purus dignissim metus fringilla viverra. Nunc sollicitudin luctus purus, non imperdiet nulla faucibus ac.
• Donec justo erat, hendrerit nec sem at.
  • Donec consectetur dolor purus, tempor scelerisque sapien eleifend vel.
  • Nunc at metus quis mi ornare cursus.
    • Mauris pretium arcu libero, eget ultricies tortor semper ac. Nulla vel enim et tortor venenatis consequat.
    • Nunc velit augue, ultricies vel hendrerit eu, volutpat a leo. Sed eu turpis scelerisque, pharetra ex nec, semper mauris. Nam fringilla.
    • Nunc at metus quis mi ornare cursus.
    • Donec non ex quis diam vestibulum varius. Vivamus id est pellentesque, ultrices diam a, euismod nisl. Suspendisse placerat ex vel justo pharetra, eu imperdiet justo facilisis.

Ordered List

1. Suspendisse mattis libero tincidunt turpis consectetur viverra. Etiam efficitur urna imperdiet sodales dignissim. Donec finibus neque a purus maximus tincidunt. Aenean eget nisi ante. Donec aliquet laoreet felis, id sodales odio lobortis feugiat.
2. Cras a lorem nunc. Aenean tincidunt at nulla et pretium.
3. Sed ac justo convallis, sodales ante sit amet, rutrum est.
4. Donec justo erat, hendrerit nec sem at, accumsan consectetur arcu. Donec mi lacus, lacinia laoreet felis id, pellentesque interdum lorem. Aenean laoreet euismod enim. Maecenas at sollicitudin lacus, dignissim vulputate augue. Curabitur lacinia purus dignissim metus fringilla viverra. Nunc sollicitudin luctus purus, non imperdiet nulla faucibus ac.
5. Donec justo erat, hendrerit nec sem at.
   1. Donec consectetur dolor purus, tempor scelerisque sapien eleifend vel.
   2. Nunc at metus quis mi ornare cursus.
      1. Mauris pretium arcu libero, eget ultricies tortor semper ac. Nulla vel enim et tortor venenatis consequat.
      2. Nunc velit augue, ultricies vel hendrerit eu, volutpat a leo. Sed eu turpis scelerisque, pharetra ex nec, semper mauris. Nam fringilla.
      3. Nunc at metus quis mi ornare cursus.
      4. Donec non ex quis diam vestibulum varius. Vivamus id est pellentesque, ultrices diam a, euismod nisl. Suspendisse placerat ex vel justo pharetra, eu imperdiet justo facilisis.

Description list

Suspendisse mattis libero tincidunt turpis consectetur viverra.

Etiam efficitur urna imperdiet sodales dignissim. Donec finibus neque a purus maximus tincidunt. Aenean eget nisi ante. Donec aliquet laoreet felis, id sodales odio lobortis feugiat.

Cras a lorem nunc. Aenean tincidunt at nulla et pretium.

Sed ac justo convallis, sodales ante sit amet, rutrum est.

Donec justo erat, hendrerit nec sem at, accumsan consectetur arcu.

Donec mi lacus, lacinia laoreet felis id, pellentesque interdum lorem. Aenean laoreet euismod enim. Maecenas at sollicitudin lacus, dignissim vulputate augue. Curabitur lacinia purus dignissim metus fringilla viverra. Nunc sollicitudin luctus purus, non imperdiet nulla faucibus ac.

---