Styles Cheatsheet

Site Custom Classes

Custom #1

nothing yet

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

b-bg-overlay

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

with b-bg-overlay

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-text-uppercase

b-text-lhcrop-top

b-text-lhcrop-bottom

b-heading-alt

b-heading-lhcrop-top

b-heading-lhcrop-bottom

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

Normal heading

Heading b-heading-lhcrop-top

Heading b-heading-lhcrop-bottom

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.

Text:
b-text-lhcrop-top
b-text-lhcrop-bottom

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

b-button b-button-outline b-button-alt b-button-Underline

b-button-light b-button-light-outline b-button-trans

Icon

Icon Alt

b-hover-up b-hover-grow

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-grid-2-nocolgap

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

Even Spacing (b-even-spacing-m)