Skip to content

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

  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

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

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"
%}

SVG icons

Read more about SVGs in this blog post