Create responsive emails that look decent...even in Outlook!

To get running, you'll need to have the following installed:

• Node.js & npm
• Gulp

Once you have those, just run:

npm install
npm start

The files you'll likely edit are:

• template/index.hbs : for the layout/copy of the email
• template/style.css : for all your email-specific styles
• template/variables.js : for the title, colors, and typography

In index.hbs, there are several pre-made sections. Basically, you'll copy-paste the sections you need and delete what you don't need. Then, throw in your copy/images. If you think of some other useful section, throw it it!

The base styles (e.g. typography and base font colors) can likely be set in variables.js.

Finally, whatever other styles you need can be set in style.css. Note: because a CSS inlining process is being used, you can use several CSS3 selectors (e.g. :nth-of-type) to match certain elements. Because it's being inlined, you don't have to worry about client support for selectors.

Piece of 🍰!

• How to Write HTML Emails
• CSS support in email clients
• Layout and Purpose
• Email Typography