These pages are still a WIP. (Last Update: 31 Oct. 2016)

Colors

@white

@lightgray

@gray

@bluegray

@black

@red (@error)

@purple

@lightblue

@green

@yellow (@warn)

@pink

@blue

@teal

@lightgreen (@success)

@orange

Buttons

Size

'a' Tag w/button class

Color

acc

border
none

Type

Icons

Groups

Typography (h1)

Headers (h2)

h3 - Header 3

h4 - Header 4

h5 - Header 5

h6 - Header 6

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas cum ut, dolore corporis nesciunt, suscipit ullam enim hic, molestiae modi quis soluta! Dolore vero suscipit tenetur facere ullam repudiandae soluta.

This is another paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis temporibus ad quas animi magni nihil sunt.
Hic libero nobis eaque voluptatibus, dignissimos labore ullam, sed odio esse culpa? Nemo, eligendi.consequatur sed doloremque, reiciendis velit fuga porro saepe odit aliquid inventore quis. Ratione, quae.
Necessitatibus illum voluptatum eaque asperiores tenetur tempore inventore amet totam dolore architecto qui, enim quia harum aspernatur, est eligendi dolorum incidunt labore?

Just one more, so you get the idea... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde accusantium, deserunt quia! Aliquid aspernatur corporis rem, dolorum sed, ex, laborum aliquam amet adipisci quam cumque sunt doloremque architecto quod?

Lists

This is a <ul> list:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, blanditiis?
Voluptas, aperiam:
- Lorem ipsum dolor.
- Consequatur non, dolorum.
- Asperiores, aliquid, quidem.
- Dolores ipsum, a.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque sint architecto eaque, ratione quae.
Vero veritatis, ullam.
Fugit, consequuntur, esse.

This is a <ol> list:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, officia.
Aperiam, alias minima!
Lorem ipsum dolor sit.
Similique officiis, aliquam ad?
Perspiciatis amet molestiae sint.
1. Lorem ipsum dolor sit.
2. Tempora, quaerat. Aspernatur, accusamus.
3. Explicabo, recusandae cupiditate accusantium!
4. Repellat aut, molestiae consectetur.
Officia modi iure, soluta!

Forms

Grid

Help Class

Info / Messages

Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae expedita aspernatur, aperiam explicabo recusandae!

Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta labore quasi explicabo repellendus rerum.

Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ea vel officiis explicabo in.

Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati illo totam minus enim!

Examples

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur asperiores quae quas aliquam nihil corporis, at iste fuga qui? Consequatur ducimus earum maiores delectus doloremque, est neque architecto ratione obcaecati!

Ad tempora officia aspernatur, omnis porro, a itaque maxime ex obcaecati eum possimus. Hic saepe distinctio cupiditate, dolor atque excepturi maiores molestias. Qui ea voluptate facere iste doloribus, reprehenderit officiis.

Fugit eveniet id aut neque magni voluptatibus ratione deserunt excepturi dolorum incidunt dignissimos assumenda sit aliquam explicabo ipsum molestiae ad, ducimus reprehenderit accusantium odit distinctio porro. Aperiam distinctio ex odio!

Buttons

Facilis iste

Perspiciatis autem

Quia ratione

Grid

Customizable Grid

.col-1

.col-2 / .col-2

.col-3 / .col-3

.col-4 / .col4

.col-5 / .col5

.col-6 / .col6

.col-7 / .col7

.col-8 / .col8

.col-9 / .col9

.col-10 / .col10

.col-11 / .col11

.col-12 / .col12

Grid w/Gutters

(wip)

Again, customizable and responsive.

Section

Versatile Classes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil quam recusandae labore deserunt ducimus, commodi nostrum dignissimos perferendis sed quibusdam, sequi veniam veritatis adipisci illo ab laborum saepe repellat?

Cupiditate voluptas mollitia doloribus molestiae ab, magni eius tempore laborum fuga earum quae placeat odit nihil ut? Voluptatem dolore quo eveniet sit saepe, facere placeat, soluta itaque odio magnam error.

Ratione in molestiae, doloremque, incidunt eos adipisci error ab cum voluptatem ut velit dolorum, itaque beatae inventore deserunt nam iure soluta accusantium odit quasi nostrum consectetur minima. Sit, aut! Facilis!

Quae odio aliquid temporibus nobis non maiores iure voluptas laborum alias. Recusandae voluptatum consectetur quod aliquam quae non quidem, autem reiciendis voluptatibus officia reprehenderit voluptate dicta expedita nemo distinctio beatae.

<div class="row-12">
   <div class="col-sm-12 col-6">
      <label>
         <input type="text">
         <button>Button</button><br>
      </label>
   </div>
</div>