Getting started

In this section you'll find features and support table, basic information about Bojler and how to use it properly. If you're first time user then you should read this first.



Bojler is an CSS email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.

If you have experience with email template development, you know how painful it is to build a perfect email template that works across all email clients.

To make it easier for you to develop responsive and lightweight email templates we have created Bojler.


This is list of features we’ve implemented to Bojler. Few of them have their own section in this documentation, we recommend you to read them all.

It’s responsive πŸ–₯️ πŸ’» πŸ“±

Bojler is responsive. Your email templates will work perfectly even on mobile devices and tablets.

Built with SASS πŸŽ‰

Modifying and extending Bojler is now a lot easier because it’s written with SASS. Nesting, extending, mixins, use them all!

Inline and Embed CSS

You don’t have to worry about styles position in your markup anymore! All you have to do is to inline your inline.css and embed your embed.css. Bojler handles everything else.

Reset styles

Reset styles are great starting point for your email template development. They fix all well known bugs in various email clients.

Typography ✍️

Bojler includes simple and easily customized typography for headings and table cells.

To read more about typography please go to Foundations section.

Grid system

Bojler uses 12-column grid with a 600px container. On mobile devices (under 640px wide), columns become full width and stack vertically.

To read more about grid system please go to Objects section.

Utility classes πŸ› οΈ

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

To read more about Utility classes please go to their own section here.


Components are pre-made blocks of code which you can use to build your own email template. These components are optional and other things don’t depend on them.

To read more about Components please go to their own section here.


Download Bojler to get the compiled CSS, source code, or include it with npm.

Compiled CSS

Download ready-to-use compiled code for Bojler to easily drop into your project. This doesn’t include documentation and source files.

Download β€” v3.2.1

Source files

Compile Bojler with your own asset pipeline by downloading our source Sass and documentation files. This option requires some additional tooling such as Sass compiler.

Download β€” v3.2.1


Install Bojler in your Node.js powered apps with the npm package:

$ npm install @slicejack/bojler


1. Inline CSS

Bojler have file called inline.css and you should inline all the styles from it to your .html email template.

Some email clients strip out <head> and <style> tags from emails, so it’s best to have your CSS written inline within your markup.

2. Embed CSS

Bojler also have file called embed.css and you should embed it to the <head> of your email template.

Styles inside embed.css can’t be inlined because they style elements added dynamically by email clients or they are media queries which also can’t be inlined.

3. You’re ready to go! πŸ”₯

Now you’re ready to build your first email template with Bojler!

Starter template

We suggest you using our starter template as a starting point for your next email template project.

  1. For best results we use XHTML Transitional.
     More info:
  2. DPI images scaling issue in Outlook - Fix.
     More info:
  3. We have included meta β€˜Content Type’ so that we can set the character set as
     UTF8 – specifying as much as possible can be a good thing when writing code
     for the whole range of email clients.
     More info:
  4. The IE=Edge meta tag enables CSS3 and media queries in Windows Phone 7.5 and
     higher. That's why you should use it in your email.
     More info:
  5. Meta β€˜Viewport’ as seen above sets the viewable area to the width of the
     device screen – this is essential if you want your email to be responsive.
     If your email is intended solely for desktop users then don’t include this
     line of code.
  6. The final bit of meta data to set is the title tag - this is worth including
     because it is used by Outlook when people use the β€˜View in Browser’ function
     and it can also appear in email preview snippets in some versions of Hotmail.
  7. Outlook line heights fix.
  8. Outlook system fonts stack fallback.
  9. DPI images scaling issue in Outlook - Fix.
     More info:
 10. Adding spacing around main table. If you don't need this spacing just
     remove class from markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" ""><!-- 1 -->
