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:
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.git
Prerequisites — 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 🔥
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
You’re ready to edit bojler configuration file in
More about settings file
Now, you can start adding HTML templates to
/templates folder you can find
boilerplate-with-hero.html which you can use as starting point for new templates.
||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
||This command builds everything from
||This command copies all the assets from
Everything you want to know about directory structure can be found here:
||Gulp tasks and configuration files.|
||This is directory contains “source” files. Everything from here gets compiled to
||Project related “assets” such as images etc. It gets copied to
||Directory with SASS files.|
||Project source templates files are stored here. By default you get
||ESlint configuration file.|
||Git related file which specifies intentionally untracked files to ignore.|
||Stylelint configuration file.|
||Travis CI configuration file.|
||All notable changes to this project will be documented in this file.|
||Quick start guide.|
||Gulp configuration file.|
||Automatically generated file for any operations where npm modifies either the
||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
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.
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.