Style Guide

  1. Typography
  2. Figures
  3. Posts

Typography

Heading 1

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

This is a paragraph.Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5 Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6 Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a paragraph. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Special Elements

Footnote balloon

Footnotes are powered by bigfoot.js. To specify a footnote, use the following shortcode: [footnote]A footnote[/footnote]

Aside

An aside is an additional note or side comment.

Aside code
[html]
<div class="aside">
<p><strong>Note:</strong> Paragraphs with an inset image need to be inside a <code>container</code>. There is no max-width on <code>entry__content</code>, so the image will float to the far left or right if not within a container.</p>
</div>
[/html]

Note: Paragraphs with an inset image need to be inside a container. There is no max-width on entry__content, so the image will float to the far left or right if not within a container.


Figure layouts

Figures will most commonly contain images and captions, although the styling of this blog provides some additional styling options.

Basic figure code
[html]
<div class="figure">
<a class="figure__imageLink" href="http://link">
<img class="figure__image" src="image.png" alt="" />
</a>
<div class="figure__imageCaption">
<h3 class="figure__captionHeader">Caption header</h3>
<p>I’m a jolly caption</p>
</div>
</div>
[/html]

Note: The sample code includes a figure__captionHeader. The tag in the example is an h3, but in general practice, the tag should match whatever the existing hierarchy is of the page the figure is used on. Styling doesn’t depend on the tag—any header with the figure__captionHeader will have the appropriate styling.

Inset images

Inset images are set within a paragraph, as opposed to the larger figures described below. Images can be either 1/3 or 1/2 the width of the content area, and be floated left or right. Centered images will be the full width of the content area.

Note that paragraphs with an inset image need to be inside a container. There is no max-width on entry__content, so the image will float to the far left or right if not within a container. See the following example code.

Paragraph with inset figure
[html]
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="figure">
<a class="figure__imageLink" href="http://link">
<img class="figure__image" src="image.png" alt="" />
</a>
<div class="figure__imageCaption">
I’m a jolly caption
</div>
</div>
</div>
[/html]

Related classes (add to the main figure div)

.width-33
1/3 width
.width-50
1/2 width
.alignleft
Floats image left
.alignright
Floats image right
.aligncenter
Image is centered, and full row

Preview

I’m a jolly caption

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Full-row figures

In some cases, we might want figures to extend the full row, or beyond. The following classes should go on the containing figure div, as follows:

[html]
<div class="figure [class goes here]">
</div>
[/html]

.wideFigure
Gives figure a width of 52em.
image-1
.wideFigure--wider
Gives figure a width of 60em.
image-1
.wideFigure--superwide
Gives figure a width of 70em.
image-1
.wideFigure--fullWidth
Figure stretches to the full width of the window.
image-1
.wideFigure--twoCols
Should be applied only to a figure with a caption. Displays the figure as two columns. While this can be applied to a figure of any width, applying it to a very wide figure may result in an uncomfortably long line width for the caption.
.captionOnLeft
Should be applied only to a figure with a caption. Positions the caption on the left instead of the right.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Caption header

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Posts

There are, at present, two main types of posts:

  • Article: An article post is exactly what it sounds like: a full-length article about something. It is displayed with the standard WordPress article format. Add a “more” link after the first paragraph.
  • Aside: An aside post is for something short: a note, a resource or brief list of links, an observation. Aside posts shouldn’t be longer than one or two paragraphs; basically, somewhere between a blog post and a tweet, and closer to the tweet side. Aside posts should be assigned the “aside” format.

Put the <!--more--> at the end of the last paragraph, not on its own line. That way, the link won’t be floating off on its own.

Leave a Reply

Your email address will not be published. Required fields are marked *