Document .hide-text and .text-hide

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 9d979bc90eb7b28f7899ce9a26030c8abdb72c30..4d21a4f9fb62bcd88921c2a11bed86f3637c460a 100644 (file)
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -81,6 +81,7 @@
     <li><a href="#helper-classes-floats">Quick floats</a></li>
     <li><a href="#helper-classes-clearfix">Clearfix</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>
 </li>
 <li>

diff --git a/css.html b/css.html
index 3e639bf3b0fe1a1fa26c04887153fdf5ad24b3c0..36bf1bf5229c8082126a1457590605a1ede6221a 100644 (file)
--- a/css.html
+++ b/css.html
@@ -2292,6 +2292,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
+
+    <h3 id="helper-classes-image-replacement">Image replacement</h3>
+    <p>Utilize the <code>.hide-text</code> mixin or <code>.text-hide</code> class to help replace an element's text content with a background image.</p>
+{% highlight html %}
+<h1 class="text-hide">Custom heading</h1>
+{% endhighlight %}
+  {% highlight css %}
+// Usage as a Mixin
+.heading {
+  .hide-text();
+}
+{% endhighlight %}
   </div>