Download

Utility Classes

High-specificity, very explicit selectors and helper classes. We use them to easily manipulate with things such as backgrounds, spacing and typography.

Backgrounds

Utilities for controlling an element’s background color.

Class Description
.bg-white Set the background color of an element to white.
.bg-black Set the background color of an element to black.
.bg-gray Set the background color of an element to gray.
.bg-red Set the background color of an element to red.
.bg-blue Set the background color of an element to blue.

Where to customize this?

Background color utilities are auto generated, you can modify and add or remove colors in $colors map inside src/sass/_settings.scss file.

Display

Utilities for controlling the display box type of an element.

Class Description
.block Set the box type of the element to block.
.table Set the box type of the element to table.
.table-row Set the box type of the element to table-row.
.table-cell Set the box type of the element to table-cell.
.hidden Set the box type of the element to none.

Display classes are responsive

Bojler uses an intuitive : (:sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact. For example, if you want to apply .block on small screens only you’ll use this class: .block:sm.

Classes with @ suffix are still available

You can continue using @ (@sm) suffix, we’ll remove classes with @ suffix in v5.0.0. Gmail no longer supports @ character in class names.

Spacing

Utilities for controlling an element’s padding and margin.

Control an element’s padding and margin using the .p<side>-<size> and .m<side>-<size> utilities.

For example, .pt-1 would add 10px of padding to the top of the element, .mx-0 would make the horizontal margin zero.

These keywords are available by default:

Class Side (Optional) Width

Paddings


.p<side>-<width>

Margins


.m<side>-<width>

Paddings only


t — Top
r — Right
b — Bottom
l — Left
y — Vertical

Paddings and Margins


x — Horizontal

Paddings only


0 — 0px
1 — 10px

Margins only


auto — auto

Spacing classes are responsive

Bojler uses an intuitive : (:sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognisable and intact. For example, if you want to apply .pt-1 on small screens only you’ll use this class: .pt-1:sm.

Classes with @ suffix are still available

You can continue using @ (@sm) suffix, we’ll remove classes with @ suffix in v5.0.0. Gmail no longer supports @ character in class names.

Where to customize this?

Spacing utilities are auto generated, you can modify and add or remove sizes and sides in $spacers and $spacing-sides maps inside src/sass/_settings.scss file.

Typography

Headings

We redefined all of our basic heading styles against utility classes so as to allow for double stranded heading hierarchy, e.g. we semantically need an H2, but we want it to be sized like an H1.

Class Description
.h1 Add <h1> element styles to other element.
.h2 Add <h2> element styles to other element.
.h3 Add <h3> element styles to other element.
.h4 Add <h4> element styles to other element.
.h5 Add <h5> element styles to other element.
.h6 Add <h6> element styles to other element.

Text color

Utilities for controlling the text color of an element.

Class Description
.text-white Set the text color of an element to white.
.text-black Set the text color of an element to black.
.text-gray Set the text color of an element to gray.
.text-red Set the text color of an element to red.
.text-blue Set the text color of an element to blue.

Where to customize this?

Text color utilities are auto generated, you can modify and add or remove colors in $colors map inside src/sass/_settings.scss file.

Font weight

Utilities for controlling the font weight of an element.

Class Description
.font-normal Set the font weight of an element to normal.
.font-bold Set the font weight of an element to bold.

Text alignment

Utilities for controlling the alignment of text.

Class Description
.text-left Align text to the left.
.text-right Align text to the right.
.text-center Align text to the center.

Text alignment classes are responsive

Bojler uses an intuitive : (:sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognisable and intact. For example, if you want to apply .text-center on small screens only you’ll use this class: .text-center:sm.

Classes with @ suffix are still available

You can continue using @ (@sm) suffix, we’ll remove classes with @ suffix in v5.0.0. Gmail no longer supports @ character in class names.

Style and decoration

Utilities for controlling the style of text.

Class Description
.italic Italicises the text within an element.
.roman Sets the text to roman (disables italics) within an element.
.uppercase Makes all text uppercase within an element.