This project is built on Foundation for Emails, a framework for creating responsive HTML devices that work in any email client. It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Simplified HTML email syntax with Inky
- Sass compilation
- Image compression
- Built-in BrowserSync server
- Full email inlining process
The main way to get started is with our email template stack. To use the stack, you'll need Node.js no greater than version 10 installed on your machine.
nvm installation instructions can be found here
To set up the emails template, fork this repo, clone it to your local development environment, and run these commands:
nvm install 10
nvm use 10 && npm install
Then run npm start to run the project. A new browser window will open with a BrowserSync server showing the finished files.
Run npm run build to do a full email inlining process. If your build fails due to a problem with node-sass, run the following to reinstall node-sass:
nvm use 10 && npm uninstall node-sass && npm install node-sass
Note: if you have multiple versions of node.js installed, preface all commands below with nvm use 10 &&
Run npm start to kick off the build process. A new browser tab will open with a server pointing to your project files.
Run npm run build to inline your CSS into your HTML along with the rest of the build process.
Run npm run litmus to build as above, then submit to litmus for testing. AWS S3 Account details required (config.json)
Run npm run mail to build as above, then send to specified email address for testing. SMTP server details required (config.json)
Run npm run zip to build as above, then zip HTML and images for easy deployment to email marketing services.
If you create a lot of emails, your build can start to slow down, as each build rebuilds all of the emails in the
repository. A simple way to keep it fast is to archive emails you no longer need by moving the pages into src/pages/archive.
You can also move images that are no longer needed into src/assets/img/archive. The build will ignore pages and images that
are inside the archive folder.
Testing in Litmus requires the images to be hosted publicly. The provided gulp task handles this by automating hosting to an AWS S3 account. Provide your Litmus and AWS S3 account details in the example.config.json and then rename to config.json. Litmus config, and aws.url are required, however if you follow the aws-sdk suggestions you don't need to supply the AWS credentials into this JSON.
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"litmus": {
"username": "[email protected]",
"password": "YOUR_ACCOUNT_PASSWORD",
"url": "https://YOUR_ACCOUNT.litmus.com",
"applications": ["ol2003","ol2007","ol2010","ol2011","ol2013","chromegmailnew","chromeyahoo","appmail9","iphone5s","ipad","android4","androidgmailapp"]
}
}Similar to the Litmus tests, you can have the emails sent to a specified email address. Just like with the Litmus tests, you will need to provide AWS S3 account details in config.json. You will also need to specify to details of an SMTP server. The email address to send to emails to can either by configured in the package.json file or added as a parameter like so: npm run mail -- --to="example.com"
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"mail": {
"to": [
"[email protected]"
],
"from": "Company name <[email protected]",
"smtp": {
"auth": {
"user": "[email protected]",
"pass": "12345678"
},
"host": "smtp.domain.com",
"secureConnection": true,
"port": 465
}
}
}For a full list of Litmus' supported test clients(applications) see their client list.