Spacing settings

• xxs: 5px
• xs: 10px
• sm: 15px
• md: 20px
• lg: 30px
• xl: 50px
• xxl: 70px

Margin and padding syntax

The helper classes start with .m for margin and .p for padding

Next is the direction -a all, -t top, -r right, -b bottom, -l left, -h horizontal (right and left), -v vertical (top and bottom)

Finally is the spacing sizes -none, -xxs, -xs, -sm, -md, -lg, -xl, -xxl

Syntax examples

• .p-a-none
• .m-b-xs
• .p-l-sm
• .p-h-xl
• .m-a-sm
• .m-r-none
• .p-b-xl
• .m-v-lg

Border settings

• base: 2px solid #ccc
• thin: 1px solid #e2e2e2

Border syntax

The border helper classes start with .b

Next is the direction -a all, -t top, -r right, -b bottom, -l left, -h horizontal (right and left), -v vertical (top and bottom)

Finally is the type of border -none, -base, -thin

Syntax examples

• .b-t-none
• .b-a-thin
• .b-t-thin
• .b-h-base
• .b-t-none
• .b-v-thin

Visual examples

Border radius settings

• sm: 5px
• md: 10px
• lg: 20px
• xl: 30px
• circle: 50%

Border radius syntax

The border radius helper classes start with .br

Next is the direction -a all, -t top, -r right, -b bottom, -l left

Finally is the type of border radius -none, -sm, -md, -lg, -xl

Note: to make a border radius a circle (50%) the class .br-circle can be applied. It can't be applied to each direction like the rest.

Syntax examples

• .br-t-none
• .br-a-md
• .br-t-sm
• .br-r-xl
• .br-a-lg
• .br-circle

Visual examples

Box shadow settings

• light
• base
• heavy
• floating

Box shadow syntax

The box shadow helper classes start with .bs

Next is the direction -a all, -t top, -r right, -b bottom, -l left, -h

Finally is the type of box shadow -light, -base, -heavy, -floating

Syntax examples

• .bs-t-light
• .bs-a-floating
• .bs-t-heavy
• .bs-a-base
• .bs-l-light
• .bs-r-base

Visual examples

All edges

One edge

Position properties

The position helpers .pos-sta static, .pos-rel relative, .pos-abs absolute, .pos-fix fixed

Pinning

Helper classes to pin an element each of the for corners with the direction properties. Obviously they won't work if the property is set to static.

.pin-top-right, .pin-right-bottom, .pin-bottom-left, .pin-left-top

Screen size settings

• xs: 24em / 384px
• sm: 40em / 640px
• md: 50em / 800px
• lg: 68em / 1088px
• xl: 100em / 1600px

Responsive helpers syntax

The media queries are set mobile first so if you set a helper class with no screen size, it will set the style from mobile up. Once a screen size is added on to the helper it sets the style for that screen size and up.

The syntax is to define the helper class .text-centre and add a screen size on the end -md

The helpers

.text-centre, .text-right, .text-left, .float-right, .float-left, .float-left, .m-centre, .hidden, .block, .inline-block, .width-full

Syntax examples

• .text-centre
• .float-right-sm
• .hidden-lg
• .inline-block
• .m-centre-md

Max and min width settings (images or elements)

• xxs: 100px
• xs: 150px
• sm: 200px
• md: 300px
• lg: 400px
• xl: 500px
• xxl: 700px

Max width settings (content)

• content: 1100px
• content wide: 1260px
• content narrow: 960px
• text: 600px
• text wider: 640px
• text wide: 700px
• text narrow: 500px

The helpers

The helpers are just max width properties so can be used on anything, however the content max width helpers are defined to keep consistency and the image max width helpers are roughly sizes of how big images might be in a design

100% width helpers .width-100, .max-width-100

Max width helpers .max-width-xxs, .max-width-xs, .max-width-sm, .max-width-md, .max-width-lg, .max-width-xl, .max-width-xxl

Min width helpers .min-width-xxs, .min-width-xs, .min-width-sm, .min-width-md, .min-width-lg, .min-width-xl, .min-width-xxl

Max width content helpers .max-width-content, .max-width-text, .max-width-text-wider, .max-width-text-wide, .max-width-text-narrow

Screen reader only .sr-only

This class can used to hide information intended only for screen readers from the layout of the rendered page.