Colours

• Bowhead

  #507781
  hsl(204, 29%, 44%)

• Raven

  #5f8aa6
  hsl(204, 29%, 51%)

• Coyote

  #6e95ae
  hsl(204, 29%, 58%)

• Canada

  #eb2d37
  hsl(357, 83%, 55%)

• Black

  #060606
  hsl(0, 0%, 2%)

• Mineshaft

  #2b2b2b
  hsl(0, 0%, 17%)

• Kaiser

  #4f4f4f
  hsl(0, 0%, 31%)

• Dove

  #737373
  hsl(0, 0%, 45%)

• Alto

  #dddddd
  hsl(0, 0%, 87%)

• White

  #f9f9f9
  hsl(0, 0%, 98%)

Measures

Small

Medium

Large

One

Responsive

Transitions

Fonts

Primary Font: "Proxima Nova", sans-serif;

Primary Font italic: "Proxima Nova", sans-serif;

Primary Font bold: "Proxima Nova", sans-serif;

Secondary Font: Georgia, serif;

Secondary Font italic: Georgia, sans-serif;

Monospace Font: "Menlo for Powerline", "Menlo", Consolas, Courier, monospace;

Title Font: "Heebo", sans-serif;

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Aside

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript for things like: 8^th of August a² + b² = c² E = mc²

Subscript for things like: H₂O H₂SO₄ C₂₄H₂₆O₇

This small text for fine print, etc.

Abbreviation: HTML

Keyboard input: Tab

This text is a short inline quotation

This text is a short inline quotation with another short inline quotation inside

This is a citation

The dfn element indicates a definition

The mark element indicates a highlight

This is what inline code looks like

This is sample output from a computer program

The variable element, such as x = y

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Blockquote with Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Twitter Embedded Quote

assumptions do not a civil developer make

— Chris Burnell (@iamchrisburnell) April 22, 2015

Unordered List

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

Ordered List

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

Ordered List Reversed

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. This is the last list item
   1. This is a nested list item
   2. This is another nested list item in an ordered list

Ordered List Reversed, Twice

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. This is the last list item
   1. This is a nested list item
   2. This is another nested list item in an ordered list

Definition List

Definition List

A number of connected items or names written or printed consecutively, typically one below the other.

This is a term.

This is the definition of that term, which both live in a dl.

And another term.

And it gets a definition too, which is this line.

Table

Table with Alternating Rows

Table with Subheadings

Details & Summary

Preformatted Text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Code Block

@function strip-unit($number) {
    @if not $number {
        @warn "strip-unit() expects at least one parameter.";
        @return false;
    }
    @return $number / ($number * 0 + 1);
}

Code Block with Language

@function strip-unit($number) {
    @if not $number {
        @warn "strip-unit() expects at least one parameter.";
        @return false;
    }
    @return $number / ($number * 0 + 1);
}

Extended Code Block with Language

formatDate: function(date) {
    const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];
    let day = date.getDate();
    if (day < 10) {
        day = `0${day}`;
    }
    let monthIndex = date.getMonth();
    let year = date.getFullYear();
    return `${day} ${months[monthIndex]} ${year}`;
}

CodePen Embed

    
    Check out this Pen!

Can I Use Embed

Can I Use css-sel3? Data on support for the css-sel3 feature across the major browsers from caniuse.com.

Figure

Figure with Caption

Video

Buttons

Buttons List

Text Input

Sparklines

Horizontal Rules

Content List

Icons

HTML Attributes

Classes should be double-space delimited.

<div class="content__body  e-content"></div>

Vocabulary

I’m always been a proponent for establishing a useful dictionary of specific vocabulary as it pertains to a project. This helps to ensure that everyone can be understood by everyone else. It also reduces the awkwardness for people who might not be familiar with particular nomenclature or naming conventions and could be shy to ask for clarification—rather it makes these definitions known right off the bat, and serves as a reference for the future.

DRY

Don’t Repeat Yourself—a principle of software development aimed at reducing repetition of all kinds. (Wikipedia)

measure

A unit of length, designated for specific values for one dimension of measurement, e.g. margin, padding, etc.

size

Also a unit of length, but denoted for specific values for two dimensions of measurement, e.g. avatars, icons, etc.

Technology

The CSS is compiled from SCSS using gulp.js and some PostCSS.

The front-end is compiled with Jekyll, source files hosted by GitHub, front-end hosted by DigitalOcean, and sits behind CloudFlare for caching, SSL, and as a CDN.

Tone and Voice

Instead of trying to explain the madness behind the tone and voice of my website, I’m just going to throw out some references to some other great Content Guides which inspire me:

• MailChimp Content Style Guide
• GOV.UK Content and Publishing
• 18F Content Guide
• Buffer Tone Guide
• The Economist Style Guide

License

The code and contents of this website are licensed under a GNU GPLv3 license (official).