Getting Started

In getting started section you’ll find support table, basic information about bojler and how to install and use it properly. If you’re first time user then you should start here.

What is Bojler?

Bojler is an 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.


There are 2 ways to download Bojler:

Download latest release

Simplest way to get Bojler to your computer is to download latest release as .zip. On this page you can find download links to current release and previous ones.

Make sure you unzip downloaded file before you proceed to next step.

Clone the repo

If you’re familiar with git and CLI you can simply clone bojler repo to desired folder.

git clone

Install and get started

Prerequisites — Node.js and NPM

Make sure you have latest Node.js and NPM installed before proceeding to steps below.

After you’ve downloaded your bojler project it’s time to install environment around it and to get started working on your new project.

1. Install node packages

Firstly, install node packages in root of your newly downloaded folder with
npm install command.

2. Start development server

Let’s fire up our development server 🔥

Run npm start in your project root folder.

While your development server is running, every time you make and save changes they will be automatically compiled from src/ to dist/ folder.

3. Project configuration and files editing

You’re ready to edit bojler configuration file in src/sass/_settings.scss.

More about settings file

We’ll take deeper look at settings in other documentation sections where we’ll examine variables and maps more carefully.

Now, you can start adding HTML templates to src/templates folder.

In /templates folder you can find boilerplate.html and boilerplate-with-hero.html which you can use as starting point for new templates.

Available NPM commands

Command Description
npm start This command starts live development server and watch task. While your development server is running, every time you make and save changes they will be automatically compiled from src/ to dist/ folder. Take a look at example here.
npm run build This command builds everything from src/ to dist/ folder. Take a look at example here.
npm run assets This command copies all the assets from src/assets/ to dist/assets/ folder. You have to run this command every time you add a new asset in order to see changes. Take a look at example here.

Directory structure

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

File name Description
gulp/ Gulp tasks and configuration files.
src/ This is directory contains “source” files. Everything from here gets compiled to dist/ directory.
src/assets/ Project related “assets” such as images etc. It gets copied to dist/.
src/sass/ Directory with SASS files.
src/templates/ Project source templates files are stored here. By default you get boilerplate.html and boilerplate-with-hero.html.
.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. Project license. Quick start guide.
gulpfile.js Gulp configuration file.
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.


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

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.

We recommend you to continue using it on your project to keep files organised, clean and consistent.

Learn more about BEM

You can find more resources about BEM here.

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 boilerplate 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.