Style guide

Build

This blog is built with Jekyll and hosted with GitHub Pages. Jekyll uses the Liquid templating language.

Here’s a link to the repo.

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

Fonts

I’m using system fonts, I borrowed this font stack from Andy.

'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Colours

Dark black #181b1e
Black #2e343b
Dark grey #5b6774
Medium grey #abb3bd
Light grey #e4e7ea
White #ecf0f3
Primary #007575
Primary dark mode #0eb9b9

Layout templates

A list of different layouts in use on the site.

Page – About, Accessibility for designers
List of posts – Blog
List of categorised posts – Release notes
List of categories – Categories
Image post – 9 miles to Glasto

Typography

XXL text

XL heading (h1)

Large heading (h2)

Medium heading (h3)

Small heading (h4)

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

Lede

<p class="lede">A large intro paragraph or summary.</p>

A large intro paragraph or summary.

Blockquote

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

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

Small text

Smaller, lighter text used for the “published on” date and image captions.

How to set date formats with Liquid.

<small>%e %B %Y</small>

This site was last generated on 3 August 2020

Big numbers

Use the big-number.html include.

{%
  include big-number.html
  big-number="979"
  text="miles driven"
%}

979 miles driven

File link

Use the file-link.html include when you need to link a file and specify the file format and size at the same time.

{%
  include file-link.html
  text="View the raw data"
  url="https://github.com/benjystanton/benjystanton.github.io/blob/master/_data/work-trips-2018.yml"
  format="YML"
  size="3KB"
%}

View the raw data – YML 3KB

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.

Standard blog image: 1024 × 512
Thumbnail (for Twitter summary card): 500 × 500

