Style Guide

Welcome to a page you weren’t supposed to find. The placeholder text is ganked from Edwin A. Abbott and most of the markup from wearepixel8.

I call our world “Flatland”, not because we call it so, but to make its nature clearer to you, my happy readers, who are privileged to live in Space.

Imagine a vast sheet of paper on which straight Lines, Triangles, Squares, Pentagons, Hexagons, and other figures, instead of remaining fixed in their places, move freely about, on or in the surface, but without the power of rising above or sinking below it, very much like shadows — only hard and with luminous edges — and you will then have a pretty correct notion of my country and countrymen. Alas, a few years ago, I should have said “my universe”: but now my mind has been opened to higher views of things…

Top Level Header

Above is an example of a top level header element, or the h1 tag. Although page titles have been set in this tag, they have been overridden to appear even larger than this default style (see the title of this page, “Style Guide”). There is no hard and fast rule regarding the number of h1 tags allowed on a page, but as a general rule, if a page is about one thing (a single article, for instance) it should only have one h1 tag. If the page is amount many things of equal importance (perhaps a list of articles), you may consider using h1 tags for each title.

Second Level Header

As mentioned above, the Second Level Header is best used for important page level headings. Use the Second Level Header tag, h2, for any important page level headings that introduce or describe parts of a page, rather than the page in it’s entirety.

Third Level Header

The Third Level Header may be used for any form of page level headings which falls below the h2 header in a document hierarchy.

Fourth Level Header

The Fourth Level Header may be used for any form of page level headings which falls below the h3 header in a document hierarchy.

Fifth Level Header

The Fifth Level Header may be used for any form of page level headings which falls below the h4 header in a document hierarchy.

Sixth Level Header

The Sixth Level Header may be used for any form of page level headings which falls below the h5 header in a document hierarchy.

Commonly Used Typography Tags

Paragraph

All paragraphs are wrapped with the p tag. This tag can also be wrapped by the blockquote tag if the text is a quote for an external source or a pull quote from an article.

Block Quotes

Block quotes are section of quoted content within an article. Typically, the content is quoted from an external source. When the quote is pulled from the article itself, it is called a “pull quote” (see below). For example, we are quoting Ray Eames, from Quotes on Design, below.

What works good is better than what looks good, because what works good lasts.

Steve Jearbs

Pull Quotes

Pull quotes are a special type of block quote wherein the content is pulled from the article itself rather than from an external source. They are a way of highlighting important points and adding visual interest to the page.

It’s acceptable for the content of a pull quote to differ slightly from the original. In particular, changes may be made in the name of conciseness or for formatting or layout reasons.

There are three types of pull quote layouts: Standard, extra wide, and floated (left or right). At small screen sizes, they all look the same. At larger sizes, some layouts extend out beyond the edges of the normal content column.

Pull quotes have a dark background with white text by default. However, there is also a “light” version of the pull quote, which has no background and uses the site’s blue accent color for it’s border and text.

Inline Quotes

The q tag is used for short quotations inside of a paragraph. Quotations nested within quotations get single quotes. Here is an example of a nested inline quotation:

He said, The official Buzz Lightyear catch phrase is, To infinity and beyond!

Images, Figures and Figure Captions

There are several layouts available for images and figures.

This is a normal image figure

This is a wide image figure, offset right
This is a wide image figure, offset left
This is an extra wide image figure
This is a full-width image figure

Ordered Lists

Ordered lists, or ol are used to list items in an hierarchical fashion. Each list item, or li, is preceded by a numerical representation of its place in the hierarchy. An ordered list can also contain another ordered list as well as an unordered list, or ul.

  1. This is the first item in an ordered list
  2. This is the second item in an ordered list with a sub-ordered list
    1. This is an item in a nested ordered list
    2. This is an item in a nested ordered list
    3. This is an item in a nested ordered list
  3. This is the third item in an ordered list
  4. This is the fourth item in an ordered list with a sub-unordered list
    • This is an item in a nested unordered list
    • his is an item in a nested unordered list
    • his is an item in a nested unordered list

Unordered Lists

Unordered lists, or ul are used to list items without any hierarchical value to them. Each list item may be preceded by a bullet or any non numerical representation. An unordered list can also contain an ordered list as well as another unordered list.

  • This is the first item in an unordered list
  • This is the second item in an unordered list with a sub-ordered list
    1. This is an item in a nested ordered list
    2. This is an item in a nested ordered list
    3. This is an item in a nested ordered list
  • This is the third item in an unordered list
  • This is the fourth item in an unordered list with a sub-unordered list
    • This is an item in a nested unordered list
    • This is an item in a nested unordered list
    • This is an item in a nested unordered list

Definition Lists

Definition lists, or dl are generally used to denote a list of items that share a relationship with one another. A dl should contain at least one dt and one dd.

di·vis·i·ble [dih-viz-uh-buhl]
capable of being evenly divided, without remainder.

Links

Links are commonly used to link one page to another, either internally or externally and are wrapped by the a tag.

Emphasized Text

Emphasized text is usually relegated to text you would pronounce differently in a conversation or text you are putting a stressed emphasis on and is wrapped inside of the em tag. For example:

Reading this blog will make you a better person.

Strong Text

Strong text is usually relegated to text you are placing strong emphasis on and is wrapped inside of the strong tag. For example:

Subscribe to this blog’s RSS Feed now or you will be sorry.

Marked or highlighted text

The mark tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. The mark tag was introduced in HTML 5. Internet Explorer 8 and older do not support this tag. For example:

Despite the stock market crash in 2008, the value of my share portfolio increased by 100 percent. I must be doing something right.

Small Print

The small element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. For example:

Copyright © 2014 hasLayout. All Rights Reserved.

Delete & Insert

Markup of deleted text can be useful in determining differences between multiple versions of the same document. Browsers will normally strike a line through deleted text and underline inserted text. For example:

hasLayout is located in Boston, MA Los Angeles, CA.

Citation

The cite element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. For example:

I highly recommend reading The Invisible Man by Ralph Ellison. It changed my life when I was 15 years old.

Abbreviations & Acronyms

The abbr element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation. The acronym tag has been dropped from the HTML 5 spec, so, like, don’t use it. For example:

The abbreviation for the National Football League is NFL and the acronym for as soon as possible is ASAP.

Subscript & Superscript

The sub tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O.

The sup tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like this example[1].

Code & Code Blocks

The code tag is useful for websites who intend to share computer code snippets. When wrapped by the pre tag, a larger block of code can be displayed.

Tabular Data

The table tag is best used for presenting tabular data. This tag should always contain the thead, tfoot and tbody tags and should be marked up in that order. The table tag can also contain the caption tag for accessibility.

Convert Font Sizes from Pixels to Ems or Percentages
Pixels Ems Percentages
Conversions provided by PXtoEM.com
16px 1em 100%
17px 1.063em 106.3%
18px 1.125em 112.5%
19px 1.188em 118.8%