Style guide

Build

This blog is built with Eleventy and hosted with Netlify. I'm using a mix of Liquid and Nunjucks to write the templates.

Here's a link to the repo on GitHub.

Spotted an error or something that could be improved? Please create an issue.

Fonts

I've chosen a font family that uses sans-serif system fonts. System fonts are the fonts already installed on a device. Different operating systems have different defaults, but this list should cover most of them. It's a little boring, but it's good for performance.

I borrowed this font family from Andy Bell.

font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Typography

Heading 1

Heading 2

Heading 3

Heading 4

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.

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod * tempor incididunt ut labore et dolore magna aliqua.

An example link

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.
This is the last list item

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

A blockquote 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.
— Homer Simpson

Symbols

non-breaking space  
en dash – –
em dash — —
horizontal ellipsis … …
times (multiply) symbol × ×
minus symbol − −

HTML Entities – A List of HTML Space and other HTML Symbols and Special Character Codes from Quincy Larson

Images

Images are full width by default. Don't forget alt text.

![Alt text goes here](/images/image.png)

Alt text goes here

Images with captions

Image captions aren't supported in standard Markdown so I've made an image-with-caption.html partial.

A yellow sticker with black text on a laptop — Co-op digital design principle sticker – We design for everyone

{%
  include partials/image-with-caption.html
  image:"coop-sticker.jpg"
  caption:"Co-op digital design principle sticker – We design for everyone"
  alt-text:"A yellow sticker with black text on a laptop"
%}