In this tutorial we’re going to take a first look at ZURB’s Foundation for Emails framework. We’ll get it setup, explain what comes in the package, then build ourselves a simple responsive email.
We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.
Frameworks
In the last half-year I got acquainted with a couple of frameworks and boilerplates for creating HTML emails. Before these tools, the actual development was always hard to test and fix, not to mention making emails responsive.
Coding HTML emails is a very different animal compared to creating a normal web page. It’s like traveling back in time to 1999. We need to use table-based layouts, inline styles and accommodate clients like desktop apps (Thunderbird, Outlook) and webmails (Gmail, Yahoo).
To solve this puzzle and get reliable results, we have two options:
- follow any of Nicole Merlin’s tutorials
- choose a modern HTML email framework like Foundation for Emails
For the purposes of this tutorial, we’re obviously going to go with the second option.
What’s in the Box?
The ZURB email stack provides an all in one package solution for creating emails.
It consists of:
- Gulp: a build system for automating the workflow
- Inky HTML: for converting simple code to tables
- Sass: the popular CSS preprocessor
- Inliner: for inlining the styles
- BrowserSync: a test server for reloading
- Image Compression: for auto-compressing images
Foundation for Emails will watch as you code, compiling, inlining, then minifying the result ready for production. It’s been widely tested in many desktop and mobile apps; for the full list of what’s supported you can check the compatibility section. You may also want to refer to the official guide when starting out with the framework.
Setting up the Project
For this entire process, I use Windows 10, the 64 bit version. If you use a different system you’ll still be able to follow along.
The stack works with Node.js and its package manager npm. To install Foundation for Emails we open up our terminal, then we use the command:
1 |
npm install --global foundation-cli |
Then we change directory to a project folder (wherever you want to run this project) using cd [project folder path]. In the project directory the next command should be:
1 |
foundation new --framework emails
|
You’ll be asked “What's the project called? (no spaces)”, at which point you enter a project name, hit enter, then sit back for a moment while the project dependencies are installed.
Start Your Engines
Now we’re setup with all our project files, our Node modules are installed, and our Bower components are installed. To start the framework and server, go to the project folder and use the command:
1 |
foundation watch |
The default web address (usually http://localhost:3000/) will open directly in your browser as soon as you do so. You’ll see a brand new email template, ready to go:
Src
In your project folder you’ll find (amongst other things) a src folder. In this folder you’ll find:
-
assets, styles and images -
layouts, wrapper layouts -
pages, base HTML codes -
partials, reusable HTML parts
The index page can be found here: src/pages/index.html
Note: if you’re unfamiliar with Node.js, you may want to check out our beginners’ guide just to reinforce what we’re doing:
Grids
Foundation uses a twelve column grid. It’s worth noting that the horizontal space in an email is usually narrow, especially as so much email has moved to mobile, so it’s advisable to use one or two columns only. For more best practices, check out the following guide:
Foundation for Emails makes use of Inky, its own new Templating Language which aims to remove the complex markup which tables inevitably cause. These are the Inky tags to help us markup the grids:
-
<container>: the wrapper element -
<row>: the wrapper for rows -
<columns>: the column element for actual content
We can also specify the size of the grid with the attributes small and large.
This is a one column section.
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="12">Column One</columns> |
4 |
</row>
|
5 |
</container>
|
That simple markup, when compiled, gives us the following:
1 |
<table class="container"> |
2 |
<tbody>
|
3 |
<tr>
|
4 |
<td>
|
5 |
<table class="row"> |
6 |
<tbody>
|
7 |
<tr>
|
8 |
<th class="small-12 large-12 columns first last"> |
9 |
<table>
|
10 |
<tr>
|
11 |
<th>Column One</th> |
12 |
<th class="expander"></th> |
13 |
</tr>
|
14 |
</table>
|
15 |
</th>
|
16 |
</tr>
|
17 |
</tbody>
|
18 |
</table>
|
19 |
</td>
|
20 |
</tr>
|
21 |
</tbody>
|
22 |
</table>
|
This separate example is a two column row (each column collapses to 12 wide at small breakpoints, staying 6 wide for large).
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="6">Column One</columns> |
4 |
<columns small="12" large="6">Column Two</columns> |
5 |
</row>
|
6 |
</container>
|
In essence, we’ll use one <container> element, with a series of <row> and <column> elements to build our structure.
Building Our Email
Now we understand the basic use of Inky, let’s change the email subject. In pages/index.html we can change the following details at the head of the document–you may be familiar with this form of “Front Matter” if you’ve ever used YAML:
1 |
--- |
2 |
subject: Cake Poker Summer Tournament |
3 |
--- |
Logo Area
For inserting a logo image we use standard HTML <img> markup within a <column>. The path to the logo image is relative to the document, in the assets folder. I also added an empty line above the picture by slotting in another <row> with an empty <column>:
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
</columns>
|
4 |
</row>
|
5 |
<row>
|
6 |
<columns small="12" large="12"> |
7 |
<img src="../assets/img/logo.png" alt="Cake Poker logo"> |
8 |
</columns>
|
9 |
</row>
|
Intro Text
I then added another couple of rows within the <container>, with some intro text, a welcome and grand prize content.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p><strong>Our Dear Poker fan!</strong> We got news for you: the summer championship is coming soon. If you want to participate, please register your place before the 5th of June!</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="12"> |
8 |
<p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p> |
9 |
</columns>
|
10 |
</row>
|
More Images
I added another image about the tournament city, again relative to the document.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<img src="../assets/img/london.jpg" alt="London picture"> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
Notice the <img> tag is wrapped in a <center> tag. This triggers one of Inky’s alignment classes, centering our image without us having to worry about it.
Details
The details section is a little more involved, providing more information about the event. For this section I used two columns per row, each explaining one specific part. Again, each half collapses into one column on mobile screens.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p>Details about the tournament</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="6"> |
8 |
<p><em>London, Royal Hall of Gamblers</em></p> |
9 |
</columns>
|
10 |
<columns small="12" large="6"> |
11 |
<p>The perfect place for a modern poker championship.</p> |
12 |
</columns>
|
13 |
</row>
|
14 |
<row>
|
15 |
<columns small="12" large="6"> |
16 |
<p><em>Markuee Hotel</em></p> |
17 |
</columns>
|
18 |
<columns small="12" large="6"> |
19 |
<p>Nearby four star **** accomodation with full service and great food.</p> |
20 |
</columns>
|
21 |
</row>
|
22 |
<row>
|
23 |
<columns small="12" large="6"> |
24 |
<p><em>Massage</em></p> |
25 |
</columns>
|
26 |
<columns small="12" large="6"> |
27 |
<p>A free service for all tournament players.</p> |
28 |
</columns>
|
29 |
</row>
|
30 |
<row>
|
31 |
<columns small="12" large="6"> |
32 |
<p><em>Buy-in</em></p> |
33 |
</columns>
|
34 |
<columns small="12" large="6"> |
35 |
<p>500 + 50 GBP</p> |
36 |
</columns>
|
37 |
</row>
|
Button
Finally I added a Register button for signing up. I used the provided <button> component, centering it with the <center> tag.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<button href="http://webdesign.tutsplus.com">Register</button> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
8 |
<row>
|
9 |
<columns small="12" large="12"> |
10 |
</columns>
|
11 |
</row>
|
Compiled Version
As you build and change things, your project will be continually refreshed in the browser. The compiled code can be found in the project’s dist directory, the main files being index.html and css/app.css.
Building the Finished Email
When we’re happy with what we have, we can use this command to inline the code with styles and compress the whole thing:
1 |
npm run build |
After the build process, what you’ll then find in the dist folder is a minified, ready version, suitable for production but certainly not suited for any editing!
Conclusion
You’ve completed your first session, making a responsive HTML email with the Foundation for Emails framework! We made a simple layout, with one and two column rows, images, rich text and a Register button at the end.
For inspiration, take a look at the Email Templates category on Envato Market. Perhaps design, build, then submit your own!
