Email is easy!

Anyone who has ever had to create an email template knows what a pain it can be to get consistent rendering across different e-mail clients. Luckily many have come before me and a few have created bulletproof frameworks to get you started and save you a lot of headache. thankyouverymuch. 

Foundation for Emails is one I am familiar with and they have created some Node packages so we can incorporate it right in our own workflow. Now all you need to know is the inky markup foundation for email uses and your taskrunner will create your email templates for you.  Because tables and padding and Microsoft office in general is a pain in the ass.

Our own .NET environment though, has email template parts scattered across different views in different features. By introducing .inky.cshtml files to the features and creating some dedicated gulp tasks,  I was able to catch all files associated/used by mail renderings and stuff them in my email tasks.

Assuming you have:

.NET environment
NPM
Gulp

This is what you’ll need:

NPM packages:

npm -i --save-dev fs lazypipe inky gulp-load-plugins siphon-media-query yargs foundation-emails gulp-if gulp-replace gulp-rename run-sequence gulp-sourcemaps gulp-sass gulp-inline-css gulp-htmlmin

and/or download the starterkit which includes the gulp tasks and the basic folder setup you’ll need.

The Setup:

Install the NPM packages
Add the gulp tasks to your project
Create/add the folder structure to your styles.
And direct the paths to the right location.

And now:

You write an .inky.cshtml for every component, be it a feature or layout component, where you will use the inky markup. And you can even write your own fancy sassy scss.

simple foundation for email markup

After you run  gulp emails  all the scss will be compiled. Run gulp email --production and the inky markup will be transformed to tables and tables and tables, all styles will  be inlined, so now the files are ready for production.

See that pesky <OrderConfirmationEmailViewModel> tag? Inky will automatically close that for you. Which we don’t want. You can wrap snippets of code between ignore tags and anything inside it will be left alone.

yay, code oreo’s!!

Then run gulp email

effortless inlined bulletproof automatic emailtemplate

Don’t forget to test, use Litmus, it doesn’t suck.

Leave a Reply

Your email address will not be published. Required fields are marked *