Responsive Html Email Template Scss

Really Simple Responsive HTML Email Template (SCSS + Gulp-Email-Creator)

This is a fork that combines both Lee Munroe's responsive-html-email-template and Daryll Doyle's Gulp-Email-Creator.

Sometimes all you want is a really simple HTML email template to edit with Gulp and SASS (SCSS syntax). Here it is.

Getting started

  1. Clone this repo
  2. Edit config.default.json (MailChimp and MailGun API endpoints) and save it as config.json
  3. npm install
  4. gulp
  5. Start editing files under src/

You can add as many email templates you like. Just edit gulpfile.js to point to your html file you are currently editing. Don't forget to call correct css file after <title>:

<link rel="stylesheet" type="text/css" href="./../css/main.css" inline>


Sending emails using a marketing service like Campaign Monitor or Mailchimp?

Use the template as is. They'll put the CSS inline for you when you put together your campaign.

Sending emails directly from your app or using a developer service like Mailgun?

For an API like Mailgun you need to put the CSS inline. You can use Premailer to do this automatically.

  • Copy all of email.html
  • Paste the HTML as the source into Premailer
  • Copy the HTML results and use them in your email view/template

Note that some services may allow you to opt into CSS inlining, such as Mandrill.

Tried and tested

Tested on all major email clients. Mobile, desktop and web.

Email preview

Hat tip to Zurb's Ink for their awesome collection of email templates, which this was adapted from.

More HTML email resources

I've open-sourced a few other resources you might find useful:

• Released: Oct 23, 2015, 04:36 PM

Responsive Html Email Template Scss

Author: ronilaukkarinen
Item was Featured Author was Featured
When all you need is a really simple HTML email template to edit with Gulp and SASS (SCSS syntax). size
git clone