Adapting Foundation's Basic template

Foundation for Emails is a framework; a code bundle that gives you sets of pre-built components and makes it easier to build responsive emails. That way, you don’t have to write all your code from scratch. They’ve got a set of pre-built templates that some of our customers like to use, the “Basic” one being one of them.

This template looks something like this (depending on your client):

To adapt it into a layout, remember that you have to split it into two parts:

  1. Layout - what is consistent across emails? how will it look? what is its structure?
  2. Content - what do you want to edit on a per-email basis?

For this, I’ve decided that everything in the yellow box, I want to edit on a per-email basis:

So let’s do it!

The Content

Look at the HTML for the template, and pull out the part that governs the content you’ve identified, and only that content:

  <h1>Hi, Susan Calvin</h1>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
  <table class="callout">
      <th class="callout-inner primary">
        <p>Callout: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>

Save it for later!

The Layout

Meanwhile, everything else in the code for the Basic layout will then go into the Email Layouts area. There, choose to create a new layout from scratch:

Here’s the basic skeleton code:

    <style type="text/css">
    <a href="{% unsubscribe_url %}" class="untracked">Unsubscribe</a>

What you want to do first is grab the Foundation layout’s CSS code (there’s a lot of it!), and toss it between the <style></style> tags:

Second (and this is the slightly tricky part), copy and paste the code between the two <body></body> tags from Foundation’s template into, with two caveats:

1. Make sure that you keep the {{ content }} tag where your email body will go (“Hi, Susan Calvin!”).

2. Keep an unsubscribe link! I’ve kept the default, which is

<a href="{% unsubscribe_url %}" class="untracked">Unsubscribe</a>

Then, just save your new layout!

Back to the content!

Remember the content code you saved? It goes in the Composer, when you create your email:

Note that I'm in Code mode!

This means that you can edit it on a per-email basis. It’s recommended that you stay in Code Mode while doing so.

Then, just make sure that your layout is selected in Layout & Preview:

And we’re done!

The final code

This is what I have in my ‘Email Layouts’, in case you’d like to copy and paste it directly: