Layout - Bojler

Main wrapper

Main wrapper is used to define main table inside our email template. Basically, main wrapper adds spacing around your table to move it from browser edge. You should use it in every email template you build with bojler.

Example

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

Where to customize this?

To change default vertical and horizontal spacing you have to update variables in src/sass/_settings.scss. Take a look at table below.

Variable name	Description	Value
`$page-vertical-spacing`	Defines page vertical spacing on large screens.	40px
`$page-vertical-spacing-mobile`	Defines page vertical spacing on smaller screens.	20px
`$page-horizontal-spacing-mobile`	Defines page horizontal spacing on smaller screens.	20px

Grid

Grid settings

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

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

Where to customize this?

To change default grid settings you have to update variables in src/sass/_settings.scss. Take a look at table below.

Variable Name	Description	Value
`$grid-container-width`	This is container max width, all content will be contained inside this width.	660px
`$grid-columns`	Number of columns.	12
`$grid-gutter`	Gutter (spacing) between two columns.	20px

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.

Example

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

Columns

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

Examples

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

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.

Example

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

Columns without gutter

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

Example

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

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.