Style Guide

This guide exists to help explain the styles for this site. If you have questions, feel free to email me.

Headings

Heading levels one through six have been designed for you. Please begin with an h2 and work your way down. If at all possible, refrain from using links within headings.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Blockquotes

There are two styles for blockquotes. You have the regular blockquote and the pullquote. The following code gives an example of how to use them.

This is a normal blockquote. It can be used to quote what people have said.

<blockquote>This is a normal blockquote. It can be used to quote what people have said.</blockquote>

<blockquote class="pullquote">
  <p>Putting our least polished selves out there for our peers to see—admitting, without shame, that we struggled through rough patches and that not everything turned.</p>
</blockquote>

Pullquote Demo

Putting our least polished selves out there for our peers to see—admitting, without shame, that we struggled through rough patches and that not everything turned.

These sorts of headaches and setbacks are more than common. They’re simply what the world, with all of its imperfect people and situations, is like. And by pretending it’s not—carrying on as if we can, in fact, make the web perfect—we’re actually doing everyone a disservice.

If we want to do right by our peers, our clients and colleagues, and even ourselves, it’s time we shake off some of those Type-A tendencies and start sharing our inner imperfectionists with the world.


Images

Full size of Sara
This is a fullsize image with a caption.

There are four basic image styles: .fullsize, .aligncenter, .alignleft, and .alignright. Both .fullsize and .aligncenter take up the full width of the container, and don't allow for text wrapping. When aligning images either to the left or right, you can use the .offset class to have the image come out of the column.

<figure class="alignleft offset">
  <img src="path/to/photo.jpg" alt="My photo" />
  <figcaption>You can give these images captions too!</figcaption>
</figure>

Image Offset Demo

Full size of Sara
This is a left offset image with a caption.

The above code will allow you to do something like this, and the great part is that it all works on a simple class system that you can apply to a figure element.