From: Rafi Date: Wed, 24 Feb 2016 06:37:09 +0000 (-0800) Subject: Create migration.md X-Git-Tag: v2.0.0~2^2~16 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d9a6fef08f6603007085dd51d55839dcd2c759be;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Create migration.md --- diff --git a/migration.md b/migration.md new file mode 100644 index 00000000..877f161f --- /dev/null +++ b/migration.md @@ -0,0 +1,204 @@ +# Foundation for Emails 2 Migration Guide + +- What’s new? +- Overview +- Dependencies +- HTML +- CSS/Sass +- Components +..- Existing Components +..- New Components + +#### 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 + +Dependencies + +CSS: +-Text Editor +Sass version: +- Text Editor +- Git +- Node + +## 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. + +## 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 + +``` + + + + +
+ + + + + +
+ + + + + + +
+ +
+ +
+ +
+``` + +Version 2 (CSS version) + +``` + + + + + +
+ + + + +
+ +
+
+``` + +Version 2 (Inky markup) + +``` + + + + + + + +``` + +### Sub-grid is now a small grid + +Version 1 + +``` + + + + +
+ + + + + + + +
+ + + +
+ +
+``` + +Version 2 (CSS version) + +``` + + + + +
+ + + + + + + + +
+ + + +
+ +
+``` + +Version 2 (Inky markup) + +``` + + + + + + + + + + +```