Utility classes

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

Objects Components

Backgrounds

Utilities for controlling an element’s background color.

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

Background color classes are customizable Background color utilities are auto generated, you can modify and add or remove colors in $colors map inside settings/core.scss file.

Borders

Utilities for controlling element’s border.
Use both .u-border- classes to create borders on your elements:

Border width

Control an element’s border width using the .u-border-<side>-<width> utilities.

For example, .u-border-t-1 would add 1px of border to the top of the element, .u-border-b-0 would make the bottom border zero.

Class Side Width
.u-border-<side>-<width> t — Top
r — Right
b — Bottom
l — Left
0 — 0px
1 — 1px
2 — 2px

Border width classes are customizable Border width utilities are auto generated, you can modify and add or remove sizes and sides in $border-sizes and $border-sides maps inside settings/core.scss file.

<td class="u-border-t-1"></td>

Border color

Control an element’s border color using the .u-border-<color> utilities.

For example, .u-border-red would add red color to your border, .u-border-black would make the border black.

Class Color
.u-border-<color> white
gray-100
gray-200
black
dark
red
yellow
green
blue
dark-blue
transparent

Border color classes are customizable Border color utilities are auto generated, you can modify and add or remove colors in $colors map inside settings/core.scss file.

<td class="u-border-red"></td>

Display

Utilities for controlling the display box type of an element.

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

Display classes are responsive Bojler uses an intuitive @<breakpoint> (@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 .u-block on small screens only you'll use this class: .u-block@sm.

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
.u-h1 Add <h1> element styles to other element.
.u-h2 Add <h2> element styles to other element.
.u-h3 Add <h3> element styles to other element.
.u-h4 Add <h4> element styles to other element.
.u-h5 Add <h5> element styles to other element.
.u-h6 Add <h6> element styles to other element.

Images

Reset

We’ve implemented .u-image-reset class which you can use to reset image font-size and line-height properties to display properly on every Outlook email client. Use this class only on your parent <td> element, not on <img>.

Class Description
.u-image-reset Reset image font-size and line-height properties.
<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-12 is-first is-last u-image-reset">
            <img src="example.png" />
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->

Spacing

Utilities for controlling an element’s padding and margin.

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

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

These keywords are available by default:

Class Side (Optional) Width
Paddings
.u-p<side>-<width>

Margins
.u-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 — 5px
2 — 10px
3 — 15px
4 — 20px

Margins only
auto — auto

Spacing classes are responsive Bojler uses an intuitive @<breakpoint> (@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 .u-pt-1 on small screens only you'll use this class: .u-pt-1@sm.

Spacing classes are customizable Spacing utilities are auto generated, you can modify and add or remove sizes and sides in $spacers and $spacing-sides maps inside settings/core.scss file.

<!--
This will add 20px padding to all sides of an element.
-->

<td class="u-p-4">
    Add some padding
</td>

<!--
This will add 5px padding to the left side of an element
and 10px padding to the bottom side of an element.
-->

<td class="u-pl-1 u-pb-2">
    Add some padding
</td>

<!--
This will add 15px padding to the left and right side
of an element (horizontaly).
-->

<td class="u-px-3">
    Add some padding
</td>

<!--
This will add `margin-left: auto;` and `margin-right: auto;`
to the specific element (horizontaly).
-->

<table class="u-mx-auto">
    This table should be centered.
</table>

Typography

Text color

Utilities for controlling the text color of an element.

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

Text color classes are customizable Text color utilities are auto generated, you can modify and add or remove colors in $colors map inside settings/core.scss file.

Font weight

Utilities for controlling the font weight of an element.

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

Text alignment

Utilities for controlling the alignment of text.

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

Text alignment classes are responsive Bojler uses an intuitive @<breakpoint> (@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 .u-text-center on small screens only you'll use this class: .u-text-center@sm.

Style and decoration

Utilities for controlling the style of text.

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