Building Blocks

Flex Box

CSS:
Flex

Description: Flex box (default Horizontal)
CSS (combo):
Flex True

Description: remains flexbox Horizontal on mobile
CSS (combo):
Flex V

Description: Flex box (default Horizontal)
Flex Box Primary Modifiers - Horizontal and Vertical
CSS:
AS

Description: Align Start
CSS:
AC

Description: Align Centre
CSS:
AE

Description: Align End
CSS:
AB

Description: Align Baseline
Flex Box Primary Align Modifiers - Applied to Flex Horizontal
CSS (combo):
AS V

Description: Align Start (Vertical)
CSS (combo):
AC V

Description: Align Centre (Vertical)
CSS (combo):
AE V

Description: Align End (Vertical)
CSS (combo):
AB V

Description: Align Baseline (Vertical)
Flex Box Primary Align Modifiers - Applied to Flex Vertical (using combo class)
CSS:
JS

Description: Justify Start
CSS:
JC

Description: Justify Centre
CSS:
JE

Description: Justify End
CSS:
JSB

Description: Justify Distribute Between
CSS:
JSA

Description: Justify Distribute Around
Flex Box Primary Justify Modifiers - Applied to Flex Horizontal
CSS (combo):
JS.V

Description: Justify Start (Vertical)
CSS (combo):
JC.V

Description: Justify Centre (Vertical)
CSS (combo):
JE.V

Description: Justify End (Vertical)
CSS (combo):
JDB.V

Description: Justify Distribute Between (Vertical)
CSS (combo):
JDA.V

Description: Justify Distribute Around (Vertical)
Flex Box Primary Justify Modifiers - Applied to Flex Vertical (using combo class)

Grid

CSS:
Autogrid

Description: Responsive grid
CSS:
Grid

Description: 2x1 grid - 20px spacing - Direction = row
CSS (combo):
Grid Col

Description: 2x1 grid - 20px spacing - Direction = Column
CSS (combo):
Grid 2col

Description: 2x1 grid
CSS (combo):
Grid 3col

Description: 3x1 grid
CSS (combo):
Grid 4col

Description: 4x1 grid
CSS (combo):
Grid 5col

Description: 5x1 grid
Grid Primary Modifiers - Rows and Columns
CSS:
Rgapw

Description: Row gap wide
CSS:
Cgapw

Description: Column gap wide
CSS:
Gapw

Description: Both gaps wide
CSS:
Gapt

Description: Both gaps thin
CSS:
Rgapt

Description: Row gap thin
CSS:
Cgapt

Description: Column gap thin
CSS:
Gapn

Description: No gaps
CSS:
Rgapn

Description: Row gap none
CSS:
Cgapn

Description: Column gap none
Grid Gap Modifiers - Rows and Columns

Height + Width Modifiers

CSS:
PW100

Description: Percentage Width 100%
CSS:
PW75

Description: Percentage Width 75%
CSS:
PW50

Description: Percentage Width 50%
CSS:
PW25

Description: Percentage Width 25%
CSS:
PW67

Description: Percentage Width 66.7%
CSS:
PW33

Description: Percentage Width 33.3%
CSS:
PW20

Description: Percentage Width 33.3%
CSS:
PW40

Description: Percentage Width 33.3%
CSS:
PW60

Description: Percentage Width 33.3%
CSS:
PW80

Description: Percentage Width 33.3%
Percentage Width Modifiers
CSS:
PH100

Description: Percentage Height 100%
CSS:
PH75

Description: Percentage Height 75%
CSS:
PH50

Description: Percentage Height 50%
CSS:
PH25

Description: Percentage Height 25%
CSS:
PH67

Description: Percentage Height 66.7%
CSS:
PH33

Description: Percentage Height 33.3%
Percentage Height Modifiers

Text Modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJL

Description:
Text Justify Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJC

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdaiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJR

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJJ

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
i

Description:
italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut

CSS:
b

Description:
bold
Primary Text modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
u

Description:
underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh

CSS:
caps
Description:
All capitals

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdaiet. Nunc ut sem vitae risus tristique

CSS:
capE
Description:
Capitalise every word

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
tsh

Description:
Text shadow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
tight

Description:
No margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CSS:
CH0.1

Description:
0.1CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.2

Description:
0.2CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.3

Description:
0.3CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.4

Description:
0.4CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.5

Description:
0.5CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.6

Description:
0.6CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.7

Description:
0.7CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.8

Description:
0.8CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH0.9

Description:
0.9CH letter spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis

CSS:
CH1.0

Description:
1.0CH letter spacing
Letter Spacing Modifiers

Text Greys

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
10B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
20B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
30B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
40B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
50B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
60B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
70B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
80B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
90B
Description: 10% Black
Text Grey Modifiers

Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP10
Description: 10% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP20
Description: 20% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP30
Description: 30% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP40
Description: 40% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP50
Description: 50% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP60
Description: 60% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP70
Description: 70% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP80
Description: 80% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP90
Description: 90% Opacity
Opacity Modifiers (not just for text)

Spacers

CSS:
bleed
Description: horizontal and vertical spacer Large
CSS:
Spacer
Description: horizontal and vertical spacer
CSS:
bleed
Description: horizontal and vertical spacer Large
CSS:
Padar
Description: 20 px padding all round
CSS:
Padarl
Description: 60 px padding all round L
CSS:
Padars
Description: 10 px padding all round S
CSS:
Marar
Description: 20 px padding all round
CSS:
Mararl
Description: 60 px padding all round
CSS:
Marars
Description: 10 px padding all round S
Spacer Elements

Miscellaneous

CSS:
rel
Description: Position Relative
CSS:
bleed
Description: No padding all round
CSS:
Grow
Description:
Expands to fill flexbox
CSS:
Stay
Description:
Will not grow or shrink in flexbox
CSS:
Bsh
Description:
Box shadow
CSS:
Bshs
Description:
Box shadow spread
Opacity Modifiers (not just for text)

Sections

CSS:
Section
Description:
Standard Section Component
CSS:
Section.bleed
Description:
Standard Section Component - No Padding
CSS:
Section.pad
Description:
Standard Section Component with top and bottom padding
CSS:
Section.hero
Description:
Standard Section Component for the hero section
Section Classes
CSS:
V

Description: Flex box Vertical
CSS:
Flex

Description: Flex box (default Horizontal)
CSS:
Contain

Description: Responsive container class
Work Hard &
Be Nice To People
H1
Work Hard &
Be Nice To People
H2
Work Hard &
Be Nice To People
H3
Work Hard &
Be Nice To People
H4
Tight classes