Base CSS

Typographic scale

The typographic grid is based on Compass Vertical Rhythm mixins. Once your $base-line-height and $base-font-size are set, all other typographic elements can rely on those values and adjust accordingly with wonderful mixins such as @include adjust-font-size() and leader() / trailer().

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Et et porta cras tempors

h2. malesuada elementum amet

h3. Gravida mi lorem erat nam

h4. Lacinia viverra dignissim tortor eros

h5. Tortor vitae orci dignissim eu
h6. Mattis convallis amet magna nunc

Link, Emphasis and Strong

Element Usage
Link Cras vulputate accumsan turpis neque iaculis mi vitae erat orci.
<em> Massa pellentesque pellentesque velit adipiscing iaculis auctor ac gravida neque.
<strong> Nunc est luctus nisl orci lorem neque aliquam venenatis aliquam.

Blockquotes

Element Usage
<blockquote> Block-level element for quoting content from another source
<small> Optional element for adding a user-facing citation, typically an author with title of work.

Example blockquotes

Default blockquotes are styled as such:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Phasellus iaculis neque

Unstyled

  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
  • Phasellus iaculis neque

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Phasellus iaculis neque

Description Lists

Standard

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Inline

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Tables

Name Class Description
Default None None
Condensed .table--condensed None
Bordered .table--bordered None
Zebra Striped .table--striped None

Default

vitae lacus lorem dignissim tincidunt
convallis sit felis viverra dignissim
porta enim elementum vestibulum lacinia
viverra ante orci velit orci

Condensed

vitae lacus lorem dignissim tincidunt
convallis sit felis viverra dignissim
porta enim elementum vestibulum lacinia
viverra ante orci velit orci

Bordered

vitae lacus lorem dignissim tincidunt
convallis sit felis viverra dignissim
porta enim elementum vestibulum lacinia
viverra ante orci velit orci

Zebra

vitae lacus lorem dignissim tincidunt
convallis sit felis viverra dignissim
porta enim elementum vestibulum lacinia
viverra ante orci velit orci
viverra ante orci velit orci

All in One Combo

vitae lacus lorem dignissim tincidunt
convallis sit felis viverra dignissim
porta enim elementum vestibulum lacinia
viverra ante orci velit orci
viverra ante orci velit orci

Forms

Horizontal Forms

Phasellus ac eleifend magna.
Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum.
Sed nec lacus sed nibh iaculis luctus.
Etiam quis elit vel est suscipit tristique.
Nam tincidunt dictum molestie.
Curabitur dapibus odio quis enim hendrerit eu placerat lorem accumsan.
Machine name: erat_sit_nec Edit
Integer quis dui tellus.
Quisque a velit diam.
Suspendisse potenti.
In faucibus feugiat urna sit amet elementum.
Sed fermentum nulla quis risus suscipit dapibus.
Maecenas quis odio leo, a auctor lorem.
Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante.

Horizontal Forms

Phasellus ac eleifend magna.
Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum.
Sed nec lacus sed nibh iaculis luctus.
Etiam quis elit vel est suscipit tristique.
Nam tincidunt dictum molestie.
Curabitur dapibus odio quis enim hendrerit eu placerat lorem accumsan.
Machine name: erat_sit_nec Edit
Integer quis dui tellus.
Quisque a velit diam.
Suspendisse potenti.
In faucibus feugiat urna sit amet elementum.
Sed fermentum nulla quis risus suscipit dapibus.
Maecenas quis odio leo, a auctor lorem.
Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante.

Inline Forms

Use .login-inline for an inline login block.