Helpers

Short classes that stand for one property and its value. The number in the class is the number in the design.

Edit page

How the names work

A helper is a short alternative to one property and its value. align-items: center is aic, padding-top: 24px is p-t-24. Numbers are literal and move on a 4px step.

Spacing

Pixels, in steps of four, up to 160. The number in the class is the number in the design.

ClassCSS
p-t-104padding-top: 104px
p-b-24padding-bottom: 24px
p-l-16padding-left: 16px
p-r-16padding-right: 16px
p-x-24padding-left: 24px, padding-right: 24px
p-y-40padding-top: 40px, padding-bottom: 40px
m-t-64margin-top: 64px
m-l-16margin-left: 16px
m-r-16margin-right: 16px
m-b-16margin-bottom: 16px
m-x-16margin-left: 16px, margin-right: 16px
m-y-24margin-top: 24px, margin-bottom: 24px
mamargin-left: auto, margin-right: auto
mlamargin-left: auto
mramargin-right: auto
s-40a spacer 40px tall, halved below sm

Flexbox

First letters of the property, then of the value. align-items: center is aic.

ClassCSS
flexdisplay: flex
rowrapflex-flow: row wrap
aicalign-items: center
aifsalign-items: flex-start
aifealign-items: flex-end
jccjustify-content: center
jcsbjustify-content: space-between
jcsajustify-content: space-around
jcfsjustify-content: flex-start
jcfejustify-content: flex-end

Grid

container, row and col, twelve columns. The gap is one class on the row, and every col stacks to full width on phones.

ClassCSS
containercentred, max width $content, side padding $gutter
container fluidfull screen width, no side padding
rowa row of columns that wraps
colequal share of the row
col-1 … col-12N of twelve columns
col-autoas wide as its content
flex-24display: flex, gap: 24px
flex-24-32display: flex, column-gap: 24px, row-gap: 32px
row flex-24a row of columns with a 24px gap

Size

Percentages in steps of five, pixels in steps of four.

ClassCSS
w-60width: 60%
w-p-480width: 480px
h-100height: 100vh
h-p-64height: 64px
widemin-width: 90% below sm, centred
ohoverflow: hidden
obfcobject-fit: cover

Typography

A heading takes one class from the title family and nothing else. Everything else is a utility.

ClassCSS
title-label12px, uppercase label above a heading
title-intro56px, the hero heading
title-intro-sub20px, the line under it
title-page38px, the heading of an inner page
title-section30px, a section heading
title24px, a heading inside text
title-lead20px, a lead paragraph
title-sub20px, a subheading
title-card16px, a card heading
title-mini14px, a label
fz-18font-size: 18px, 0 to 72
fw-500font-weight: 500, 100 to 900
lh-150line-height: 1.5
tctext-align: center
tltext-align: left
trtext-align: right, centred below sm
upptext-transform: uppercase
ff-introfont-family: $intro
ff-basicfont-family: $basic

Colour

Three families generated from the palette. Add a colour to $palette and all three appear.

ClassCSS
c-accentcolor: $accent
bg-darkbackground-color: $dark
bg-lightbackground-color: $light
bg-trbackground-color: transparent
bg-pagethe page background, follows the mode
bg-surfacea tinted surface, follows the mode
c-textbody text colour, follows the mode
c-mutedmuted text colour, follows the mode
bc-linea visible border, follows the mode
bc-line-softa hairline, follows the mode
bc-accentborder-color: $accent, border-style: solid
dashedborder-style: dashed
doubleborder-style: double
b-noneborder: none
bw-2border-width: 2px, 0 to 24
r-8border-radius: 8px, 0 to 60 in steps of four

Layout

The container holds the width, the mobile helpers carry their breakpoint inside the class.

ClassCSS
containermax-width: $content, centred, $gutter of side padding
container fluidfull width of the screen, no side padding
linesa hairline between its children
m-showhidden above sm, shown below
m-hideshown above sm, hidden below
m-blockdisplay: block below sm, plus 24px under it
m-centercentred text and box below sm