.box

Stylized box element.

This is a block element.

.keyline-all

Adds a border to an element.

This container has a border.

.keyline-top .keyline-right keyline-bottom .keyline-left

Gives control to specify where you want borders

This container has a keyline-top keyline-bottom applied to it.
This container has a keyline-left keyline-right applied to it.

.center

text-align: center;

So much room for activities!

.clearfix

Clears a container around floated children

Column A
Column B

.clip

overflow: hidden;

.contain

position: relative;

The green absolute positioned container is bound to the parent because the parent container has a .contain class and is therefore relatively positioned.

.dot

border-radius: 50%;

.fl and .fr

float: left; and float: right;

.hidden

display: none;

.inline

display: inline-block;

div A
div B

.quiet

De-emphasize text

Shhhhhh, this is a library. Quiet down.

.round

Round the corners of an element.

.round
.round-bottom
.round-top
.round-left
.round-right

.unround

Remove any default border radius from elements.

.text-right

Format inline-elements right aligned.

I am some right aligned text.

Me too

.truncate

Truncate a title with an ellipsis to ensure it doesn't break onto a new line. You'll want to specify a width on the targeted element for this to work.

A Longer title that should not break the height by breaking to a new line. Instead, it should truncate on the same line with an ellipsis instead.

.loading

Adds a loading overlay. Targeted element should

  1. 1. Not be position: static;
  2. 2. Not contain a .clearfix class

.space

Add's margin right spacing to inline elements. Useful for horizontal menus

.space-bottom1 .space-bottom2 .space-bottom4

Add's margin bottom spacing to elements.

.space-bottom1
.space-bottom2
.space-bottom4

.caption

Positions captioned text below media. For media elements within a `.prose` class, the caption text is centered to the element.

An Astronaut

.scroll-styled

Gives a div container that scrolls a styled minmal scrollbar. Supported on webkit only

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim.

.small

Sets body text to 12px and headings to 12px and all caps.

small heading

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida.

button.short

Makes buttons 30px tall instead of the standard 40px.

Look buttons: Cool Cool

input.short

Makes inputs 30px tall instead of the standard 40px.

.micro

Sets body text to 10px.

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida.