From 071ef8f801dcbe7144270002af0bde3b71347a07 Mon Sep 17 00:00:00 2001
From: Ethan May <ethanmayedu@gmail.com>
Date: Wed, 3 Aug 2016 11:30:30 -0400
Subject: [PATCH] Updated spacer.md to include size-sm/size-lg attributes

See PR here: https://github.com/zurb/inky/pull/36
---
 docs/pages/spacer.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/pages/spacer.md b/docs/pages/spacer.md
index 59ac2b89..6119e113 100644
--- 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.