<html xmlns="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><!-- 2 -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- 3 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- 4 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 5 -->
        <title>Email title</title><!-- 6 -->

        <!-- 7 -->
        <!--[if gte mso 15]>
        <style type="text/css">
            table {
                font-size: 1px;
                line-height: 0;
                mso-margin-top-alt: 1px;
                mso-line-height-rule: exactly;
            * {
                mso-line-height-rule: exactly;

        <!-- 8 -->
        <!--[if mso]>
        <style type="text/css">
            td {
                font-family: Arial, Helvetica, sans-serif !important;

        <!-- 9 -->
        <!--[if gte mso 9]>

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

        <table class="o-main-wrapper" width="100%" border="0" cellpadding="0" cellspacing="0">
                <td class="o-main-wrapper__inner" align="center" valign="top"><!-- 10 -->
                    <table class="o-container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
                            <td class="o-column-12 is-first is-last">
                                Your content goes here ...
                            </td><!-- /.o-column -->
                    </table><!-- /.o-container -->
                </td><!-- /.o-main-wrapper__inner -->
        </table><!-- /.o-main-wrapper -->

Directory structure

Everything you want to know about directory structure can be found here:

β”œβ”€β”€ dist/ # Distribution files.
β”‚   β”œβ”€β”€ embed.css # Styles that should be embedded in the <head> of your email template.
β”‚   β”œβ”€β”€ embed.min.css # Styles that should be embedded in the <head> of your email template (minified version).
β”‚   β”œβ”€β”€ inline.css # Styles you should inline directly to your .html email template markup.
β”‚   └── inline.min.scss # Styles you should inline directly to your .html email template markup (minified version).
β”œβ”€β”€ docs/ # Project documentation (Powered by Jekyll and Doks theme).
β”œβ”€β”€ gulp/ # Gulp tasks and configuration files.
β”œβ”€β”€ scss/ # Directory with SASS files.
β”‚   β”œβ”€β”€ components/ # Pre-made blocks of code which you can use to build your own email template.
β”‚   β”œβ”€β”€ embed/ # SASS partials that gets included into embed.scss.
β”‚   β”œβ”€β”€ generic/ # Low-specificity, far-reaching rulesets (e.g. resets).
β”‚   β”œβ”€β”€ objects/ # Objects, abstractions, and design patterns.
β”‚   β”œβ”€β”€ settings/ # Global variables, site-wide settings, config switches, etc.
β”‚   β”œβ”€β”€ utilities/ # High-specificity, very explicit selectors.
β”‚   β”œβ”€β”€ embed.scss # Embed CSS gets copiled from this file.
β”‚   └── inline.scss # Inline CSS gets copiled from this file.
β”œβ”€β”€ test/ # Source test files.
β”œβ”€β”€ .eslintrc # ESlint configuration file.
β”œβ”€β”€ .gitignore # Git related file which specifies intentionally untracked files to ignore.
β”œβ”€β”€ .stylelintrc # Stylelint configuration file.
β”œβ”€β”€ .travis.yml # Travis CI configuration file.
β”œβ”€β”€ # All notable changes to this project will be documented in this file.
β”œβ”€β”€ # Contributing guide.
β”œβ”€β”€ gulpfile.js # Gulp configuration file.
β”œβ”€β”€ # Project license.
β”œβ”€β”€ package-lock.json # Automatically generated file for any operations where npm modifies either the node_modules tree, or package.json.
β”œβ”€β”€ package.json # This file contains meta data about npm modules.
└── # Quick start guide.


We have tested Bojler on numerous email clients and devices. In table below you can see what’s supported:

Email clients Web email clients Mobile devices
Apple Mail 7
Apple Mail 8
Outlook 2000
Outlook 2002
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2011
Outlook 2013
Outlook 2016
Google Apps
Office 365
Yahoo! Mail
Android 4.4
iPhone 5
iPhone 6
iPad Mini

Best practices

Follow this email CSS guide

On this link you can find a complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet. It is recommended to use it as often as possible.

DPI Scaling in Outlook 2007-2013

If you need to solve issues with DPI Scaling in Outlook 2007-2013 please refer to this thread and this article.

Support for VML and images is already implemented. We've already implemented solution to make VML and images scale properly in our starter template.

Compress and optimize your images

It’s also a really great idea to try to keep your entire email as small as humanly possible: under 100kb is ideal but not always possible, under 250kb is pretty standard.

Use a compression app like to cut all your images down to size as much as possible before you send. Slower load times, especially on mobile, can make or break your email if the overall file size is too large.

Test your email properly

Before you send your HTML email you should test it properly. We recommend you to use Litmus or Email on Acid.

Send your email properly

Best way to send your HTML email would be using an Email Service Provider (ESP) such as MailChimp or Campaign Monitor. If you’re just running a quick test we recommend you to use Putsmail.

Modifying and extending

CSS architecture

The architecture we use on our projects is called ITCSS – β€œInverted Triangle CSS”. This is a methodology that involves visualising your entire CSS project as a layered, upside-down triangle. This hierarchical shape represents a model that will help you order your CSS in the most effective, least wasteful way.

What ITCSS aims to do is to provide a level of formality and structure to the way we write our CSS. It’s a way of planning and structuring your CSS for large and long-running projects.

Learn more about ITCSS You can find more resources about ITCSS here.

Naming convention

We use BEM. The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

Learn more about BEM You can find more resources about BEM here.


To modify Bojler we recommend using our settings/core.scss partial. Duplicate it to your project, update settings and import it instead of default settings/core.scss file.


If you want to extend some of existing features do the same thing you did with core.scss partial. Duplicate, for example, components/hero.scss partial to your project, update it and import it instead of default components/hero.scss.


Documentation is powered by Jekyll. To serve the documentation just run npm run docs in package root directory.