From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 7 Mar 2016 23:31:02 +0000 (-0800)
Subject: Add docs for visibility classes
X-Git-Tag: v2.0.0-rc.3~4^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bac011f98bf59301ae47a3e3766f736879e6485d;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add docs for visibility classes
---

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
new file mode 100644
index 00000000..af779e26
--- /dev/null
+++ b/docs/pages/visibility.md
@@ -0,0 +1,24 @@
+---
+title: Visibility Classes
+descripiton: Visibility classes allow you to control what content appears on what kind of device.
+---
+
+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.
+
+You can use a visibility class to selectively show or hide content on mobile vs. desktop clients.
+
+**To show content only on mobile clients,** add the class `.hide-for-large` to the element.
+
+```inky
+<callout class="hide-for-large">
+  <p>This callout will only appear on small screens.</p>
+</callout>
+```
+
+**To show content only on desktop clients,** add the class `.show-for-large` to the element.
+
+```inky
+<callout class="show-for-large">
+  <p>This callout will only appear on large screens.</p>
+</callout>
+```