# Foundation for Emails 2 Migration Guide
-- [What’s new?](https://github.com/zurb/foundation-emails/blob/master/migration.md#whats-new)
-- [Overview](https://github.com/zurb/foundation-emails/blob/master/migration.md#overview)
-- [HTML](https://github.com/zurb/foundation-emails/blob/master/migration.md#html)
-- [CSS/Sass](https://github.com/zurb/foundation-emails/blob/master/migration.md#csssass)
-- [Components](https://github.com/zurb/foundation-emails/blob/master/migration.md#components)
- - [Grid](https://github.com/zurb/foundation-emails/blob/master/migration.md#grid)
- - [Buttons](https://github.com/zurb/foundation-emails/blob/master/migration.md#buttons)
- - [Callout](https://github.com/zurb/foundation-emails/blob/master/migration.md#panels-are-now-callouts)
- - [Menu](https://github.com/zurb/foundation-emails/blob/master/migration.md#menu)
-- [Dependencies](https://github.com/zurb/foundation-emails/blob/master/migration.md#dependencies)
+- [What’s new?](#whats-new)
+- [Overview](#overview)
+- [HTML](#html)
+- [CSS/Sass](#csssass)
+- [Components](#components)
+ - [Grid](#grid)
+ - [Sub-grid is now a small grid](#sub-grid-is-now-a-small-grid)
+ - [Block Grid](#block-grid)
+ - [Offset Columns](#offset-columns)
+- [Buttons](#buttons)
+- [Panels are now Callouts](#panels-are-now-callouts)
+- [NEW](#new)
+ - [Menu](#menu)
+- [Dependencies](#dependencies)
#### This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2.
- **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
</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 [Grid section](#grid).
## 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
<table class="twelve columns">
<tr>
<td class="text-pad">
-
+
</td>
<td class="expander"></td>
</tr>
<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>
<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 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>
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`.
-Version 1
+Version 1
```
<table class="block-grid three-up">
### 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>
```
## Buttons
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">
## Panels are now 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>
```
<table class="container">
<tr>
- <td>
+ <td>
<table class="menu">
<tr>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
