Precision Dialogue HTML Emails Yeoman generator
This is a Yeoman generator to create HTML emails SCSS support, image optimization, CSS inlining and litmus testing.
Based on Javier Villanueva's generator-htmlemail and Jeremy Peter's grunt-litmus.
Features
- SCSS stylesheets with Compass
- Image optimization with jpegtran and OptiPNG
- Inlining CSS styles with Premailer
- Test email delivery with Litmus
Requirements
- Node.js >= 0.8.11 (install wiki)
- Yeoman >= 1.0.0 (
npm install -g yo) - Ruby >= 1.8.7 (installers)
- Compass >= 0.12.2 (
gem install compass) - Nokogiri >= (
gem install nokogiri) - Premailer >= 1.7.3 (
gem install premailer)
Getting Started
To install generator-pdemail from npm, run:
$ npm install -g generator-pdemail
Then, initiate the generator in an empty directory with:
$ yo pdemail
Documentation
Prompts
This generator will ask you a few questions about your project before scaffolding the file structure. Here's a summary of what each question is used for:
[?] What's the project name?
Used in the generated package.json file as the name of the project, by default this is the folder name.
[?] What's your production domain?
Used by the premailer task to rewrite your assets url, e.g:
<img src="/img/sample.jpg" />
Becomes:
<img src="http://www.yourdomain.com/img/sample.jpg" />
[?] Specify your HTML template
Used to retrieve the HTML template to use as your start up code. You can provide any URL that is accesible via the interwebs. If the URL can't be retrieved the generator will use a default index.html file.
If not specified Marvin's super duper email template will be used.
[?] Specify your SCSS template
Used to retrieve the SCSS template to use as your start up code. You can provide any URL that is accesible via the interwebs. If the URL can't be retrieved the generator will use a default styles.scss file.
If not specified Marvin's super duper SCSS template will be used.
Note: You can use simple CSS if you are not familiar with the Sassy CSS format.
[?] Litmus testing options
If you have a Litmus account, you can specify your litmus domain, user name, password and testing platforms that your email will be sent to.
Sources
Sources are located in the app folder:
-
index.html: HTML boilerplate -
css/: CSS folder-
style.scss: main stylesheet
-
Grunt Tasks
grunt dev
This task runs a watch trigger for changes to the css folder and starts a static HTTP server at http://localhost:8000 pointing to the app folder. The browser will reload automatically (thanks to the livereload task) upon changes to your SCSS or HTML files.
grunt build
This task creates a build from your sources. It creates a folder named dist next to app, then compiles your SCSS file and inlines the resulting stylesheet in the HTML source through Premailer. Finally it starts a static HTTP server at http://localhost:8000 pointing to the dist folder.
Images are optimized with jpegtran and OptiPNG.
This task can be used when you are ready to put your email in your favorite ESP.
grunt test
This task sends the compiled email to Litmus. This basically performs the same actions as the build task only that instead of running a static HTTP server it'll send the test to your litmus account.
Tasks Customization
See Gruntfile.js source for more options and customizations.
Contributing
Feel free to submit bugs or pull requests!