Style guide

Updated on Jul 14, 2020  |  9 minute read

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

Behind the scenes

See my uses page for the technology I use for this website.

I keep a roadmap page that contains a list of features and ideas I’m currently working on.

My inspiration page includes links and resources that have helped me design and build this website.

Typography

I use Source Serif Pro by Adobe Fonts. I locally host the font because it’s faster than Google Fonts and Google Fonts doesn’t contain the italic versions. The fallback is the standard serif used by browsers.

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

Horizontal line


Button

This is a button

Inline form

I use the inline form for my newsletter that appears on the bottom of each page.

Inline list

This .inline-list is primarily used for navigation on the website.

Notification

A .notification highlights a portion of content my putting it inside of a box.

This is a notification.

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.

If you’re filtering content on the same page, you can add the .is-active class to indicate the search chip is active.

Media embed

A .media-embed 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-embed--43 to it.

Media object

An .media-object is a two column layout which is designed to have some media on the left and some copy on the right. I primarily use it at the bottom of each page to introduce myself.

A photo of Dave Redfern

Hi. I’m Dave Redfern. I work with some of the world’s most sophisticated companies, helping to design and develop user-centered experiences that deliver measurable returns. Read more about me.

Utilities

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

Use the .micro class to decrease the size of 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.

2 linked references to “Style guide”