Core CSS

GRIDS

CSS grid is our preferred layout system. To use our grid configurations, you only need to declare grid-# on your parent element. Grids with 2 or less columns will collapse into 1 column on mobile by default. Grids with 3 or more columns will collapse into 2 columns on mobile.

2 Columns - .grid-2

4 Columns - .grid-4

6 Columns (3 on Mobile) - .grid-6 .grid-break-3

GRID / FLEX ALIGNMENT

  • Horizontal Alignment

  • .align-left

  • .align-center-x

  • .align-right

  • Vertical Alignment

  • .align-top

  • .align-center-y

  • .align-bottom

  • Horizontal Alignment

  • .align-self-left

  • .align-self-center-x

  • .align-self-right

  • Vertical Alignment

  • .align-self-top

  • .align-self-center-y

  • .align-self-bottom

LAYOUT

.width-full - 100%
.width-max - 1600px
.width-content - 1200px
.width-text - 600px

Controllers for Widths / Spacers / Gutters / Padding / Grid Gaps can be found in variables.scss

Default Values

xs

12.5px

s

25px

m

50px

l

100px

xl

200px

IMAGES