From: RafiBomb Date: Mon, 21 Mar 2016 01:03:37 +0000 (-0700) Subject: updates sass-guide X-Git-Tag: v2.0.0-rc.4~24 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ce385e27075fb33c98d92a4658071717f852f26d;p=thirdparty%2Ffoundation%2Ffoundation-emails.git updates sass-guide --- diff --git a/docs/pages/css-guide.md b/docs/pages/css-guide.md index 4408e6d2..ae692cbc 100644 --- a/docs/pages/css-guide.md +++ b/docs/pages/css-guide.md @@ -168,7 +168,7 @@ Now that you have an inlined email, you'll need to test it in real email clients The most popular tool for testing emails is [Litmus](https://litmus.com/). All you have to do is paste in the HTML of an email, and you get a live preview in any email client you want. -It's up to you what email clients are important to test in, but you can [see our compatability list](compatibility.html) for recommendations. +It's up to you to choose what email clients are important to test in, but you can [see our compatability list](compatibility.html) for recommendations. --- diff --git a/docs/pages/sass-guide.md b/docs/pages/sass-guide.md index 8c6d1d1a..1b031262 100644 --- a/docs/pages/sass-guide.md +++ b/docs/pages/sass-guide.md @@ -34,7 +34,7 @@ We'll use the Foundation CLI to set up a new project. If you already have the Fo npm install --global foundation-cli ``` -If you run into any pemission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`. +If you run into any permission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`. ```bash sudo npm install --global foundation-cli @@ -128,19 +128,19 @@ Let's build a basic grid. ```html - Column One - Column Two + Column One + Column Two ``` Here we're using all three of the key layout elements: the container, row, and column. -A **container** will wrap the body of your entire email. It applies a maximum width to the body of the email. +A **container** will wrap the body of your email. It applies a maximum width to the body of the email. **Rows** are used to group sets of **columns** together. Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens. -In the above example, we used the attribute `large` on the `` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row. +In the above example, we used the attribute `large` on the `` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row. On a small screen, each columns will be full width and the second column will stack underneath. --- @@ -148,10 +148,18 @@ In the above example, we used the attribute `large` on the `` tag to def 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. +Email clients like Gmail and Outlook strip out `