Styles Cheatsheet

Colours & Boxes

Backgrounds

b-bg-dark
b-bg-medium
b-bg-light
b-bg-accent
b-bg-gradient
b-bg-light-trans
b-bg-light-trans-x
b-bg-dark-trans

Boxes

b-box
b-box-l
b-icon-box

Typography Colours

b-text-light
b-text-dark
b-text-accent
b-heading-light
b-heading-accent
b-bg-dark
b-bg-medium
b-bg-light
b-bg-accent
b-bg-gradient

b-box

with b-shadow

b-box-l

with b-shadow-alt
b-bg-dark-trans

Headings

This is a block of text, check it to see the text colour. 

b-heading-light

b-text-light

b-heading-accent

b-text-accent
b-bg-light-trans
b-text-dark
b-bg-light-trans-x

Buttons, Typography & Utility Classes

Buttons

b-button
b-button-outline
b-button-alt
b-button-underline
b-button-light
b-button-light-outline
b-button-trans

Typography

b-text-l
b-text-s
b-tagline
b-text-note
b-quote
b-heading-alt
b-text-uppercase

Icons

b-icon-s
b-icon-m
b-icon-l
b-icon-alt-s
b-icon-alt-m
b-icon-alt-l

Utility

b-shadow
b-shadow-alt
b-transition
b-hover-up
b-hover-grow

Testimonial

b-testimonial
b-testimonial-text
b-testimonial-name
b-testimonial-name-title
b-testimonial-image

Images

b-bg-image-centred
b-image-wrap-landscape
b-image-objectfit-cover

Typography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Tagline text (b-tagline)
Large text text (b-text-l)
Small text (b-text-s)
Note text (b-text-note)
Quote text (b-quote)
Uppercase text (b-Uppercase)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6  (b-text-upppercase)

Heading alt

This is a wonderful testimonial about your services or product. Keep it short and readable and choose one that's relevant to the content around it. 
Person's Name
Person's Title
This is a wonderful testimonial about your services or product. Keep it short and readable and choose one that's relevant to the content around it. 
Person's Name
Person's Title

Layout

Even CSS Grid Columns

b-grid-2
b-grid-2-nocolgap
b-grid-3
b-grid-3-nocolgap
b-grid-4
b-grid-5
b-grid-6

Other Grid layouts

b-grid-2-1-1
b-grid-2-1
b-grid-1-2
b-grid-3-2
b-grid-2-3

Layout Helpers

b-col-width-half
b-col-width-third
b-grid-nopadding

Grid 2

Grid 2 nocolgap

Grid 3

Grid 3 nocolgap

Grid 4

Grid 5

Grid 6

Grid 2-1-1

Grid 2-1

Grid 1-2

Grid 3-2

Grid 2-3

b-grid-nopadding

b-col-width-half

This div has 1.rem left padding on it to line it up with the interior content of the boxed columns above. The full width of the div is an exact match for the outside of boxed columns above :)
b-col-width-third

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Sizing and Spacing

Padding (top & bottom)

b-padding-xxs
b-padding-xs
b-padding-s
b-padding-m
b-padding-l
b-padding-xl

Margin Top

b-margin-top-xxs
b-margin-top-xs
b-margin-top-s
b-margin-top-m
b-margin-top-l
b-margin-top-xl

Margin Bottom

b-margin-bottom-xxs
b-margin-bottom-xs
b-margin-bottom-s
b-margin-bottom-m
b-margin-bottom-l
b-margin-bottom-xl

Margin Right

b-margin-left-xxs
b-margin-left-xs
b-margin-left-s
b-margin-left-m
b-margin-left-l
b-margin-left-xl
b-margin-right-xxs
b-margin-right-xs
b-margin-right-s
b-margin-right-m
b-margin-right-l
b-margin-right-xl
diamondthumbs-up