Pure Typography

CSS Styles for nicer web type. Depends on Pure.

Install using Bower

Pure Typography can be used through Bower. It has a dependency on Pure, so you'll want to pull that in as well.

It's a total of 1kb minified + gzipped.

bower install pure-typography

You can fork it from Github too.

Fork from Github

A Splash Header

Here's a little subtitle.

A Splash Button

A really really really *really* long Splash heading.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

A custom Splash Header

Photo Credit: Pierre Lesage // cc.

Getting Started: Using the pure-type class

All styles should be used inside an element with a class name of pure-type. This way, you can use the Pure-Typography module with with other CSS on your page. Only elements within a parent element with the pure-type class name will be styled with this module.

Sometimes, you want a title and a lighter subtitle, like the one above this paragraph. You can do this by adding a title class to a heading, and a subtitle class to a sub-heading. This will adjust the margins to group the title and subtitle together without much spacing between them.

Headings

You can create a grouped pair of a title and subtitle by using the title and subtitle classes respectively. See the example below:

Here's an example title.

It has a corresponding subtitle. This is pretty useful.

Here are the standard headings:

Here's an H1

Here's an H2

Here's an H3

Here's an H4

Here's an H5
Here's an H6

You can add the subhead class to a header element to achieve this effect:

Content Subhead Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes and Cites

Typography is the craft of endowing human language with a durable visual form. Anonymous

Code

<code> elements are styled like this.

Pre

        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
          

Small

Here is some small text.

Strong

Here is some strong text.

Emphasis

Here is some text that we want to emphasize.

Text Alignment

You can align text through the text-left, text-center, and text-right class names.

Text aligned to the left.

Text aligned to the center.

Text aligned to the right.

Muted Colors

Add the muted class name to an element to add a muted color to the text within. See how this text has less contrast?

You can even have the muted effect on colored text.

Ribbons

Add the pure-ribbon class name to an element to add a ribbon effect. Ribbons come in various styles.

This is a default ribbon. Just add the pure-ribbon classname.

This is a success ribbon. Add the pure-ribbon pure-ribbon-success classes.

To show an error, use this ribbon. Add the pure-ribbon pure-ribbon-error classes.

To show an warning, use this warning ribbon. Add the pure-ribbon pure-ribbon-warn classes.

Definition Lists

Definition 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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

List Elements

Add a list class to style ordered and unordered lists. Add the plain class to remove the default browser styles.

ul Default Styling

Add the list classes to an unordered list element to apply these styles.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

ul Plain Styling

Add the list classes to an unordered list element to apply these styles.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

ol Default Styling

Add the list classes to an ordered list element to apply these styles.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

ol Plain Styling

Add the list plain classes to an ordered list element to apply these styles.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem