adds thumbnail styles and docs

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 32822207f901bbdb8848d44d19d1dd61cf59cbc0..57552b4b30337c5e00fc42a690ccaef8389d7b9b 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -85,6 +85,10 @@ In Inky HTML, these classes are added for you.
 <columns large="4">Three</columns>
 ```
 
+### Expander
+
+The `.expander` prevents a rendering bug in Outlook that sometimes keeps the columns from expanding to full width. Instead of ignoring the width attribute and politely taking up only as much space as the content dictates (default `<th>` behavior), the presence of the expander `<th>` causes the content `<th>` to become “greedy” and take up as much space as is given to it, up to the value specified in the width (which is 100%). They’re set to not display, but they kick the total width up over 100%, which forces their sibling `<th>` to expand fully.
+
 ---
 
 ## Collapsing

diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index 27aa58d7cf24034fa96f715fd1adb724e575821f..5eb0c3bf4d065b51086326a1f6cebfd02d91db70 100644 (file)
--- a/docs/pages/thumbnail.md
+++ b/docs/pages/thumbnail.md
@@ -3,12 +3,16 @@ title: Thumbnail
 description: Spruce up an image tag with our thumbnail style.
 ---
 
+The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>` that wraps it. Make sure the `<img>` has an alt attribute that describes the contents of the image.
+
 The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
 
 ```inky_example
-<table class="thumbnail">
+<img src="http://placehold.it/200x200" class="thumbnail" /></td>
+```
+
+<!-- <table class="thumbnail">
   <tr>
     <td><img src="//placehold.it/300x300" class="thumbnail" /></td>
   </tr>
-</table>
-```
+</table> -->
\ No newline at end of file

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index b8a26e0632a91f9fd453f1f2f8177a62f37d9ae4..aab94ef23eda5dedef1979dc43dca44c9b28d02a 100644 (file)
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -5,7 +5,7 @@ descripiton: Selectively show content for different screen sizes.
 
 Visibility classes allow you to control what content appears on what screen size.
 
-Foundation for Emails has two breakpoints: *small*, which is any email client under 600 pixels wide, and *large*, any client over 600 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
+Foundation for Emails has two breakpoints: *small*, which is any email client under 596 pixels wide, and *large*, any client over 596 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
 
 Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibiility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007/2010/2013.
 

diff --git a/scss/components/_thumbnail.scss b/scss/components/_thumbnail.scss
index 7dd7dc04cc1a51f604999e2da1f339c5f2e05d55..a207fd7a40b42e458eed9cd88670bf44bc67b47d 100644 (file)
--- a/scss/components/_thumbnail.scss
+++ b/scss/components/_thumbnail.scss
@@ -6,20 +6,44 @@
 /// @group thumbnial
 ////
 
-/// Box shadow for thumbnails. **The color must be an RGB or RGBA value.**
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: solid 4px $white !default;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin !default;
+
+/// Box shadow under thumbnail images.
 /// @type Shadow
 $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
 
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out !default;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius !default;
+
+/// Adds thumbnail styles to an element.
 .thumbnail {
+  border: $thumbnail-border;
+  box-shadow: $thumbnail-shadow;
   display: inline-block;
-  border-collapse: separate;
-
-  img {
-    border-collapse: separate;
-  }
+  line-height: 0;
+  max-width: 100%;
+  transition: $thumbnail-transition;
+  border-radius: $thumbnail-radius;
+  margin-bottom: $thumbnail-margin-bottom;
 
-  &:hover, &:focus {
-    // Only supported iphone iOS, outlook.com, apple mail 6.5. But hey, progressive enhancements.
-    box-shadow: $thumbnail-shadow;
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
   }
 }
+