## Getting Started
-There are two ways to use Foundation: the CSS version and the Sass version.
+There are two ways to get started with Foundation for Emails: the CSS version and the Sass version.
The **CSS version** is a ZIP file download with all the HTML and CSS you need to get started writing an HTML email. You'll need to run your HTML through our web inliner before you can send them off.
-<a href="css-workflow.html" class="large button">Get Started with CSS Version</a>
+<a href="css-guide.html" class="large button">Get Started with CSS Version</a>
The **Sass version** gives you more control over the visual styles of the framework, and a full build process, which includes a Sass compiler and image compression. It also includes Inky, our custom HTML language which makes writing code faster, a built-in inliner, and a live reloading server for testing. **The Sass version requires you to have Node.js installed.**
-<a href="sass-workflow.html" class="large button">Get Started with Sass Version</a>
+<a href="sass-guide.html" class="large button">Get Started with Sass Version</a>
---
<strong>Using Inky</strong>
<p>Our custom HTML tags for writing email components.</p>
</a></div>
- <div class="column"><a href="inky.html">
+ <div class="column"><a href="zurb-stack.html">
<strong>ZURB Stack</strong>
<p>An all-in-one solution for email development.</p>
</a></div>
- <div class="column"><a href="inky.html">
+ <div class="column"><a href="compatibility.html">
<strong>Compatibility</strong>
<p>Foundation works with every key email client—even Outlook.</p>
</a></div>
- <div class="column"><a href="inky.html">
+ <div class="column"><a href="migration.html">
<strong>Migrate from Ink</strong>
<p>Upgrade your Ink emails to Foundation for Emails 2.</p>
</a></div>
---
title: Inky
description: Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
+library: true
---
-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:
+## Overview
-*Need an example here.*
+HTML emails require tables upon tables *upon tables* to work properly. Although Foundation for Emails takes a lot of the pain out of constructing these tables, we've made it even easier with **Inky**, a templating language that converts simple HTML tags like `<row>` and `<columns>` into complex table HTML.
-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:
+Inky keeps you out of a sea of tables and focused on your email. Check out this example—click "Switch to Inky" to see the difference.
-### What’s a templating language?
+```inky
+<container>
+ <row>
+ <columns></columns>
+ </row>
+</container>
+```
-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.
+---
+
+## Tags
+
+Inky currently supports these custom tags:
+
+- **Grid:**
+ - `<container>`
+ - `<row>`
+ - `<columns>`
+- **Button:** `<button>`
+- **Callout:** `<callout>`
+- **Menu:**
+ - `<menu>`
+ - `<item>`
+
+---
+
+## FAQ
+
+Here are some 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?
+**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?
+**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.
+Inky is built into the ZURB Stack, but you can also use Inky standalone, or integrate it into your own build process. [Refer to the Inky readme to learn more.](https://github.com/zurb/inky#usage)
-### Do I have to have the Gulp tasks running for Inky to work?
+**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.
+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?
+**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?
+**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.
+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](grid.html).
-### I found a bug, what do I do?
+**I found a bug—what should 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.
+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, through our [GitHub repo](https://github.com/zurb/inky/issues).
---
title: Migration
description: How to migrate from Ink to Foundation for Emails 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!
- **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:
- 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:
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.
- .text-pad-left
- .text.pad-right
-***
+---
+
## Components
-***
### Grid
</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
</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`.
</block-grid>
```
+---
+
### Offset Columns
+
Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself.
Version 1
</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
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
Work in progress - issue [188](https://github.com/zurb/foundation-emails/issues/188)
```
-***
-## NEW
-***
+---
+
+## New Components
### 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:**
<li class="docs-nav-title">Geting Started</li>
<li><a href="index.html">Overview</a></li>
- <li><a href="css-workflow.html">CSS Version</a></li>
- <li><a href="sass-workflow.html">Sass Version</a></li>
+ <li><a href="css-guide.html">CSS Version</a></li>
+ <li><a href="sass-guide.html">Sass Version</a></li>
<li class="docs-nav-title">Guides</li>
<li><a href="sass.html">Using Sass</a></li>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
