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.
- BrowserSync livereload development
- Zurb’s Ink template system
- Sass compilation
- Templates compilation using partials includes
- CSS inlining
- FTP uploads
- Sending test email using Mailgun
git clone git@github.com:hellodeloo/nimail.git
- Duplicate the directory
/nimail-sassy-ink/
and give it the name of your new email - Adjust some vars and paths in the
gulpfile.js
file - Add your partial files in the
/partials/
directory - Work your html structure in the
index.temp.html
file - Add your specific styles in the
/stylesheets/scss/styles.scss
file
index.temp.html
is your main html working fileindex.html
is the html file that is launched in the livereload servermail.html
is the delivery file with inline stylestest.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/
- 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
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
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
andtest.html
files - Insert the media queries styles in the document of the
mail.html
andtest.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
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.
You should see Email on acid tests for nimail-sassy-ink here.