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.


List of sample pages

  1. Home
  2. Style Guide
  3. About
  4. Blog
  5. List of blog categories
  6. Post: Accessible close buttons
  7. Post: A plan for accessible charts

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

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


Images

Images are full width by default. Don't forget alt text.

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