/nimail

Nimail is a starterkit base on Ink, integrated into a Gulp and Sass workflow

Primary LanguageHTML

Nimail | Responsive Email Starterkit

Nimail is a starterkit base on the unofficial Sass port of Ink of Zurb's excellent Ink responsive email template system. Nimail is integrated into a Gulp and Sass workflow for automated CSS inlining, editing template with includes partials, uploads assets and easy email testing with Mailgun.

Features :
  • BrowserSync livereload development
  • Zurb’s Ink template system
  • Sass compilation
  • Templates compilation using partials includes
  • CSS inlining
  • FTP uploads
  • Sending test email using Mailgun

Installation

Download this repository as a ZIP file or clone it to your local machine :
git clone git@github.com:hellodeloo/nimail.git
You'll also need the following tools :
At the root of your local repository :
  1. Duplicate the directory /nimail-sassy-ink/ and give it the name of your new email
  2. Adjust some vars and paths in the gulpfile.js file
  3. Add your partial files in the /partials/ directory
  4. Work your html structure in the index.temp.html file
  5. Add your specific styles in the /stylesheets/scss/styles.scss file
In the directory structure :
  • index.temp.html is your main html working file
  • index.html is the html file that is launched in the livereload server
  • mail.html is the delivery file with inline styles
  • test.html is the test sending file with inline styles and absolute images links
├── your-new-nimail-sassy-ink/
│   ├── index.html
│   ├── index.temp.html
│   ├── mail.html
│   ├── test.html
│   ├── partials/
│   │   ├── _*.part.html
│   ├── stylesheets/
│   │   ├── css/
│   │   ├── scss/

Usage

First, adjust some vars and paths in the in the gulpfile.js file :
  • The name of the working directory of your email
  • The absolute url where the email images from the test will be accessible
  • The FTP directory where the email will be transferred files
  • Host of your FTP
  • Login of your FTP
  • Password of your FTP
  • The API Key of your Mailgun account
  • The email address of the sender of the email test
  • The email address of the email recipient test (can be the email address of your Litmus ou Email on acid account)
  • The subject of your email test
Development with gulp watch

To compile your assets during development, run gulp watch in the command line. This will do the following :

  • Run the BrowserSync livereload development server, it will refresh your browser window with any changes
  • Compile the Sass files within the /scss/ folder and render them in the /css/ folder
  • Compile all partials in the index.html file and launch it in the server
Deployment with gulp build

When you're ready to build your changes, run gulp build to do everything the standard command does, with it more:

  • Inline the CSS styles in the mail.html and test.html files
  • Insert the media queries styles in the document of the mail.html and test.html files (so the media queries don't get stripped)
  • Replace all images relative links with absolute links in the test.html file
  • Uploads the files on the ftp folder you use
Email Sending with gulp send

We use Mailgun service to send a test email with your template via the gulp send command line. You need to register on Mailgun to have an account and an API Key number.

Notes

You should see Email on acid tests for nimail-sassy-ink here.

Inspired By…