Style Guide

Colours #colours

Transitions #transitions

transition: all 0.2s ease;
transition: all 0.2s ease;

Fonts #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: "League Gothic", Impact, sans-serif;

Headings #headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Paragraph #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 #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 #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®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keyboard input: Cmd

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 #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 #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 #twitter-embedded-quote

Unordered List #unordered-list

Ordered List #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 #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 #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

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

Heading A Heading B Heading C Heading D
Cell A-1 Cell B-1 Cell C-1 Cell D-1
Cell A-2 Cell B-2 Cell C-2 Cell D-2
Cell A-3 Cell B-3 Cell C-3 Cell D-3
Foot A Foot B Foot C Foot D

Table with Alternating Rows #table-with-alternating-rows

Heading A Heading B Heading C
Cell A-1 Cell B-1 Cell C-1
Cell A-2 Cell B-2 Cell C-2
Cell A-3 Cell B-3 Cell C-3
Cell A-4 Cell B-4 Cell C-4
Cell A-5 Cell B-5 Cell C-5
Foot A Foot B Foot C

Table with Subheadings #table-with-subheadings

Heading A Heading B Heading C
Subheading i Cell A-i Cell B-i Cell C-i
Subheading ii Cell A-ii Cell B-ii Cell C-ii
Foot A Foot B Foot C

Details & Summary #details-and-summary

Summary

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.

Summary

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.

Preformatted Text #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 #code-block

@mixin translate3d($values...) {
    @if length($values) == 0 {
        $values: 0, 0, 0;
    }
    transform: translate3d(#{$values});
}

Code Block with Language #code-block-with-language

@mixin will-change($values...) {
    @if length($values) == 0 {
        @error "will-change() expects one or more parameters.";
    }
    will-change: #{$values};
}

Extended Code Block with Language #extended-code-block-with-language

Figure #figure

Figure with Caption #figure-with-caption

Sintra, Portugal skyline by … me

Video #video

Buttons #buttons

Buttons List #buttons-list

Horizontal Rule #horizontal-rule


Content List #content-list

Icons #icons

HTML Classes #html-classes

Classes should be double-space delimited.

<button class="button  button--small  js-trigger"
        rel="me author">
</button>

Technology #technology

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

SassDoc is used to build the SCSS Documentation.

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

Tone and Voice #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: