Responsive display utilities (#20934)

* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name * make floats use the same format, add float-none mixin
twbs · Nov 1, 2016 · ffaad0a · ffaad0a
1 parent 76d5340
commit ffaad0a
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 50 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-tabs card-header-tabs float-xs-left">
+    <ul class="nav nav-tabs card-header-tabs float-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
@@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-pills card-header-pills float-xs-left">
+    <ul class="nav nav-pills card-header-pills float-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
@@ -32,15 +32,15 @@ Add badges to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">14</span>
+    <span class="badge badge-default badge-pill float-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">2</span>
+    <span class="badge badge-default badge-pill float-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-xs-right">1</span>
+    <span class="badge badge-default badge-pill float-right">1</span>
     Morbi leo risus
   </li>
 </ul>

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
@@ -55,7 +55,7 @@ Here's an example of all the sub-components included in a default, non-responsiv
       </div>
     </li>
   </ul>
-  <form class="form-inline float-xs-right">
+  <form class="form-inline float-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-outline-success" type="submit">Search</button>
   </form>
@@ -171,7 +171,7 @@ Place various form controls and components within a navbar with `.form-inline`.
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-outline-success" type="submit">Search</button>
   </form>
@@ -182,7 +182,7 @@ Input groups work, too:
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
@@ -195,7 +195,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <form class="form-inline float-xs-left">
+  <form class="form-inline float-left">
     <button class="btn btn-outline-success" type="button">Main button</button>
     <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
   </form>
@@ -218,7 +218,7 @@ Using our utility classes, you can change the alignment and appearance of your n
 
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
-  <span class="navbar-text float-xs-right text-muted">
+  <span class="navbar-text float-right text-muted">
     Muted navbar text that's floated right
   </span>
 </nav>
@@ -229,7 +229,7 @@ Similarly, you can use utility classes to align navbar text to other navbar elem
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
   <a class="navbar-brand" href="#">Navbar</a>
-  <span class="navbar-text float-xs-left">
+  <span class="navbar-text float-left">
     Navbar text that's floated left
   </span>
 </nav>
@@ -258,7 +258,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline float-xs-right">
+    <form class="form-inline float-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-info" type="submit">Search</button>
     </form>
@@ -279,7 +279,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline float-xs-right">
+    <form class="form-inline float-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-secondary" type="submit">Search</button>
     </form>
@@ -300,7 +300,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline float-xs-right">
+    <form class="form-inline float-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-primary" type="submit">Search</button>
     </form>

diff --git a/docs/content/images.md b/docs/content/images.md
@@ -47,13 +47,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border
 Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="rounded float-xs-left" alt="...">
-<img src="..." class="rounded float-xs-right" alt="...">
+<img src="..." class="rounded float-left" alt="...">
+<img src="..." class="rounded float-right" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">

diff --git a/docs/migration.md b/docs/migration.md
@@ -185,7 +185,8 @@ Dropped entirely for the new card component.
 
 ### Utilities
 
-- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`.
+- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`).
+- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`.
 - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
 - Dropped `.center-block` for the new `.mx-auto` class.
 

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
@@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
 
 {% example html %}
 <div class="bg-info clearfix">
-  <button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
-  <button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
+  <button class="btn btn-secondary float-left">Example Button pulled left</button>
+  <button class="btn btn-secondary float-right">Example Button pullred right</button>
 </div>
 {% endexample %}
diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md
@@ -49,9 +49,9 @@ These utility classes float an element to the left or right, or disable floating
 Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
 
 {% example html %}
-<div class="float-xs-left">Float left on all viewport sizes</div><br>
-<div class="float-xs-right">Float right on all viewport sizes</div><br>
-<div class="float-xs-none">Don't float on all viewport sizes</div><br>
+<div class="float-left">Float left on all viewport sizes</div><br>
+<div class="float-right">Float right on all viewport sizes</div><br>
+<div class="float-none">Don't float on all viewport sizes</div><br>
 
 <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
 <div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>

diff --git a/js/dist/alert.js b/js/dist/alert.js
diff --git a/js/dist/alert.js.map b/js/dist/alert.js.map
diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss
@@ -4,3 +4,6 @@
 @mixin float-right {
   float: right !important;
 }
+@mixin float-none {
+  float: none !important;
+}
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
@@ -2,12 +2,29 @@
 // Display utilities
 //
 
-.d-block {
-  display: block !important;
-}
-.d-inline-block {
-  display: inline-block !important;
-}
-.d-inline {
-  display: inline !important;
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+    @if $min {
+      @media (min-width: $min) {
+        .d-#{$breakpoint}-none { display: none !important; }
+        .d-#{$breakpoint}-inline { display: inline !important; }
+        .d-#{$breakpoint}-inline-block { display: inline-block !important; }
+        .d-#{$breakpoint}-block { display: block !important; }
+        .d-#{$breakpoint}-table { display: table !important; }
+        .d-#{$breakpoint}-table-cell { display: table-cell !important; }
+        .d-#{$breakpoint}-flex { display: flex !important; }
+      }
+    } @else {
+      .d-none { display: none !important; }
+      .d-inline { display: inline !important; }
+      .d-inline-block { display: inline-block !important; }
+      .d-block { display: block !important; }
+      .d-table { display: table !important; }
+      .d-table-cell { display: table-cell !important; }
+      .d-flex { display: flex !important; }
+    }
+  }
 }
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
@@ -1,13 +1,19 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    .float-#{$breakpoint}-left {
-      @include float-left();
-    }
-    .float-#{$breakpoint}-right {
-      @include float-right();
-    }
-    .float-#{$breakpoint}-none {
-      float: none !important;
+    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+    @if $min {
+      // everything else
+      @media (min-width: $min) {
+        .float-#{$breakpoint}-left { @include float-left; }
+        .float-#{$breakpoint}-right { @include float-right; }
+        .float-#{$breakpoint}-none { @include float-none; }
+      }
+    } @else {
+      // xs
+      .float-left { @include float-left; }
+      .float-right { @include float-right; }
+      .float-none { @include float-none; }
     }
   }
 }