Objects

Objects are non-cosmetic styles that handle the skeletal aspect of a lot of UI components. Lets take a look at objects implemented into bojlers core.

Foundations Utility classes

Main wrapper

Main wrapper is used to define main table inside our email template. You should use it in every email template you build with bojler.

Basically, main wrapper adds spacing around your table to move it from browser edge. You can define spacing in your settings/_core.scss:

$page-vertical-spacing: 40px;
$page-vertical-spacing-mobile: 20px;

Your markup should look like this:

<html>
    <head></head>
    <body>
        <table class="o-main-wrapper" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="o-main-wrapper__inner" align="center" valign="top"><!-- 10 -->
                    Your content goes here ...
                </td><!-- /.o-main-wrapper__inner -->
            </tr>
        </table><!-- /.o-main-wrapper -->
    </body>
</html>

Preheader

Preheader is a snippet of copy pulled in from the body of your email and typically displayed underneath the sender name and subject line in a subscriber’s inbox.

It is pulled from the first few lines of text found within an email. Preheader can either be displayed or hidden in the body of your campaign. We decided to hide it.

<table class="o-preheader" width="0" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Your preheader text goes here. This block should be hidden.</td>
    </tr>
</table><!-- /.o-preheader -->

Grid

Grid options

See how aspects of this grid work across devices with a handy table.

Small devices (<640px) Large devices (>640px)
Grid behaviour Horizontal Collapsed
Container width 100% 600px
Number of columns 12
Column width 100% 50px
Gutter width 20px (10px on each side of a column)

Container

All emails should have a container element. This gives the email a maximum width for email clients on larger screens. It also orients the email in the center.

<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Content goes here ...
        </td>
    </tr>
</table><!-- /.o-container -->

Columns

Content should be placed within columns, and columns should be placed as <td> of your .o-container. You can define width of the column with classes such as .o-column-1, .o-column-2, .o-column-3 etc. In .o-container you can place max. 12 columns.

<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-12 is-first is-last">
            Content goes here ...
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->
<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-6 is-first">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-6 is-last">
            Content goes here ...
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->
<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-3 is-first">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-3">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-3">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-3 is-last">
            Content goes here ...
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->

First and last classes

The .is-first class adds the appropriate amount of padding-left to space the content away from the container’s edge. The .is-last class is added to your last set of columns in a row to add padding-right to the column. If you have columns in between .is-first and .is-last, these classes are not needed on the middle columns.

The reason these classes exist is that CSS properties like :last-child don’t work in most email clients so a class is needed.

<table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-4 is-first">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-4">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-4 is-last">
            Content goes here ...
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->

Columns without gutter

If you need columns without gutter than you should use .no-gutter class on your .o-container.

<table class="o-container no-gutter" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-column-6">
            Content goes here ...
        </td><!-- /.o-col -->
        <td class="o-column-6">
            Content goes here ...
        </td><!-- /.o-col -->
    </tr>
</table><!-- /.o-container -->

Don't use .is-first and .is-last classes Don't use .is-first and .is-last classes in combination with .no-gutter class, otherwise you'll have problem with unexpected paddings.

List reset

Lists won’t work properly in Outlook 2007/10/13 unless you wrap them with table cell (td) that have class .o-list-reset.

Outlook 2007/10/13 don’t support padding by default on lists so we have to add it manually.

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="o-list-reset">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </td>
    </tr>
</table>