Redo the responsive utilities stuff

* Update docs language
* Enforce display: block; on all utilities for now
* Fix up docs CSS for the tests

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 249088b995f2b48dd9456082a763152ed0758703..638b5485e96b3ff71416a68e77741c293e944463 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -41,7 +41,7 @@
       </div>
 
       <!-- Quick back to top -->
-      <a href="#welcome" class="bs-top">
+      <a href="#" class="bs-top">
         Back to top
       </a>
 

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 326ae499060134d482ef11bfe62657dcf9008c57..9737e77713985ac2f0e940a5ee2e61531e12656a 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5094,7 +5094,7 @@ a.list-group-item.active > .badge,
 }
 
 .visible-sm {
-  display: inherit !important;
+  display: block !important;
 }
 
 .visible-md {
@@ -5110,11 +5110,11 @@ a.list-group-item.active > .badge,
 }
 
 .hidden-md {
-  display: inherit !important;
+  display: block !important;
 }
 
 .hidden-lg {
-  display: inherit !important;
+  display: block !important;
 }
 
 @media (min-width: 768px) and (max-width: 991px) {
@@ -5122,19 +5122,19 @@ a.list-group-item.active > .badge,
     display: none !important;
   }
   .visible-md {
-    display: inherit !important;
+    display: block !important;
   }
   .visible-lg {
     display: none !important;
   }
   .hidden-sm {
-    display: inherit !important;
+    display: block !important;
   }
   .hidden-md {
     display: none !important;
   }
   .hidden-lg {
-    display: inherit !important;
+    display: block !important;
   }
 }
 
@@ -5146,13 +5146,13 @@ a.list-group-item.active > .badge,
     display: none !important;
   }
   .visible-lg {
-    display: inherit !important;
+    display: block !important;
   }
   .hidden-sm {
-    display: inherit !important;
+    display: block !important;
   }
   .hidden-md {
-    display: inherit !important;
+    display: block !important;
   }
   .hidden-lg {
     display: none !important;
@@ -5165,7 +5165,7 @@ a.list-group-item.active > .badge,
 
 @media print {
   .visible-print {
-    display: inherit !important;
+    display: block !important;
   }
   .hidden-print {
     display: none !important;

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3cc4d97eccfd594490cfffef92485249bbcbb9c0..fd40cdafb916d44b231c347e90f6b8c5c8f99dc7 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -510,16 +510,14 @@ body {
   position: relative;
   float: left;
   width: 25%;
-  height: 43px;
+  padding: 15px 10px;
   font-size: 14px;
   font-weight: bold;
-  line-height: 43px;
+  line-height: 1.1;
   color: #999;
   text-align: center;
   border: 1px solid #ddd;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  border-radius: 4px;
 }
 .responsive-utilities-test li + li {
   margin-left: 10px;
@@ -530,9 +528,8 @@ body {
   left:   -1px;
   right:  -1px;
   bottom: -1px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  padding: 15px 10px;
+  border-radius: 4px;
 }
 .responsive-utilities-test span {
   color: #468847;
@@ -646,6 +643,10 @@ input.focused {
   margin-bottom: 5px;
 }
 
+/* Hide the top link initially */
+.bs-top {
+  display: none;
+}
 
 
 /* Responsive variations
@@ -673,6 +674,7 @@ input.focused {
 
   /* Back to top link */
   .bs-top {
+    display: block; /* Unhide */
     float: left;
     padding: 7px 15px;
     font-weight: 500;

diff --git a/docs/css.html b/docs/css.html
index 90f6f490fe552519349d3ba2daee5dedf1df0118..69bb0dd7cbeabf0b9f4059435fd8d29778b7e2cd 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1927,9 +1927,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <thead>
           <tr>
             <th>Class</th>
-            <th>Phones <small>767px and below</small></th>
-            <th>Tablets <small>979px to 768px</small></th>
-            <th>Desktops <small>Default</small></th>
+            <th>Small devices <small>Up to 768px</small></th>
+            <th>Medium devices <small>768px to 979px</small></th>
+            <th>Large devices <small>980px and up</small></th>
           </tr>
         </thead>
         <tbody>
@@ -1997,23 +1997,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </table>
 
     <h3>When to use</h3>
-    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
+    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
 
     <h3>Test case</h3>
-    <p>Resize your browser or load on different devices to test the above classes.</p>
+    <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
     <h4>Visible on...</h4>
-    <p>Green checkmarks indicate that class is visible in your current viewport.</p>
+    <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
     <ul class="responsive-utilities-test">
-      <li>Phone<span class="visible-sm">&#10004; Phone</span></li>
-      <li>Tablet<span class="visible-md">&#10004; Tablet</span></li>
-      <li>Desktop<span class="visible-lg">&#10004; Desktop</span></li>
+      <li>Small<span class="visible-sm">&#10004; Visible on small</span></li>
+      <li>Medium<span class="visible-md">&#10004; Visible on medium</span></li>
+      <li>Large<span class="visible-lg">&#10004; Visible on large</span></li>
     </ul>
     <h4>Hidden on...</h4>
-    <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
+    <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
     <ul class="responsive-utilities-test hidden-on">
-      <li>Phone<span class="hidden-sm">&#10004; Phone</span></li>
-      <li>Tablet<span class="hidden-md">&#10004; Tablet</span></li>
-      <li>Desktop<span class="hidden-lg">&#10004; Desktop</span></li>
+      <li>Small<span class="hidden-sm">&#10004; Hidden on small</span></li>
+      <li>Medium<span class="hidden-md">&#10004; Hidden on medium</span></li>
+      <li>Large<span class="hidden-lg">&#10004; Hidden on desktop</span></li>
     </ul>
 
   </div>

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 09a0955f89616d748594927d59bfb1ac3cf496da..f319298f00e2d8e103a587bd4d3b658e1cf1a9b9 100644 (file)
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -36,34 +36,34 @@
 // Visibility utilities
 
 // For Phones
-.visible-sm   { display: inherit !important; }
+.visible-sm   { display: block !important; }
 .visible-md   { display: none !important; }
 .visible-lg   { display: none !important; }
 
 .hidden-sm    { display: none !important; }
-.hidden-md    { display: inherit !important; }
-.hidden-lg    { display: inherit !important; }
+.hidden-md    { display: block !important; }
+.hidden-lg    { display: block !important; }
 
 
 // Tablets & small desktops only
 @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
   .visible-sm   { display: none !important; }
-  .visible-md   { display: inherit !important; }
+  .visible-md   { display: block !important; }
   .visible-lg   { display: none !important; }
 
-  .hidden-sm    { display: inherit !important; }
+  .hidden-sm    { display: block !important; }
   .hidden-md    { display: none !important; }
-  .hidden-lg    { display: inherit !important; }
+  .hidden-lg    { display: block !important; }
 }
 
 // For desktops
 @media (min-width: @screen-desktop) {
   .visible-sm   { display: none !important; }
   .visible-md   { display: none !important; }
-  .visible-lg   { display: inherit !important; }
+  .visible-lg   { display: block !important; }
 
-  .hidden-sm    { display: inherit !important; }
-  .hidden-md    { display: inherit !important; }
+  .hidden-sm    { display: block !important; }
+  .hidden-md    { display: block !important; }
   .hidden-lg    { display: none !important; }
 }
 
@@ -72,6 +72,6 @@
 .hidden-print   { }
 
 @media print {
-  .visible-print  { display: inherit !important; }
+  .visible-print  { display: block !important; }
   .hidden-print   { display: none !important; }
 }