```html
<table class="container">
- <tbody>
- <tr>
- <td></td>
- </tr>
- </tbody>
+ <tr>
+ <td></td>
+ </tr>
</table>
```
```html
<table class="row">
- <tbody>
- <tr></tr>
- </tbody>
+ <tr>
+ <th></th>
+ </tr>
</table>
```
Inside of your row (the innermost `<tr>`), add one column using this code:
```html
-<th class="columns small-12 large-6 first">
- <table>
- <tr>
- <th>Column One</th>
- <th class="expander"></th>
- </tr>
- </table>
-</th>
+<table class="row">
+ <tr>
+ <th class="small-12 large-6 first columns ">
+ Column One
+ </th>
+ <th class="expander"></th>
+ </tr>
+</table>
```
In the above example, we used the classes `.small-12` and `.large-6` to define the size of the column on small vs. large email clients. Foundation uses a 12-column grid, so on mobile clients, the column stretches the full width of the page, and on desktop clients, the column is half the width of the row.
Since this first column is half-width, we need a second one to go with it. *After* the `<th>` for the first column, add the code for the second column:
```html
-<th class="columns small-12 large-6 last">
- <table>
- <tr>
- <th>Column Two</th>
- <th class="expander"></th>
- </tr>
- </table>
-</th>
+<table class="row">
+ <tr>
+ <th class="small-12 large-6 first columns ">
+ Column One
+ </th>
+ <th class="small-12 large-6 last columns ">
+ Column Two
+ </th>
+ <th class="expander"></th>
+ </tr>
+</table>
```
You may have noticed the `.first` and `.last` classes on the column. The first column in a row needs the `.first` class, and the last column in a row needs the `.last` class. This is explained more in the [First and Last Classes](grid.html#first-and-last-classes) section of the grid documentation.
Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file.
-Our [web inliner](http://foundation.zurb.com/emails/inliner.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation.css` into the CSS field, and then press "Inline!". On the right side of the screen, you'll see a large soup of HTML that is your inlined email.
+Email clients like Gmail and Outlook strip out `<style>` tag from the `<head>` and Gmails strips it from the `<body>` of the email as well. It's best to have your CSS written inline within your markup. Hand writing all your CSS inline in a style tag would be a real pain and would take a long time.
+
+Our [web inliner](http://foundation.zurb.com/emails/inliner.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation.css` into the CSS field, and then press "Inline!". Once it's done, you'll see a large soup of HTML that is your inlined email.
+
+Your email's CSS will include media queries for responsive styling which the inliner tool will move into the `<body>` so they are preserved.
---
The most popular tool for testing emails is [Litmus](https://litmus.com/). All you have to do is paste in the HTML of an email, and you get a live preview in any email client you want.
+It's up to you what email clients are important to test in, but you can [see our compatability list](compatibility.html) for recommendations.
+
---
## Next Steps
---
-title: Migration
-description: How to migrate from Ink to Foundation for Emails 2.
+title: Foundation for Emails 2 Migration Guide
+description: This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2.
tags:
- upgrade
---
-This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2.
-
----
-
## What’s new?
- **Streamlined and updated responsive grid:** We’ve simplified the markup in the new version so it’s faster and easier to code. The new responsive grid in Emails 2 requires fewer tags and classes. It’s also now responsive on Android Native!
- **Inky templating language:** With Inky you can write less code and get more done. The Inky language gets you out of tables and into a simpler, more web-like, HTML.
- **Built with Sass:** Now faster than ever, you can easily make sweeping visual changes to your email that reflect your brand styles - all within one settings file.
-- **ZURB Stack:** All kinds of task automation - [Panini](http://foundation.zurb.com/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow.
-
----
+- **ZURB Stack:** All kinds of task automation - [Panini](http://foundation.zurb.com/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow.
## Overview
- Visibility
- Typography
- Text helper classes
-- Button class
- Container
- Panel
- Media Queries
Other areas may require more changes to work correctly including:
- Grid
- Sub-grid (now part of Grid)
+- Button class
What’s new that you might want to use:
- Menu - Horizontal
- Menu - Vertical
----
-
## HTML
With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like:
```
<container>
<row>
- <column small="12" large="4"></column>
- <column small="12" large="8"></column>
+ <column small="12" large="4">
+ Content
+ </column>
+ <column small="12" large="8">
+ Content
+ </column>
</row>
</container>
```
-You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the [Grid section](https://github.com/zurb/foundation-emails/blob/master/migration.md#grid).
-
----
+You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the <a href="#grid">Grid section</a>.
## CSS/Sass
-Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings.
+Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings.
These are some CSS classes that are no longer needed for proper spacing:
- .wrapper
- .wrapper-last
- .text-pad
- .text-pad-left
-- .text.pad-right
-
----
+- .text-pad-right
+***
## Components
+***
### Grid
+<a id="grid" href="grid"></a>
Version 1
In the previous version, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column.
<table class="twelve columns">
<tr>
<td class="text-pad">
-
+
</td>
<td class="expander"></td>
</tr>
```
Version 2 (CSS version)
-In F4E 2, we’ve eliminated another a tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a last class, however we also need to identify the first column element with the first class.
+In F4E 2, we’ve eliminated another a tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a `.last` class, and now the first column element with the `.first` class. If you have columns in the middle of first and last, they don't need a `.first` or `.last` class.
```
<table class="container">
<table class="row">
<tr>
<th class="first last small-12 large-12 columns">
-
+
</th>
</tr>
</table>
<container>
<row>
<columns small="12" large="12">
-
+
</columns>
</row>
</container>
```
----
-
### Sub-grid is now a small grid
-
In an effort to unify the thinking across the Foundation family, we’ve removed the sub-columns and moved towards a fully functional small grid.
Version 1
<table class="twelve columns">
<tr>
<td class="six sub-columns">
-
+
</td>
<td class="six sub-columns last">
-
+
</td>
<td class="expander"></td>
</tr>
<table class="container">
<tr>
<td>
-
+
<table class="row">
<tr>
<th class="first large-6 small-6 columns">
-
+
</th>
-
+
<th class="last large-6 small-6 columns">
</th>
<th class="expander"></th>
</tr>
</table>
-
+
</td>
</tr>
</table>
<container>
<row>
<columns small="6">
-
+
</columns>
<columns small="6">
-
+
</columns>
</row>
</container>
```
----
-
### Block Grid
-
-The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.ex-up`.
+The block grid is no longer needed in Foundation for Emails 2.0 because the framework is reponsive in Android native (not Gmail app) and the small
-Version 1
+Version 1
```
<table class="block-grid three-up">
Version 2 (CSS version)
```
-<table class="block-grid up-3">
+<table class="row">
<tr>
- <td>Thing 1</td>
- <td>Thing 2</td>
- <td>Thing 3</td>
+ <th class="column first">
+ Thing 1
+ </th>
+ <th class="column">
+ Thing 2
+ </th>
+ <th class="column last">
+ Thing 3
+ </th>
</tr>
</table>
+
```
Version 2 (Inky markup)
```
-<block-grid up="3">
- <td>Thing 1</td>
- <td>Thing 2</td>
- <td>Thing 3</td>
-</block-grid>
+<row small-up="1" large-up="3">
+ <column>Thing 1</column>
+ <column>Thing 2</column>
+ <column>Thing 3</column>
+</row>
```
----
-
### Offset Columns
-
Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself.
-Version 1
+Version 1
```
<table class="row">
<table class="eight columns">
<tr>
<td class="panel">
-
+
</td>
<td class="expander"></td>
</tr>
<table class="row">
<tr>
<th class="small-4 small-offset-8 large-4 large-offset-8 columns">
-
+
</th>
</tr>
</table>
```
<row>
<columns small="4" large="4" class="small-offset-8 large-offset-8">
-
+
</columns>
</row>
```
----
+Offsets now can be used on the small breakpoint or the large, or both. They will shift over a set of columns over from the left.
## Buttons
+In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken a hybrid approach of using padding and borders to increase the clickable area. It requires one more table but the result is a much bigger touch target which is good for usability.
-In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken the hybrid approach of using padding and borders to increase the clickable area
-
-Version 1
+Version 1
```
<table class="button">
<button href="http://zurb.com"></button>
```
-The button markup has changed to make the touch targets better. Now the whole button is clickable. It requires more table markup but you should use Inky anyways which is much simpler.
+Centering a button is easier now, just wrap the button with `<center>` tags.
----
-
-## Panels are now Callouts
+## Panels > Callouts
+In an effort to unify the terminology across the Foundation family `panels` are now called `callouts`.
-In an effort to unify the terminology across the Foundation family panels are now called callouts.
-
-Version 1
+Version 1
```
<table class="twelve columns">
<table class="small-12 columns">
<tr>
<td class="callout">
-
+
</td>
<td class="expander"></td>
</tr>
Version 2 (Inky markup)
```
-Work in progress - issue [188](https://github.com/zurb/foundation-emails/issues/188)
+<row>
+ <columns small="6">
+ <p>One Word</p>
+ </columns>
+ <columns small="6">
+ <callout class="secondary">
+ <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
+ </callout>
+ </columns>
+</row>
+
+<callout class="primary">
+ <row>
+ <columns small="12">
+
+ <row>
+ <columns small="6">
+ <p>One Word</p>
+ </columns>
+ <columns small="6">
+ <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
+ </columns>
+ </row>
+
+ </columns>
+ </row>
+</callout>
```
----
+Callouts are only applicable to a `<td>` with a CSS version. In Foundation for Emails 2 Inky markup, you can wrap a callout around a `<row>` or the content inside a `<column>`.
-## New Components
+***
+## NEW
+***
### Menu
Version 2 (CSS version)
```
-<table class="menu">
+<table class="container">
<tr>
- <td><a href="one.html">Item One</a></td>
- <td><a href="one.html">Item Two</a></td>
- <td><a href="one.html">Item Three</a></td>
+ <td>
+
+ <table class="menu">
+ <tr>
+ <td>
+ <table>
+ <tr>
+ <th class="menu-item">
+ <a href="http://google.com">Nav 1</a>
+ </th>
+ <th class="menu-item">
+ <a href="http://google.com">Nav 2</a>
+ </th>
+ <th class="menu-item">
+ <a href="http://google.com">Nav 3</a>
+ </th>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+
+ </td>
</tr>
</table>
```
</menu>
```
-The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation.
-
----
+The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation. You can even make it vertical on the small breakpoint only with `.small-vertical`.
## Dependencies
projects / thirdparty / foundation / foundation-emails.git / commitdiff
