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
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 :)
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.
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