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 font families that use system fonts. System fonts are the fonts already installed on a device. Different operating systems have different defaults, but these lists should cover most of them. It's a little boring, but it's good for performance.

Body: "Helvetica Neue","Segoe UI", Roboto, Arial, sans-serif;
Code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

List of sample pages

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

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

> 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

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 social images): 500 × 500

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

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