Style guide
Updated on Mar 02, 2021
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
- Blue in light mode and pink in dark mode.
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.”
- “Some ten or twelve, but none which present any feature of interest.
- They are important, you understand, without being interesting.
- Indeed, I have found that it is usually in unimportant matters that there is a field for the observation, and for the quick analysis of cause and effect which gives the charm to an investigation.
- The larger crimes are apt to be the simpler, for the bigger the crime the more obvious, as a rule, is the motive.
- 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.
- 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.
- 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
Inline list
This .inline-list is primarily used for navigation on the website.
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.
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 .spacing class to add large space to the top and bottom of the element.
Use the .no-spacing class to remove the top and bottom margin from ana element.
