Updated spacer.md to include size-sm/size-lg attributes

See PR here: https://github.com/zurb/inky/pull/36

diff --git a/docs/pages/spacer.md b/docs/pages/spacer.md
index 59ac2b89d5fdd93a366c2c0afffb7508bf52c551..6119e11367d83a660136e57eb850b004b44839d6 100644 (file)
--- a/docs/pages/spacer.md
+++ b/docs/pages/spacer.md
@@ -14,7 +14,7 @@ Vertical spacing between email clients is not as simple as it sounds, in fact, i
 
 The spacer is used to create vertical spacing between elements. The size `size="x"` attribute allows you to set the height in pixels of vertical spacing you need.
 
-When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure for you. You can use them between rows, containers or inside wrappers, rows, columns, and containers.
+When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure for you. You can use them between rows, containers or inside wrappers, rows, columns, and containers. In this example, this spacer will create 100px of vertical spacing:
 
 ```inky_example
 <p>Stuff on top</p>
@@ -22,5 +22,13 @@ When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure
 <p>Stuff on bottom</p>
 ```
 
-In this example, this spacer will create 100px of vertical spacing.
+The Inky `<spacer>` tag also allows you to specify contextual spacer sizes for small or large screens. In the example below, there will be 40px of vertical spacing on small screens, and 100px of spacing on large screens.
 
+
+```inky_example
+<p>Stuff above...</p>
+<spacer size-sm="40" size-lg="100"></spacer>
+<p>...stuff below.</p>
+```
+
+Specify both `size-sm` and `size-lg` or use just one of those attributes to render a spacer only on the corresponding size screen.