Sass based responsive email framework and CSS style inliner with great email client compatibility
A toolset for frontend developers, which provides a framework independent css style inliner, and a fine-tuned version of the great Sassy Ink fork from @faustgertz, based on Foundation for Emails (formerly Ink).
The project has a
gulpfile.js, which contains tasks for compiling the css file from an advanced Sassy Ink version, and for moving the css styles inline in the provided html email templates.
The inliner is completely independent from the Ink framework, which means that it works with any html email template.
The compiled html files are optimized to work in every email client, for example it capitalizes the
Float styles so they will work on outlook.com.
To achieve the best possible email client support, you need to know about some surprising pitfalls in some email clients out there. There is a great CSS Support Guide on Campaign Monitor's website.
I stress out that
padding is not supported on
<a> tags, and
width is not supported on
If you avoid those pitfalls, then you can achieve pretty great compatibility.
Ink's original documentation at http://zurb.com/ink/docs.php is applicable in most parts.
The main difference is that the grid columns are reduced to only two by default, as they does not play well with Gmail which has no support for media queries, so it shows all the columns in one row even on very small screens.
That's why it is reduced to only two columns, so it is only good for having support to use a left aligned section and a right aligned section in the same row.
In every other use cases it is recommended to use the block-grid syntax instead, which is responsive even on Gmail.
Ink's button styles are not user friendly as they look as a button, but only the text is clickable, not the whole "button", which can confuse the readers.
The recommended way is to use Campaign Monitor's Bulletproof email buttons generator, which generates two different button versions, which works great in every email client.
Added the following new helper classes:
text-left: left aligning the text
text-right: right aligning the text
centered: that one is not for text, it is centering the block level elements (for text, you can use Ink's built-in
You can compile the default ink.scss file without doing any modifications.
If you want to customize the sass files, then you need to create a new
_settings.scss file inside the
scss/ink/ folder, based on
_settings-default.scss, which is there only for reference. That file contains all the variables that can be customized, just find those you need, uncomment them and change their value.
For the best possible compatibility, HTML emails need to utilize inline styles instead of the style header.
This project contains a gulp file with tasks to do that automatically.
If you are not familiar with Gulp, give it a try, it is fairly easy to setup and can greatly boost your productivity.
npm installfrom the command line in the project's root folder, which will install all the required node modules.
gulpfrom the command line in the project root.
gulp compile-ink: compiles the default ink styles to
gulp compile-custom-ink: compiles the customized ink styles to
/css/ink-custom.css, based on the customized
_settings.scssfile, which must be created based on the provided
gulp inline-styles: moving the style declarations to inline styles in all the
.htmlfiles in the
templates-srcfolder, written into the
gulp default: runs the
The compiled html template will have the best possible email client compatibility, tested on an Ink based template with Litmus on a layout that utilizes the two column grid and three columns of the block-grid.