Style Guide

Build

This blog is built with Jekyll and hosted on GitHub.

https://github.com/benjystanton/benjystanton.github.io

Fonts

Colours

  • Text
  • Dark grey
  • Medium grey
  • Light grey
  • White
  • Primary

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

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

Post meta

Slightly smaller, slightly lighter text.

<p class="post-meta">9 Jan 2018</p>

Big numbers

Use the big-number.html include.

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

979 miles driven

27 miles walked

Symbols

  • non-breaking space &nbsp;  
  • en dash &ndash;
  • em dash &mdash;
  • horizontal ellipsis &hellip;
  • times (multiply) symbol &times; ×
  • minus symbol &minus;

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](path/to/image.png)

Alt text goes here

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

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

I’m phasing out these icons. They’re not ideal because the mark-up uses the <i> tag. I also plan to use SVG icons in future. These are PNGs.

<i class="icon icon-social icon-instagram">
<span class="visuallyhidden">Instagram</span>
</i>
  • GitHub
  • Twitter
  • Instagram

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