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.
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:
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.
If you’re familiar with git and CLI you can simply clone bojler repo to desired folder.
git clone https://github.com/Slicejack/bojler.gitPrerequisites — Node.js and NPM
After you’ve downloaded your bojler project it’s time to install environment around it and to get started working on your new project.
Firstly, install node packages in root of your newly downloaded folder with
npm install command.
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.
You’re ready to edit bojler configuration file in src/sass/_settings.scss.
More about settings file
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.
| 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. |
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. |
CHANGELOG.md |
All notable changes to this project will be documented in this file. |
CONTRIBUTING.md |
Contributing guide. |
LICENSE.md |
Project license. |
README.md |
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 |
Gmail Google Apps Office 365 Outlook.com Yahoo! Mail |
Android 4.4 iPhone 5 iPhone 6 iPad iPad Mini |
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
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.
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.
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 compressor.io 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.
Before you send your HTML email you should test it properly. We recommend you to use Litmus or Email on Acid.
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.