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:
This is what you’ll need:
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.
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.
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.
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.
Don’t forget to test, use Litmus, it doesn’t suck.