A fork of Zurb's excellent Ink responsive email template system integrated into a Grunt and Sass/Compass workflow for automated CSS inlining, quicker editing, image minification, and email testing.
Download this repository as a ZIP file or clone it to your local machine:
git clone git@github.com:happymedium/responsive-email-kit.git
You'll also need the following Rubygem dependencies installed (if you don't already have them):
gem install compass
gem install premailer
gem install nokogiri
You'll of course need NodeJS with NPM running. We'll be using Grunt for this project, so let's install the command line client:
sudo npm install -g grunt-cli
Now, head to the root of your local repository and install the Node dependencies:
npm install
To compile your assets during development, run grunt in the command line. This will do the following:
- Compile the Sass files within the
/sass/folder and render them in the/css/folder. - Create a
/dist/directory (or empty it if it's already there). - Copy all images in
/img/to/dist/img/. - Render each of the files with corresponding EJS templates and partials, if used. The files are placed in
/dist/. - Insert the
mq.cssstylesheet in the document<head>(so the media queries don't get stripped).
Once you've compiled assets for the first time, navigate to the /dist/ folder in your browser and select one of the HTML files to view.
You can also watch for updates! Using the LiveReload extension, you can run grunt watch. It will refresh your browser window with any changes.
When you're ready to "deploy" your changes and add them to your email marketing service, run grunt dist to do everything the standard command does, except:
- Minify your images using
imagemin. - Inline the CSS referenced in each of the HTML templates and place the finished files in the
/dist/folder.
Then, copy the HTML within the HTML template you'd like to use (find it in the /dist/ folder) and paste it where your service directs you to.
Remember, your CSS has already been inlined, so you don't need to do that step manually.
You will also need to upload your images from the /dist/img/ folder to whatever email marketing service you use.
You can use Nodemailer to send a test email with your template via the command line.
- Configure the Sender and Recipient fields within the
nodemailertask inGruntfile.js - Set the values of your transport method inside
config/nodemailer-transport.json. An example Gmail method is there right now; you can check Nodemailer's site for other options. - From the command line, run
grunt send --template=YOURTEMPLATENAME(without the.htmlappended). This will run thedisttask before sending it using Nodemailer.
Edit templates within the /templates/ directory. You can add or remove them as you'd like.
To add new CSS files, it is recommended to create a new Sass (.scss) file for your template. Grunt will automatically compile any .scss files to .css (if they don't have an underscore _ prepended).
- Update documentation to switch to the
nokogirigem instead of the deadhpricotgem (thanks to @yuvilio).
Fixed a few bugs and implemented email testing.
- Fix error in JSON watch path
- Update partials watch path to account for nested partials
- Implement Nodemailer and Grunt send task (thanks to @dwightjack and his Grunt Email Boilerplate for inspiration)
- Updated the
htmlbuildtask and tags to have the basic stylesheet also printed out in a<style>tag, allowing for usage of web fonts and other things that get stripped
- Implemented EJS for templating, partials, and data integration.
- Added a
devanddisttask to prevent premailer from firing every time duringwatch.
- Initial commit.
- Added in Zurb's Ink templates and implemented some Sass variables for easy customization.