Skip to content
Alex Hollyman
Preview the style guide in a palette

Layout

Two widths, one spacing scale, and full-width sections that can each carry their own palette.

Widths

container-page centres content at up to 72rem with 1.5rem of side padding. max-w-measure caps running text at 40rem.

Page, 72rem
Measure, 40rem

Spacing

Spacing uses Tailwind's 0.25rem steps. These are the ones in regular use.

  • 2 0.5rem Between tags.
  • 4 1rem Between a heading and its text.
  • 6 1.5rem Page side padding. Panel padding.
  • 8 2rem Between entries in a list of roles.
  • 16 4rem Section padding on small screens. Between blocks.
  • 24 6rem Section padding on wide screens.

Sections

A Section is a full-width band. Give it a palette and everything inside changes with it, which is how the home page moves through the palettes as it scrolls.

Experience

No palette set, so this band follows the page.

Read the full history

Outside work

Scouts, the Wainwrights and the National Trust.

More about the volunteering

What I work with

  • PHP
  • Laravel
  • TypeScript
  • Vue
  • AWS
Code 
<Section palette="kingfisher">
  <SectionHeading title="Outside work" />
  …
</Section>

Columns

Two layouts cover the site: a 13rem label column beside the content, and an even split. Both collapse to one column below 48rem.

Label, 13rem
Content
Half
Half