From: Mark Otto <markotto@twitter.com>
Date: Sun, 25 Mar 2012 08:12:51 +0000 (-0700)
Subject: Overhaul the responsive utility classes:
X-Git-Tag: v2.0.3~5^2~97
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a7b8e52f8e08cc821d7324153885c085fad25c1a;p=thirdparty%2Fbootstrap.git

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 eed5be2e03..604ba03d39 100644
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 78ce60d7fc..1ad16d6fd9 100644
--- 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 44299b927f..e4097ea4e5 100644
--- 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 dd26412379..017fd493ea 100644
--- 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 0512911485..0e73c44a44 100644
--- 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 b64c63af3c..6d99965b37 100644
--- 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
index 0000000000..572846c0fa
--- /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
index 78a06e8f94..0000000000
--- 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 d35948ddc0..5434f3a08f 100644
--- 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