From 7c8d9551cc01536df505266218746655dc6a5a64 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 24 Aug 2013 14:40:24 -0700
Subject: [PATCH] fixes #9887: documents show and hide classes

---
 _includes/nav-css.html |  1 +
 css.html               | 27 ++++++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 4d21a4f9fb..7a6b459af1 100644
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -80,6 +80,7 @@
     <li><a href="#helper-classes-close">Close icon</a></li>
     <li><a href="#helper-classes-floats">Quick floats</a></li>
     <li><a href="#helper-classes-clearfix">Clearfix</a></li>
+    <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
     <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
     <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
   </ul>
diff --git a/css.html b/css.html
index c0169d574f..2933272cfc 100644
--- a/css.html
+++ b/css.html
@@ -2225,7 +2225,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <h3 id="helper-classes-floats">Quick floats</h3>
-    <p>Float an element to the left or right with a class. Classes can also be used as mixins.</p>
+    <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
 {% highlight html %}
 <div class="pull-left">...</div>
 <div class="pull-right">...</div>
@@ -2280,6 +2280,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
+    <h3 id="helper-classes-show-hide">Showing and hiding content</h3>
+    <p>Force an element to be shown or hidden via <code>display</code> with the use of <code>.show</code> and <code>.hide</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
+{% highlight html %}
+<div class="show">...</div>
+<div class="hide">...</div>
+{% endhighlight %}
+{% highlight css %}
+// Classes
+.show {
+  display: block !important;
+}
+.hide {
+  display: none !important;
+}
+
+// Usage as mixins
+.element {
+  .show();
+}
+.another-element {
+  .hide();
+}
+{% endhighlight %}
+
+
     <h3 id="helper-classes-screen-readers">Screen reader content</h3>
     <p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
 {% highlight html %}