--- /dev/null
+---
+title: Inky
+description: Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
+---
+
+We’re proud to announce our new templating language, Inky! We have our own custom tags such as the `<row>` and `<column>` tags. This keeps you out of a sea of tables and focused on your email. Check out an example below:
+
+*Need an example here.*
+
+We’re super proud of our Inky templating language, and want to make sure you know how to get the most out of it! Here’s a few of the more frequently asked questions about Inky:
+
+### What’s a templating language?
+
+Essentially, it is just custom HTML tags. Things like <row> and <columns> are understood by this language. These tags don’t actually make it into your recipient’s inbox, it’s translated into the table-based HTML needed for our approach to responsive emails.
+
+### How does it work?
+
+We run a Gulp task that runs through your code, identifies our custom Inky tags, and translates them into valid HTML. For the more tech-savvy, you can check out our task on our Github Repo here.
+
+### How do I start Inky?
+
+Inky is built into the ZURB stack. There are two simple commands, `npm start` and `npm run build`, which release the kraken, aka start the Inky templating language.
+
+### Do I have to have the Gulp tasks running for Inky to work?
+
+Yes. In order for Inky to watch your files, you need to be running either npm start or npm run build to see your changes reflected.
+
+### Do I have to use Inky, what if I just want to code my own email?
+
+You aren’t required to use Inky in your emails. You can write only in tables, or mix tables and Inky within the same email.
+
+### What are all of Inky’s tags and components?
+
+You can check out all of the syntax and examples in the components section of the docs. We recommend you start off with The Grid.
+
+### I found a bug, what do I do?
+
+Foundation for Emails is completely open sourced and we love engaging with the community. Feel free to file a bug, or even crush the bug, at our GitHub Repo.
--- /dev/null
+---
+title: Migration
+description: How to migrate from Ink to Foundation for Emails 2.
+---
+
+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.
+
+## Overview
+
+When migrating, the following items can be translated easily from 1 to 2:
+- Boilerplate
+- 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)
+
+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>
+ </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).
+
+## 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.
+
+These are some CSS classes that are no longer needed for proper spacing:
+- .wrapper
+- .wrapper-last
+- .text-pad
+- .text-pad-left
+- .text.pad-right
+
+***
+## Components
+***
+
+### Grid
+
+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="container">
+ <tr>
+ <td>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="text-pad">
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+</table>
+```
+
+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.
+
+```
+<table class="container">
+ <tr>
+ <td>
+ <table class="row">
+ <tr>
+ <th class="first last small-12 large-12 columns">
+
+ </th>
+ </tr>
+ </table>
+ <th class="expander"></th>
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+<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="container">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="six sub-columns">
+
+ </td>
+ <td class="six sub-columns last">
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (CSS version)
+
+```
+<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>
+```
+
+Version 2 (Inky markup)
+
+```
+<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`.
+
+
+Version 1
+
+```
+<table class="block-grid three-up">
+ <tr>
+ <td>
+ Thing 1
+ </td><td> <!-- Make sure the tags are directly next to each other -->
+ Thing 2
+ </td><td> <!-- Make sure the tags are directly next to each other -->
+ Thing 3
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (CSS version)
+
+```
+<table class="block-grid up-3">
+ <tr>
+ <td>Thing 1</td>
+ <td>Thing 2</td>
+ <td>Thing 3</td>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+<block-grid up="3">
+ <td>Thing 1</td>
+ <td>Thing 2</td>
+ <td>Thing 3</td>
+</block-grid>
+```
+
+### Offset Columns
+Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself.
+
+Version 1
+
+```
+<table class="row">
+ <tr>
+ <td class="wrapper offset-by-four">
+
+ <table class="eight columns">
+ <tr>
+ <td class="panel">
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (CSS version)
+
+```
+<table class="row">
+ <tr>
+ <th class="small-4 small-offset-8 large-4 large-offset-8 columns">
+
+ </th>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+<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
+
+```
+<table class="button">
+ <tr>
+ <td>
+ <a href="#">Button Label</a>
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (CSS version)
+
+```
+<table class="button">
+ <tr>
+ <td>
+ <table>
+ <tr>
+ <td>
+ <a href="https://zurb.com">I am successful</a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+<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.
+
+## Panels are now Callouts
+In an effort to unify the terminology across the Foundation family panels are now called callouts.
+
+Version 1
+
+```
+<table class="twelve columns">
+ <tr>
+ <td class="panel">
+ Panel content
+ </td>
+ <td class="expander"></td>
+ </tr>
+</table>
+```
+
+Version 2 (CSS version)
+
+```
+<table class="small-12 columns">
+ <tr>
+ <td class="callout">
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+Work in progress - issue [188](https://github.com/zurb/foundation-emails/issues/188)
+```
+
+***
+## NEW
+***
+
+### Menu
+
+Version 2 (CSS version)
+
+```
+<table class="menu">
+ <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>
+ </tr>
+</table>
+```
+
+Version 2 (Inky markup)
+
+```
+<menu>
+ <item href="one.html">Item One</item>
+ <item href="one.html">Item Two</item>
+ <item href="one.html">Item Three</item>
+</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.
+
+## Dependencies
+
+**CSS:**
+
+- Text Editor
+
+**Sass version:**
+
+- Text Editor
+- Git
+- Node
+
+To use the Sass version with the Inky markup language you'll want to insall the Foundation for Emails project template. You'll find the [installation instructions here](https://github.com/zurb/foundation-emails/tree/v2.0#getting-started).
--- /dev/null
+---
+title: ZURB Stack
+descripiton: The ZURB email stack is a boilerplate that gives you everything you need to develop and test HTML emails.
+---
+
+Email and web development can get complicated fast. We’ve introduced the ZURB Stack which helps you get started faster and let’s you do more - without having to spend time finding the right tool for the job. The ZURB Stack includes:
+
+- **Gulp.** This is our task runner of choice for Foundation. Gulp lets us queue up tasks to execute. This let’s us do cool things like inlining automagically updating your browser. It’s what the Stack is built on. Find out more about Gulp here.
+- **Sass.** We use Libsass as our CSS preprocessor of choice. If you’re not familiar with Sass it lets you use variables, nesting, and mixins (to name a few). Learn more about it here.
+Inlining. One of the biggest headaches and time-sucks used to be inlining your HTML email. Well, no more! We’re using gulp-inline to to scan your CSS file and and automatically inject your CSS when you’re ready. Just run `npm run production` in your project when you’re ready to inline.
+- **Panini.** This is our flat file generator for Foundation. Just like it’s real-world counterpart, it takes a set of ingredients and flattens them into one delicious item. This lets you separate things like the header and footer content into partials, letting you focus on your code when you’re building. It’s built off of Handlebars, which let’s you keep things super organized with partial files and repeatable sections. Checkout our Panini Repo here.
+- **BrowserSync.** BrowserSync is awesome. It’s the specific tool in our ZURB Stack that let’s you see your code changes in the browser in real-time. Just save your code and watch the magic happen in your browser. Learn more about BrowserSync here.
+- **Image Compression.** Finally, we’ve added gulp-imagemin which intelligently reduces the file-size of your png, jpeg, gif, and svg images. This lets your emails load at lightning speeds! Check out the repo here.
+
+The ZURB Stack is just a starting place that lets you do all of the things mentioned above! You can totally rip out or add to the ZURB Stack’s gulp file to make your perfect email environment.
projects / thirdparty / foundation / foundation-emails.git / commitdiff
