Helps creating email templates to use in Siwapp.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Helps creating email templates to use in Siwapp.

This repository uses Foundation for Emails, refer to it for comprehensive instructions.

Quick & Dirty

First of all install foundation-cli.

Start using the Framework:

$ cd /path/to/repo
$ npm install
$ foundation watch

This will install dependencies and open a browser at http://localhost:3000 where you will be able to preview your e-mail template.

Build Final Template

$ cd /path/to/repo
$ foundation build

This will generate the inlined template inside the dist directory.


ERB Syntax

To avoid conflicts when using the CSS inliner in a template that makes use of the ERB <% %> tags, we've modified the Gulpfile file so you can use [% %] instead and the framework will generate the proper tags after CSS inline process.

This code:

[% @invoice.items.each do |item| %]
    <td>[%= item.description %]</td>
    <td class="total">[%= display_money item.base_amount %]</td>
[% end %]

would be transformed into this:

<% @invoice.items.each do |item| %>
    <td><%= item.description %></td>
    <td class="total"><%= display_money item.base_amount %></td>
<% end %>


To make code easier to understand we disabled minification by default. If you want to re-enable it you can do it in the gulpfile.babel.js file.

  1. Open the Gulpfile in your editor and search: function inliner(css)
  2. For the htmlmin plugin set the collapseWhitespace and minifyCSS options as true.

The function would be something like this:

function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,
      removeLinkTags: false
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
    // START Fix Ruby's ERB tags
    .pipe($.replace, /\[%/g, '<%')
    .pipe($.replace, /%\]/g, '%>')
    // END
    .pipe($.htmlmin, {
      collapseWhitespace: false,
      minifyCSS: false

  return pipe();