Styles Guide
Visual Style Colours
Light (Wild Sand)
Primary (Cello)
Dark (Mine Shaft)
vida-loca (Vida Loca)
Secondary (Lima)
inch-worm (Inch Worm)
barberry (Barberry)
Fonts
Heading Typeface
Nexa
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
Body Typeface
Proxima Nova
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
Aa
300 Light
Aa
400 Regular
Aa
600 Semibold
Typography Sizing
Test - Display 1
Test - Display 2
Test - Display 3
Test - Display 4
Test - Display 5 (h1)
Test - Heading 1 (d5)
Test - Heading 2
Test - Heading 3
Test - Heading 4
Test - Paragraph 1
Spacing Guide
Px Value
Rem Value
Example
8px
0.5 rem
x
12px
0.75 rem
x
16px
1 rem
x
24px
1.5 rem
x
32px
2 rem
x
40px
2.5 rem
x
48px
3 rem
x
64px
4 rem
x
Custom containers
The behaviour of these containers is fixed width, but the same fixed width for EVERY breakpoint beyond the specified one. That is, -sm is 100% until the -sm breakpoint is reached, then becomes 540px at every other breakpoint.
.container-sm-fixed
Fixed, won't go bigger than $container-max-widths['sm'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.
.container-md-fixed
Fixed, won't go bigger than $container-max-widths['md'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.
.container-lg-fixed
Fixed, won't go bigger than $container-max-widths['lg'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.
.container-xl-fixed
Fixed, won't go bigger than $container-max-widths['xl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.
.container-xxl-fixed
Fixed, won't go bigger than $container-max-widths['xxl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.
.container-xxxl-fixed
Fixed, won't go bigger than $container-max-widths['xxxl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.