Typography

This is just some sample paragraph text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Sample Table

Table header Table header
Table cell 1 Table cell 1
Table cell 2 Table cell 2
Table cell 3 Table cell 3

Callout Styles

This is an info callout note.
This is an warn callout note.
This is an alert callout note.

This is a Callout

This is a callout with title.

View them all

Heading Style One

Heading Style Two

Heading Style Three

Heading Style Four

Heading Style Five
Heading Style Six

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.Steve Jobs


Icon List Styles

ul.check

  • Check List
  • Check List
  • Check List
  • Check List
ul.cross

  • Cross List
  • Cross List
  • Cross List
  • Cross List
ul.star

  • Star List
  • Star List
  • Star List
  • Star List
ul.warn

  • Warn List
  • Warn List
  • Warn List
  • Warn List
ul.info

  • Info List
  • Info List
  • Info List
  • Info List
ul.arrow

  • Arrow List
  • Arrow List
  • Arrow List
  • Arrow List
ul.plus

  • Plus List
  • Plus List
  • Plus List
  • Plus List
ul.minus

  • Minus List
  • Minus List
  • Minus List
  • Minus List
ul.iconlist (mixed)

  • li.star
  • li.cross or li.no
  • li.info
  • li.warn
  • li.arrow
  • li.check or li.yes
  • li.plus
  • li.minus

Wrapping two headings in the subheading class allows you to stack two headings while removing the default margins and combining into a single heading. The subheading class enables you to produce the example below.

This is a subheading

Followed by another Heading

Source:

<div class="subheading">
<h3 class="dim90">This is a subheading</h3>
<h4>Followed by another Heading</h4>
</div>

Utility Classes

For fine-tuning your typography (and other block-level elements) you can also utilize the following CSS classes:

// Helper Typography Classes

.brand          // primary theme color
.brand-alt      // secondary theme color
.brand-accent   // tertiary theme color
.italic         // italic typeface
.normal         // normal font variant
.bolder         // boldest font variant
.lighter        // lightest font variant
.serif          // serif typeface
.caps           // all caps
.tight          // -1px letter kerning
.tighter        // -2px letter kerning
.loose          // 2px letter kerning
.looser         // 3px letter kerning
.smalltext      // small text
.largetext      // larger text
.dim10 -.dim90  // shades of grey (10% - 90%)
ul.square       // square bullet list
ul.circle       // circle bullet list
ul.disc         // disc bullet list
ul.check        // check icon list
ul.captionlist  // captioned list

// Typography and Block Level Helper Classes

.remove-top     // remove top margin/padding
.remove-bottom  // remove bottom margin/padding
.pull-right     // float an element right (requires clearing)
.pull-left      // float an element right (requires clearing)
.margin5*       // add margin *(5,10,20,30,40)
.marginv5*      // add vertical margin *(5,10,20,30,40)
.pad5*          // add padding *(5,10,20,30,40)
.padv5*         // add vertical padding *(5,10,20,30,40)
.nopad          // remove padding (and margin)

Form Elements Unit Tests