Style guide

Updated on May 24, 2020  |  9 minute read

My goals is to make this website as lean, fast, and user-friendly as possible. If you have any suggestions or improvements that could help me reach that goal, please get in touch.

Behind the scenes

This site is built with Jekyll and deployed to Netlify. The forms are managed and processed by Netlify Forms.

This site scores 100 on lighthouse in all categories and supports offline content—just because I thought it would be fun to include.

Typograph

This website uses system fonts. On Mac and iPhone you’ll see San Francisco, on Android you’ll see Roboto, and on Windows you’ll see Segoe UI. I first saw it at Ampersand Conference in 2015 when Marcin Wichary from Medium demonstrated it.

Colors

Headings

Page heading (h1)

Page heading (h2)

Page heading (h3)

Page heading (h4)

Page heading (h5)
Page heading (h6)

Paragraphs and lists

“Ah,” said he, “I forgot that I had not seen you for some weeks. It is a little souvenir from the King of Bohemia in return for my assistance in the case of the Irene Adler papers.”

  1. In these cases, save for one rather intricate matter which has been referred to me from Marseilles, there is nothing which presents any features of interest.
  2. It is possible, however, that I may have something better before very many minutes are over, for this is one of my clients, or I am much mistaken.” He had risen from his chair and was standing between the parted blinds gazing down into the dull neutral-tinted London street.
  3. I saw that on the pavement opposite there stood a large woman with a heavy fur boa round her neck, and a large curling red feather in a broad-brimmed hat which was tilted in a coquettish Duchess of Devonshire fashion over her ear.

Blockquote

“It was from the reigning family of Holland, though the matter in which I served them was of such delicacy that I cannot confide it even to you, who have been good enough to chronicle one or two of my little problems.”

Code

This is an example of a code block.

.hello-world {
    display: block;
}

There is also styling available for inline code.

Forms

Button

This is a button

Notification

This is a notification. It adds a box around content to make it more prominent.

Inline list

Tag

A Tag can be created by wrapping content insdie of a span with the class .tag applied to it.

Search chip

Search chip

A search chip indicates that the content can be filtered by a category. These are primarily used on the blog pages.

Use the .search-chip class on any link.

Media object

A .media-object forces an element to maintain a ratio of 16:9. It’s primarily used for embedding iFrame content such as YouTube where, by default, they don’t resize responsively.

To make the ratio 4:3, add a modifying class of .media-object--43 to it.

Icons

When using an icon, add the class .icon to the SVG to set the size correctly.

When an SVG is used inside of a link, an SVG element won’t have an underline like text does. This can look odd so to overcome this, instead of using a space, add the class .space-left which adds the equivelant of one space.

Utilities

Use the .lead class to increase the size of an element.

Use the .micro class to decrease the size of an element.

Use the .highlight class to make an element blue.

Use the .mute class to make an element light grey.

Use the .hidden class to hide an element.

Layout

Use the .container class to cap with width of the content.

Use the .spacing class add large space to the top and bottom of the element.