![Alt text goes here]({{ site.url }}/assets/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 include.

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

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

<figure>
  <img src="https://www.benjystanton.co.uk/assets/coop-sticker.jpg" alt="A yellow sticker with black text on a laptop" />
  <figcaption class="text-small">
    Co-op digital design principle sticker – We design for everyone
  </figcaption>
</figure>

SVG icons

Read more about SVGs in this blog post

<svg height="54" width="165" viewBox="0 0 320 104" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-labelledby="logoTitle">
<title id="logoTitle">Benjy Stanton</title>
<path d="M72 89.3s0-6.3-.7-12.7c-.8-6.7-2.3-13.5-2.3-13.5s-1-2.8-2.4-3.1c-1.4-.4-3.3 1.7-3.3 1.7s-.8.7-1.3.5c-.5-.1-.6-1.2-.6-1.2s0-1.1-.6-1.7c-.6-.6-2-.6-2-.6l-2.8.5s-2.2 8.1-4.6 14.5c-1.9 5.2-3.9 9-3.9 9s-1.8 4.1-5.7 5.4c-1.9.6-2.8-1.9-2.8-1.9s-.7-1.5-.9-2.9c-.2-1.4.1-2.8.1-2.8s.2-1.2.6-1.9c.4-.7 1-1.7 1-1.7S46 68.2 45 63.2c-1.3-6.9-7.4-3.1-7.4-3.1s-5.2 3.2-6.9 9.8c-1.5 5.9-.5 12.9-.5 12.9s.2.8.1 1.6c-.1.7-.7 1.5-.7 1.5s-2.3 2-4.6 3.6c-1.9 1.3-3.8 2.1-3.8 2.1s3.7-7.1 1.8-12.3c-2.9-7.9-11.1-1-11.1-1l-.5-16.5s0-1.4.2-2.6c.2-1 .8-1.8.8-1.8s6.7-10.8 9.9-24.6c2.9-12.4 3.9-24.9 3.9-24.9S27 2 23.7.9C21.4.1 19 2.8 19 2.8S5.7 19.9 1.2 46.3c-4 24 3.3 50.7 3.3 50.7s.6 1.8 1.7 2.5c1.1.8 2.8.6 2.8.6s3.2-.6 6.3-2.5c5.8-3.6 13.1-9.7 13.1-9.7s1.3-1.4 2.1-1.6c.5-.1 1.2.7 1.2.7s1.7 2.2 3.5 3.1c1.9 1 4.1 1.1 4.1 1.1s4.9.1 8.3-6.8c3.1-6.2 6.2-14.4 6.9-17.3.2-.6.6-.6.6-.6s.4 0 .4.7c.2 4 .5 17.9.5 17.9s.2 5 2.9 6.2c2 .9 4.5-1.9 4.5-1.9s.7-1.2.5-3.5c-.5-7.1-1.9-21.7-1.9-21.7s.7-.8 1.7-1.7c.6-.6 1.2-1.4 2-1.4 1.4 0 1.3 3.1 1.3 3.1s.3 7.5.7 14.2c.3 5.4.8 10.4.8 10.4s.4 2.2 1.9 2.4c1.6.2 1.6-1.9 1.6-1.9zM38.5 68.9c.2-2.8.8-5.4.8-5.4s1.7-5.3 4.1-.7c.8 1.5-.5 5.8-.5 5.8s-.7 1.9-1.5 3.6c-.8 1.7-1.8 3.3-1.8 3.3s-.4.9-1.1.8c-.3-.1-.3-1.1-.3-1.1s0-3.2.3-6.3zM14.2 28c2.1-11.5 7.2-23.1 7.2-23.1s1.3-3.4 2.7-2.4c1.2.9 1.2 4.5 1.2 4.5s-1.1 15.7-4.7 28.6C17.5 46.7 12 55.3 12 55.3s-.3-13.8 2.2-27.3zM14 96.4l-2-16.6s2.8-2.3 5.2-2.6c3.8-.4 4.4 1.7 4.4 1.7s2.3 4.7-.6 10.8c-2.2 4.3-7 6.7-7 6.7zm84.6-31.7c-.6 0-1.2.4-1.2.4l-4.1 2.5s-.5.3-.7 0c-.2-.4-.1-1.3-.1-1.3s-.1-11.1-.3-19c-.1-4.2-.5-7.5-.5-7.5s.2-1.8-3.4-1.4c-2.4.3-2.7 1.8-2.7 1.8s-1.8 10.5-2.3 20.4c-.5 8.9-.2 17-.2 17s0 .6-.1 1.1c-.1.6-.4 1.1-.4 1.1s-4.2 6.3-4 14.2c.2 6.3 4.4 8.6 4.4 8.6s3.2 1.8 5.9-.4c2-1.7 2.3-5.8 2.3-5.8s.5-6.9.8-13.4c.3-5.9.4-11.4.4-11.4s0-.9.4-1.7c.4-.7 1.2-1.4 1.2-1.4s3.7-2.3 5.1-3.2c.4-.2.6-.4.6-.4s-.5-.3-1.1-.2zM80.8 98.2c-1.4-2.7-1.2-5.3-1.2-5.3s.1-2.3.7-4.6c.9-3.1 2.7-6.7 2.7-6.7l.7 20.2c0-.1-1.8-1.5-2.9-3.6zm54-40.5s-.9 0-1.9.2c-1.2.3-2.4.8-2.4.8l-8.6 4.7s-.4.1-.6-.1c-.2-.2-.2-.8-.2-.8s-.1-4-.5-7.8c-.4-3.4-1-6.6-1-6.6s.1-1.3-2.7-1.4c-2.8-.1-3 1.1-3 1.1s-.2 3.3-.2 6.4v5.7s-1.8 4.3-3.8 4.6c-1.5.1-1.8-4-1.8-4l-.3-11.9s-2.4-1.3-3.8-1.1c-1.4.3-1.8 2.2-1.8 2.2s-1.5 12 2.7 16.3c3.7 3.8 8.8-3.2 8.8-3.2l.2 6.7s-1.8 2.3-3.5 5.7c-1 2-1.8 4.3-2.5 6.7-2.6 8.3-2.7 14.7-2.7 14.7s-.2 6.1 10 4.4c5.5-.9 6.5-8.5 6.5-8.5s.2-5.1.1-10.8c-.1-7.5-.4-16.2-.4-16.2s.1-.4.3-.8c.2-.3.5-.4.5-.4l9.7-5s.7-.3 1.4-.5c.6-.1 1.2-.3 1.2-.3s.9-.1 1-.4c.1-.2-.7-.4-.7-.4zm-20.4 26c-.1 6.6-.8 13.5-.8 13.5s-.4 3.5-4.1 2.3c-1.7-.6-2.2-1.8-2.4-2.8-.2-1.1-.1-2-.1-2s0-.8.2-2.1c.5-2.9 1.7-8.4 3.2-13 2.4-7.1 3.8-6.9 3.8-6.9s.1.2.2.7c-.1 1.5 0 5.7 0 10.3zM165.6 42s-5.2 5.8-5.4 13.8c-.2 9.2 4.2 19.5 4.2 19.5s3.6 8.1 4.4 12.4c1 5.5-1.8 8.9-1.8 8.9s-1.6 2.1-4.5 1.3c-4.2-1.1-6.7-5.5-6.7-5.5s-1.4-2.2-2.4-4.7c-1.3-3.3-5.4-10.9-5.4-10.9s-.1-1.1-.8-1c-.6.1-.6 1.2-.6 1.2s4.2 10.8 7.2 16.1c3.2 5.7 8.6 6.8 8.6 6.8s7.4 2 12.7-3c5.3-5 3.9-11.9 3.9-11.9s-.3-2.6-2-6.3c-1.6-3.6-3.6-7.8-3.6-7.8s-2.9-7.1-4.6-13.5c-1.5-5.8.3-12 .3-12s.7-2.8 2.6-2.6c1.3.2 2.2 2.8 2.2 2.8L175 51s.3 1.2.7 1c.9-.4 1.1-2.3 1.1-2.3s-1-6.5-4.3-8.8c-3.9-2.4-6.9 1.1-6.9 1.1zm90.9 40.7s-.5-10.1-1.2-17.5c-.4-4.3-1.1-7.7-1.1-7.7s-.6-2.3-1.7-2.5c-2.8-.3-4.4 2.9-4.4 2.9l-3.8 6s-.7 1-1.1.8c-.4-.2-.4-1.5-.4-1.5l-.7-3.6s-.6-1.3-1.3-1.2c-1.4.1-3.5 1.6-3.5 1.6s-.9 8.9-2.8 16.4c-1.7 6.4-4.5 11.2-4.5 11.2s-1.5 1.9-2.1 1.3c-.9-.9-1.1-4.2-1.1-4.2l.6-17s-6.6-3.3-13.9 1.7c-5.2 3.5-7.2 11.7-7.2 11.7s0 .5-.3.9c-1.2 2.1-5.2 8.4-8.4 12.9-2.9 4.1-5.5 4.2-5.5 4.2s-1.9.3-2-2.5c-.2-5.5.7-16.4.7-16.4l4-38.5s0-.6.4-1c.5-.4 1.5-.6 1.5-.6l9.5-.1s.2-.2.2-.4-.1-.3-.1-.3h-10.8c-.4 0-.8-.3-.8-.3l.2-10.6s.2-.7-3.5-1.1c-2.9-.3-3.9 1-3.9 1s-.6 3.2-1 6c-.3 2.2-.5 4.1-.5 4.1s-.3.1-.7.1c-2.1-.1-9.3-.7-9.3-.7s-.2.2-.2.3c0 .2.2.5.2.5l9.7 1.2s.1.2 0 .6c-.7 5-5.4 39.6-3.9 55.6.5 5.9 9.5 4.8 9.5 4.8s2.9-.3 5.4-3.5c3.4-4.4 7.5-10.9 7.5-10.9s.5-1.1.9-1.1c.6 0 .4 1.5.4 1.5s-.2 8.3 2.8 10.7c4 3.1 8.7-1.5 8.7-1.5s1.2-1.2 2-3.7c1.6-4.6 3.4-11.9 3.4-11.9s-.2 6.8 2.4 9.6c1.6 1.6 4.8-.5 4.8-.5s2.6-1.7 4.2-8.3c1.6-6.4 3.4-14.6 3.4-14.6s.3 9.5.7 15.8c.2 3.4.6 5.6.6 5.6s.5 3.4 2.9 3.1c2.5-.3 2.5-3.7 2.5-3.7l-.8-16.9s-.1-1.8.7-3.6c1.6-3.5 4.7-8.1 4.7-8.1s.5-.8.7-.6c.3.2.3 1.3.3 1.3s-.1 10-.1 17.3c0 4.7.3 8.1.3 8.1s2.1 4.2 5.5 2.8c1.6-.1 1.3-5 1.3-5zM223 71.1c-.6 3.6-1.6 11.7-3.6 17.4-.6 1.7-1.4 3.4-2.2 4.6-.8 1.1-1.7 1.6-1.7 1.6s-1.8 1.4-2.9 1c-1.4-.5-1-2.7-1-2.7s.3-3 1.1-6.8c.5-2.6 1.8-5.6 2.8-8.3 3.4-9.4 7.4-8.6 7.4-8.6s.3.6.1 1.8z"/>
<path d="M261.2 27.5s-.7 3.1-1 6.2c-.4 3.6-.5 7.4-.5 7.4s0 .2-.1.4c-.1.1-.6.1-.6.1l-8.3.5s-.7.3-.7.5c-.1.2.5.4.5.4h3.4c2.3 0 5.1-.1 5.1-.1s.2-.1.3.1c.1.2.1.6.1.6s-.6 10.6-.9 21.2c-.3 11-.2 21.9-.2 21.9S257.5 99 263 102c5.5 3.1 10.1-2.6 10.1-2.6s1.4-1.7 2.4-3.3c1.3-2.2 2.7-5 2.7-5s-.2-.7-.3-.7c-.3 0-.6.7-.6.7s-2.7 4.1-4.7 6.5c-2.7 3.1-5.7 1.7-5.7 1.7s-1.4-.2-1.9-2.7c-.5-2.9-.8-7-.8-7s-.2-12.4 0-24.3c.3-10.9 1.2-21.3 1.2-21.3s-.1-.5.1-.8c.3-.4.9-.7.9-.7l9.4-2s.6-.2.6-.5-.5-.7-.5-.7l-9.4 1.8s-.6.2-1-.1c-.3-.3-.3-1.1-.3-1.1s.3-2.7.3-5.3c0-2.8-.3-5.7-.3-5.7s-.3-.9-1.4-1.5c-2-1.4-2.6.1-2.6.1z"/>
<path d="M320 78.6s-.9-10.2-2-18.5c-.8-5.8-1.9-10.5-1.9-10.5s-.6-4.6-6.4-2.5c-4.5 1.6-8.2 9.4-8.2 9.4s-.6 1.1-1 1.3c-.4.2-.7-.4-.7-.4l-.4-4.8s.2-1.8-2-1.5c-2.4.3-4.2 2.9-4.2 2.9s0 1.7-.2 3c-.1.9-.5 1.6-.5 1.6s-2.2 3.1-4.7 4.6c-1.9 1.1-4.1 1.2-4.1 1.2s-1.1-9.6-8.4-8.3c-7.9 1.4-9 12.2-9 12.2s-.6 8.5 4.4 10.8c7.2 3.4 10.2-2.5 10.2-2.5s1-2.1 1.7-4.5c.8-2.9 1.1-6.2 1.1-6.2s2.6-.5 4.9-1.8c2.5-1.4 4.4-3.9 4.4-3.9s-.8 10.7.4 15.3c.9 3.4 6.3 2.2 6.3 2.2s.6 0 .8-.4c.2-.5 0-1.4 0-1.4l-.6-13.6s0-1.5.6-2.8c.5-1.3 1.3-2.3 1.3-2.3s3.6-5.6 6.3-7.8c3-2.3 3.2 1.6 3.2 1.6l1.6 27s.3 2 1 2.3c1.7.8 4.8.2 4.8.2s.8.1 1.1-.3c.3-.4.2-1.6.2-1.6zm-43.9-20.7s.7-.8 2.4-.1c1.3.5 2.4 2 2.4 2s.8.9 1.2 2c.4 1.1.4 2.7.4 2.7s-2.5 1-5-1.8c-1.5-1.6-1.4-4.8-1.4-4.8zm6.4 9.1s-1.3 8.8-4.3 10.7c-6 3.9-6.3-3.1-6.3-3.1s-.6-4.1-.3-8.2c.4-6.1 2-7.5 2-7.5s.6-.9 1-.8c.3 0 .4 1.7.4 1.7s.5 2.9 2.2 4.5c1.8 1.7 4.7 1.4 4.7 1.4s.5-.1.6.2c.2.5 0 1.1 0 1.1z"/>
</svg>

Logo designed by Saph at Magenta

Tables

HTML tables

<table>
  <caption><h4>This is a table caption</h4></caption>
  <thead>
    <tr>
      <th>Table Heading</th>
      <th>Table Heading</th>
      <th class="cell--right">Numbers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td class="cell--right">1</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td class="cell--right">12</td>
    </tr>
  </tbody>
</table>

This is a table caption
Table Heading	Table Heading	Numbers
Table Cell	Table Cell	1
Table Cell	Table Cell	12

Markdown tables

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12