From: RafiBomb Date: Sun, 20 Mar 2016 21:06:13 +0000 (-0700) Subject: updates copy on css guide X-Git-Tag: v2.0.0-rc.4~27 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=daed7a720acf95fc18c784a401176a00655bfdfc;p=thirdparty%2Ffoundation%2Ffoundation-emails.git updates copy on css guide --- diff --git a/docs/pages/css-guide.md b/docs/pages/css-guide.md index 4fffc43b..4408e6d2 100644 --- a/docs/pages/css-guide.md +++ b/docs/pages/css-guide.md @@ -80,11 +80,9 @@ Most Foundation for Emails components are full tables, including the container. ```html - - - - - + + +
``` @@ -96,9 +94,9 @@ Next, let's build the grid itself, starting with the row. **Rows** group columns ```html - - - + + +
``` @@ -109,14 +107,14 @@ Columns divide your layout into horizontal sections that sit side-by-side. On sm Inside of your row (the innermost ``), add one column using this code: ```html - - - - - - -
Column One
- + + + + + +
+ Column One +
``` 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. @@ -124,14 +122,17 @@ In the above example, we used the classes `.small-12` and `.large-6` to define t Since this first column is half-width, we need a second one to go with it. *After* the `` for the first column, add the code for the second column: ```html - - - - - - -
Column Two
- + + + + + + +
+ Column One + + Column Two +
``` 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. @@ -153,7 +154,11 @@ The CSS classes are always on the outermost table element, so that's an easy way 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 `