This kit will allow Architizer designers, engineers and marketers to generate the HTML for our emails in a controlled and consistent mannerthe need to worry about crazy email HTML table structures and browser consistency. The design team will build templates that "just work" and drop them here for you to build without having to worry about styling at all…just get the content in there.
-
Design emails in Sketch
-
Once design is more or less locked, move to this kit and code the email with the Inky language inside the /src/pages folder.
It's probably best to copy an existing file that closely matches your email and start from there, rather than building from scratch every time.
Use
npm startto just run the local server and watch your code changes in the browser, or usenpm run buildto watch in the browser and compile the email to full HTML inside the /dist folder. -
When the email is ready to test, compile it with
npm run buildand copy the raw html from the /dist folder. -
Format the email using a tool like FreeFormatter
-
Paste the formatted html into a new project in Litmus
-
Test the email in Litmus across our most used clients
-
Troubleshoot the email for different clients by repeating the above steps (edit template, recompile, repaste).
-
Once you have the raw html of the email working well across clients in Litmus, publish the Litmus project and add the link to the Dev ticket to handoff to the engineers.
-
Push your new template to the repo!
Alternatively you can make the edits directly to the code in Litmus, but it would be good practice to do it in this repo so that it can always be compiled to work properly
Refer to Foundation for Emails for help setting up your environment, to learn about writing in Inky and general documentation.
Please open all issues with this template on the main Foundation for Emails repo.
This is the official starter project for 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
To use this template, your computer needs Node.js 0.12 or greater. The template can be installed with the Foundation CLI, or downloaded and set up manually.
Install the Foundation CLI with this command:
npm install foundation-cli --globalUse this command to set up a blank Foundation for Emails project:
foundation new --framework emailsThe CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
To manually set up the template, first download it with Git:
git clone https://github.com/zurb/foundation-emails-template projectnameThen open the folder in your command line, and install the needed dependencies:
cd projectname
npm installRun 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": "YOUR_LITMUS@EMAIL.com",
"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": [
"example@domain.com"
],
"from": "Company name <info@company.com",
"smtp": {
"auth": {
"user": "example@domain.com",
"pass": "12345678"
},
"host": "smtp.domain.com",
"secureConnection": true,
"port": 465
}
}
}For a full list of Litmus' supported test clients(applications) see their client list.
Caution: AWS Service Fees will result, however, are usually very low do to minimal traffic. Use at your own discretion.