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.


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
  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

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 8 July 2020

Big numbers

Use the big-number.html include.

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

979 miles driven

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 &nbsp;  
  • en dash &ndash;
  • em dash &mdash;
  • horizontal ellipsis &hellip;
  • times (multiply) symbol &times; ×
  • minus symbol &minus;

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