deprecate .hide; fixes #10446

css.html

@@ -2332,18 +2332,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <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>
+    <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</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>
+    <p><code>.hide</code> is also available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
 {% highlight html %}
 <div class="show">...</div>
-<div class="hide">...</div>
+<div class="hidden">...</div>
 {% endhighlight %}
 {% highlight css %}
 // Classes
 .show {
   display: block !important;
 }
-.hide {
+.hidden {
   display: none !important;
+  visibility: hidden !important;
 }
 
 // Usage as mixins
@@ -2351,23 +2353,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   .show();
 }
 .another-element {
-  .hide();
+  .hidden();
 }
 {% endhighlight %}
 
 
     <h3 id="helper-classes-screen-readers">Screen reader content</h3>
-    <p>Hide an element everywhere, <strong>including screen readers</strong>, with <code>.hidden</code>. Can also be used as a mixin.</p>
-{% highlight html %}
-<div class="hidden"></div>
-{% endhighlight %}
-{% highlight css %}
-// Usage as a Mixin
-.example {
-  .hidden();
-}
-{% endhighlight %}
-
     <p>Hide an element to all devices <strong>except screen readers</strong> 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 %}
 <a class="sr-only" href="#content">Skip to content</a>

less/utilities.less

@@ -23,6 +23,7 @@
 // Toggling content
 // -------------------------
 
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
 .hide {
   display: none !important;
 }