Style Guide

Build

This blog is built with Jekyll and hosted on GitHub.

Fonts

• Base font family: Source Sans
• Heading font: Quatro Slab Ultra Black

Colours

• Text #2e343b
• Dark grey #5b6774
• Medium grey #abb3bd
• Light grey #e4e7ea
• White #ffffff
• Primary #007575

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

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.

<p class="text-small">%e %B %Y</p>

Website last updated on 18 March 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

Symbols

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

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)

Images with captions

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

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

SVGs

I’ve made the SVGs extra accessible by using Léonie Watson’s accessible SVGs technique.

• use role="img" so that SVGs are exposed to assistive technology like screen readers
• use the SVG’s <title> tag together with aria-labelledby to expose the name to assistive technology

<svg width="165" viewBox="0 0 320 104">
  <g role="img" aria-labelledby="logo-title">
    <title id="logo-title">Benjy Stanton</title>
    ...
  </g>
</svg>

Emoji (work in progress)

Use the emoji.html include, so that we can add some alt text. Technique inspired by Léonie Watson.

{%
  include emoji.html
  emoji="💩"
  alt-text="Pile of poo"
%}

• 💩
• 👻
• 🤖

Icons

Use SVG icons because they look crisper and can be controlled using CSS.

<span class="icon"><svg width="25" viewBox="0 0 25 25">
<g role="img" aria-labelledby="twitter-icon-title">
<title id="twitter-icon-title">Twitter</title>
<path d="M7.8 22.6c8 .1 14.6-6.3 14.6-14.3v-.9c1-.7 1.8-1.6 2.5-2.7-.9.4-1.9.7-3 .8a4.7 4.7 0 0 0 2.2-2.8c-1 .6-2.1 1.1-3.2 1.3a5.1 5.1 0 0 0-7.3-.2c-1 1-1.6 2.3-1.6 3.7l.1 1.1C8.2 8.4 4.4 6.5 1.7 3.3a5 5 0 0 0 1.5 6.8c-.7 0-1.5-.2-2.2-.6v.1c0 2.4 1.7 4.6 4.1 5.1-.7.2-1.5.2-2.3.1a5 5 0 0 0 4.8 3.5 10.5 10.5 0 0 1-6.4 2.2H0c2.3 1.4 5.1 2.1 7.8 2.1"/>
</g>
</svg>
</span>

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>

Markdown tables

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