Deprecate .hide-text mixin for .text-hide as mixin and class

diff --git a/css.html b/css.html
index 36bf1bf5229c8082126a1457590605a1ede6221a..0d3fc11efd748efe06a610c8c0095f5c7b8cd4d6 100644 (file)
--- a/css.html
+++ b/css.html
@@ -2294,14 +2294,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <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>
+    <p>Utilize the <code>.text-hide</code> class or mixin 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();
+  .text-hide();
 }
 {% endhighlight %}
   </div>

diff --git a/less/mixins.less b/less/mixins.less
index c18e7c49b48a9ef22282d6d05366c8dbd8757045..d4c8e01156ee91e8f406b0f9a8383be0ef82cc9b 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -69,8 +69,15 @@
 }
 
 // CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-.hide-text() {
+
+.hide-text(),
+.text-hide() {
   font: ~"0/0" a;
   color: transparent;
   text-shadow: none;

diff --git a/less/utilities.less b/less/utilities.less
index 3d310e6515f577e1b9e0b4026a1cf04a57903606..a2807cc79476ab4835ccfbcb205a7babd3975c36 100644 (file)
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -30,7 +30,7 @@
   visibility: hidden;
 }
 .text-hide {
-  .hide-text();
+  .text-hide();
 }