Overhaul the responsive utility classes:

1. Rename file from responsive-utility-classes.less to responsive-utilities.less
2. Add additional help text around the documentation for the classes in Scaffolding
3. Remove unnecessary display values on initial classes
4. Drop block values for inherit for better support on inline and table elements
5. Make use of \!important on every class to avoid classes with more specific selectors (e.g., .span* classes for the grid)

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index eed5be2e0365c20c936ec1336e7e6c9804b4e1a7..604ba03d39534ddc0a24c7a32baa27a6c6fa2396 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 78ce60d7fc6840ca5b9baad3e3bb4d886ce0e2a2..1ad16d6fd92cc9a8ecb0389d0c19c2deb7be5521 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -43,49 +43,40 @@
   visibility: hidden;
 }
 .visible-phone {
-  display: none;
+  display: none !important;
 }
 .visible-tablet {
-  display: none;
-}
-.visible-desktop {
-  display: block;
-}
-.hidden-phone {
-  display: block;
-}
-.hidden-tablet {
-  display: block;
+  display: none !important;
 }
 .hidden-desktop {
-  display: none;
+  display: none !important;
 }
 @media (max-width: 767px) {
   .visible-phone {
-    display: block;
+    display: inherit !important;
   }
   .hidden-phone {
-    display: none;
+    display: none !important;
   }
   .hidden-desktop {
-    display: block;
+    display: inherit !important;
   }
   .visible-desktop {
-    display: none;
+    display: none !important;
   }
 }
 @media (min-width: 768px) and (max-width: 979px) {
   .visible-tablet {
-    display: block;
+    display: inherit !important;
   }
   .hidden-tablet {
-    display: none;
+    display: none !important;
   }
   .hidden-desktop {
-    display: block;
+    display: inherit !important;
   }
   .visible-desktop {
-    display: none;
+    display: none !important ;
   }
 }
 @media (max-width: 480px) {

diff --git a/docs/download.html b/docs/download.html
index 44299b927fd2d7eab1ec04498d3eaa87a3179b05..e4097ea4e5f0b6e125b24092c61d0d3f84d1407e 100644 (file)
--- a/docs/download.html
+++ b/docs/download.html
@@ -143,7 +143,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
       <h3>Responsive</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> Visible/hidden classes</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>

diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index dd26412379b911c5806658dfac67e2b5bdf52bff..017fd493eaa87ba67a5a16d91f18f582dc12c3ac 100644 (file)
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -609,12 +609,14 @@
       <h3>Test case</h3>
       <p>Resize your browser or load on different devices to test the above classes.</p>
       <h4>Visible on...</h4>
+      <p>Green checkmarks indicate that class is visible in your current viewport.</p>
       <ul class="responsive-utilities-test">
         <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
         <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
         <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
       </ul>
       <h4>Hidden on...</h4>
+      <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
       <ul class="responsive-utilities-test hidden-on">
         <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
         <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 05129114859b365e8f33715d57e679f0580b8737..0e73c44a44497d4e45b4972fced47c6e65253041 100644 (file)
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -66,7 +66,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index b64c63af3c988f8ba765bae74f0188710a5b3221..6d99965b37bfb5f46dc52929b3be064e916414d1 100644 (file)
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -532,16 +532,18 @@
       <h3>{{_i}}Test case{{/i}}</h3>
       <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
       <h4>{{_i}}Visible on...{{/i}}</h4>
+      <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test">
-        <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
       <h4>{{_i}}Hidden on...{{/i}}</h4>
+      <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test hidden-on">
-        <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
     </div><!-- /.span -->
   </div><!-- /.row -->

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
new file mode 100644 (file)
index 0000000..572846c
--- /dev/null
+++ b/less/responsive-utilities.less
@@ -0,0 +1,41 @@
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.visible-desktop   { } // Don't set initially
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+
+// Phones only
+@media (max-width: 767px) {
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+}
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+}

diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less
deleted file mode 100644 (file)
index 78a06e8..0000000
--- a/less/responsive-utility-classes.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// RESPONSIVE CLASSES
-// ------------------
-
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-// Visibility utilities
-
-// For desktops
-.visible-phone     { display: none; }
-.visible-tablet    { display: none; }
-.visible-desktop   { display: block; }
-.hidden-phone      { display: block; }
-.hidden-tablet     { display: block; }
-.hidden-desktop    { display: none; }
-
-// Phones only
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: block; }
-  // Hide
-  .hidden-phone      { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: block; }
-  // Hide
-  .hidden-tablet     { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}

diff --git a/less/responsive.less b/less/responsive.less
index d35948ddc0a7de3d3e4ebd4d6d5f785c9a11aa47..5434f3a08fd226270d900ec83968f7ac9ab95fae 100644 (file)
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -24,7 +24,7 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-@import "responsive-utility-classes.less";
+@import "responsive-utilities.less";
 
 
 // MEDIA QUERIES