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:
LS-T
Description:
Letter spacing Tight

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

CSS:
LS-W
Description:
Letter spacing Wide
Letter Spacing 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

CSS:
OP-L
‍Description:
Opacity Low

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

CSS:
OP-M
‍Description:
Opacity Mid

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

CSS:
OP-H
‍Description:
Opacity High

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
CSS:
Flex
Description: Flex box (default Horizontal)
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