MailDev

Develop cross-browser e-mail templates using inline css (scss), handlebars (hbs) and gulp

How to start
npm install -d

To create a new template use
gulp --new template_name

To run an existing template use
gulp --start template_name

To create a new partial
gulp --partial partial_name

How it works

Templates folder

- Contains the main templates for your emails - The folder has a data.json file, index.hbs and style.scss + scss directory to store imports or variables

The data.json file inside the templates will override the partials json files (think of partials json as global data and template data.json as local data). To re-write the json from the partials, you need to access the partial object three starting from the partial name.

Multiple versions

To add multiple versions to one template, add new objects inside the "versions" array of the data.json template file. For example if you create 3 empty objects inside the template json file, the script will generate 3 html files inside dist/ folder (v0.html, v1.html, v2.html)
To access and see this files live, use http://localhost:7000/v0 or /v1 and so on.

The partials

• To create a new partial, use: gulp --partial partial_name Now go inside the root /partials folder and you will see your partial directory (for example /banner). Inside the /banner directory you now 3 files: banner.hbs, banner.json and banner.scss

1. banner.hbs - should contain your banner markup (for our example just add {{title}} inside it and save it)
2. banner.json - should contain a variable called that holds an json object "banner": { "title":"My Banner Title" }
3. banner.scss - should contain the scss for this specific banner.hbs partial.

---

``` ## Its important to follow this structure for your builder to work correctly! ```

---

Back to our template folder inside the index.hbs file if we now include the new banner partial (using {{> banner}} to call it) we will see after gulp compilation is done, a v0.html file inside the dist/ folder that contains "My Banner Title". Because the banner.scss is a dependency to our template now, it will be adeed inside our template/scss/partials.scss file that is included in the style.scss file.

Issues found so far

1. An element can only have one styles inherited from one class. If two classes are present or 2 instances of the same class are present in the scss file, the inliner compiler will not merge them, it will ignore all of then and just write the last one that it sees.
2. Array's are not mergeable inside the json files. Use fixed values for inheritance overriding.
3. Sometimes the .hbs -> html compilation task fails and prints some random html. Workaround is to compile again using gulp --start command.

TODO:

• Most important: Find or build new inliner that handles multiple classes and merges all style rules.