adds docs for alignment

diff --git a/docs/pages/alignment.md b/docs/pages/alignment.md
index 9f2d727e609ba63fa7ae4aa91b53d289715a28fe..722b6021b4db71a8cf6b0c4e6ec8976f21953f8a 100644 (file)
--- a/docs/pages/alignment.md
+++ b/docs/pages/alignment.md
@@ -1,6 +1,132 @@
 ---
 title: Alignment
-description: Centering made easy.
+description: Centering, images, text and buttons in HTML emails made easy.
 ---
 
-Just add the class center any element and you’ll be good to go. Inky will handle the magic behind the scenes! In the regular old CSS version, you’d have to fiddle with adding a “.text-center” class and a <code>&lt;center&gt;</code> tag to make sure things are centered. Now you just just need to add the class and move on ahead!
+Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements.
+
+## Text alignment
+
+You can align text with the `.text-x` classes. These classes will appy to the large breakpoint as well as the small.
+
+```inky_example
+<style>.columns {border: 1px solid #333;}</style>
+<container>
+  <row>
+    <columns>
+      <p class="text-left">Left (default)</p>
+    </columns>
+    <columns>
+       <p class="text-center">center</p>
+    </columns>
+    <columns>
+       <p class="text-right">right</p>
+    </columns>
+  </row>
+</container>
+```
+
+If you need to change text alignment only on the small breakpoint, you can use the `.small-text-x` classes.
+
+
+```inky_example
+<style>.columns {border: 1px solid #333;}</style>
+<container>
+  <row>
+    <columns>
+      <p class="small-text-left">Left on small</p>
+    </columns>
+    <columns>
+       <p class="small-text-center">Center on small</p>
+    </columns>
+    <columns>
+       <p class="small-text-right">Right on small</p>
+    </columns>
+  </row>
+</container>
+```
+
+You can combine these classes to override the behavior on the small breakpoint.
+
+```inky_example
+<style>.columns {border: 1px solid #333;}</style>
+<container>
+  <row>
+    <columns>
+      <p class="text-center small-text-left">Center, small left</p>
+    </columns>
+    <columns>
+       <p class="text-right small-text-center">Right, small center</p>
+    </columns>
+  </row>
+</container>
+```
+
+## Centering images
+
+Just wrap the `<center>` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <code>&lt;center&gt;</code> tag to make sure things are centered. 
+
+```inky_example
+<container>
+  <row>
+    <columns>
+      <center>
+        <img src="http://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
+      </center>
+    </columns>
+  </row>
+</container>
+```
+
+So to be clear:
+With Inky you only need to wrap an image in `<center>` tag to reliably center it. 
+In the CSS version, our centering recipe includes three ingredients:
+- `.float-center` class on the img tag
+- `align="center"` attribute on the img tag
+- wrap the img with `<center>` tags (needed for Outlook 2007, 2010, 2011)
+
+Also, it's not really a float, but the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width.
+
+If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4.
+
+
+```inky_example
+<container>
+  <row>
+    <columns small="12" large="3" class="large-offset-1">
+      <img class="small-float-center" src="http://placehold.it/200?text=small-center" alt="please don't forget me">
+    </columns>
+    <columns small="12" large="8">
+      <h4 class="small-text-center">What is the deal?</h4>
+      <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
+    </columns>  
+  </row>
+</container>
+```
+
+## Centering columns
+
+Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered.
+
+```inky_example
+<style>.columns {border: 1px solid #333;}</style>
+<container>
+  <row>
+    <columns></columns>
+      <columns>Centering a column</columns>
+    <columns></columns>
+  </row>
+  <row>
+    <columns></columns>
+      <columns small="3">Centering a column</columns>
+    <columns></columns>
+  </row>
+  <row>
+    <columns></columns>
+      <columns small="7">Centering a column</columns>
+    <columns></columns>
+  </row>
+</container>
+```
+
+If you don't add a size attribute like `small="x"` then the columns will be equal width.
\ No newline at end of file

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 64b24039e744c7a32635b5b92f6bee219e45a5ce..f4915c832bcfb4dd2396b2a4e5c275a7a03b1010 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -98,7 +98,7 @@ Collapsing a row removes the gutters from every column, which is the spacing bet
 
 ## Offsets
 
-Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them. Offsets are intended to be used with one set of columns in a row.
+Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them.
 
 Use the class `.large-offset-n` to create an offset, where `n` is the amount of columns to offset by. So, for example, `.large-offset-3` would offset the column by 25% of the width of the row. Think of it as pushing the columns over from the left.
 

diff --git a/scss/components/_alignment.scss b/scss/components/_alignment.scss
index 12a8d79f6126168443e75c3c8b6ec2f9ef3e5444..b7f2dd5997f574bc1df60c9db9f071cbfc12a604 100755 (executable)
--- a/scss/components/_alignment.scss
+++ b/scss/components/_alignment.scss
@@ -47,6 +47,26 @@ span.text-center {
   text-align: center;
 }
 
+@media only screen and (max-width: #{$global-breakpoint}) {
+  .small-float-center {
+    margin: 0 auto !important;
+    float: none !important;
+    text-align: center !important;
+  }
+
+  .small-text-center {
+    text-align: center !important;
+  }
+
+  .small-text-left {
+    text-align: left !important;
+  }
+
+  .small-text-right {
+    text-align: right !important;
+  }
+}
+
 img.float-left {
   float: left;
   text-align: left;

diff --git a/test/visual/_template.html b/test/visual/_template.html
index fc4f2c3be366c9138bebefdaf3c454a3dc90ff95..54f4ca73394ef86be56e6e7a97333b773837376a 100644 (file)
--- a/test/visual/_template.html
+++ b/test/visual/_template.html
@@ -4,11 +4,6 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width"/>
   <link rel="stylesheet" href="../assets/css/foundation.css">
-  <style>
-    .test {
-      background: red;
-    }
-  </style>
 </head>
 
 <body>