Typography

Uses relative sizing (rems and pixels as fallback) for everything.

The body has a base font-size of 100%, which is 16px on browsers with default font settings. All other sizes are in rems. Changing the code font-size on the body element will adjust the typographical scale for the entire site.

The font-family on the body is "Open Sans","Helvetica Neue", Arial, sans-serif . This sets the typeface for the entire site. Adjust as needed.

Text Basics

Text
Default Text
Muted text. .text-muted
Small text. .text-small
Tall text. .text-tall
Hyperlinks.
Bold
italics

Headings

Heading elements

h1. Heading 1

.h1, .alpha

h2. Heading 2

.h2, .beta

h3. Heading 3

.h3, .gamma

h4. Heading 4

.h4, .delta
h5. Heading 5
.h5, .epsilon
h6. Heading 6
.h6, .zeta
Bonus Headings
Giga Heading .giga
Mega Heading .mega
Kilo Heading .kilo

Paragraphs

Dummy Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Quod quidem iam fit etiam in Academia. Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Iam in altera philosophiae parte.

Isto modo ne improbos quidem, si essent boni viri. Duo Reges: constructio interrete. Hanc ergo intuens debet institutum illud quasi signum absolvere. Apparet statim, quae sint officia, quae actiones. Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Non risu potius quam oratione eiciendum? Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.

Nam ista vestra: Si gravis, brevis; Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus? Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quod non faceret, si in voluptate summum bonum poneret. Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Miserum hominem! Si dolor summum malum est, dici aliter non potest. Hoc non est positum in nostra actione. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Elit Gamma

Sup and Sub

You can also include superscriptssup example and subscriptssub example.

Code

Here's some preformatted javascript code:

.js {
      color: #272727;
      background: #ffffff;
   } 

Lines

Add lines to your markup using the <hr> element.


Lists

Ordered

  1. Item 1
  2. Item 2
  3. Item 3

Unordered Simple

  • Item 1
  • Item 2
  • Item 3

Unordered Disc

  • Item 1
  • Item 2
  • Item 3

Unordered Circle

  • Item 1
  • Item 2
  • Item 3

Unordered Square

  • Item 1
  • Item 2
  • Item 3

Definition List

Unordered Square

Definition List
Encloses a list of pairs of terms and descriptions.
Definition List
Encloses a list of pairs of terms and descriptions.
Definition List
Encloses a list of pairs of terms and descriptions.

Alignment, Spacing & Visibility

You can adjust text alignment and spacing using a few simple CSS classes.

Text Alignment

Alignment Class
Left .text-left
Centered .text-center
Right .text-right

Floats

Float Class
Left .float-left
Right .float-right

Pro Tip Clear floats by wrapping floated content in a <div> with the .group class.

Spacing

Top Bottom Class
0 0 .no-space
Default 0 .no-space-bottom
0 Default .no-space-top
Default 2em .space-bottom
Default .5em .space-bottom-small
.8125em Default .space-top

Screen Readers

If you have text that you don't want displayed on screen, but that should still be in the markup for screen readers (for example, a search form label), simply apply the .screen-reader class. This will shift content off-screen, but screen readers can still read it.