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

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.

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.

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.