Merge pull request #9963 from twbs/min-breakpoint-naming

rename @screen-XX to @screen-XX-min for clarity+unambiguity

5 files changed, 52 insertions, 48 deletions

diff --git a/less/mixins.less b/less/mixins.less
index c5a700156..416c6a222 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -575,7 +575,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -583,17 +583,17 @@
 
 // Generate the small column offsets
 .make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -608,7 +608,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -616,7 +616,7 @@
 
 // Generate the large column offsets
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
@@ -626,7 +626,7 @@
   }
 }
 .make-md-column-pull(@columns) {
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -641,7 +641,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -649,17 +649,17 @@
 
 // Generate the large column offsets
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
diff --git a/less/navs.less b/less/navs.less
index 6002a8cdd..868aeb817 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -162,7 +162,7 @@
     }
   }
 
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     > li {
       display: table-cell;
       width: 1%;
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 4976e2fcd..02bb39bfb 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -41,17 +41,17 @@
     .responsive-visibility();
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -63,16 +63,16 @@
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -85,15 +85,15 @@
     }
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -106,16 +106,16 @@
     }
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     .responsive-visibility();
   }
 }
@@ -126,17 +126,17 @@
     .responsive-invisibility();
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -148,16 +148,16 @@
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -170,15 +170,15 @@
     }
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -191,16 +191,16 @@
     }
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     .responsive-invisibility();
   }
 }
diff --git a/less/tables.less b/less/tables.less
index 7543b165a..5b6ea44d9 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -180,7 +180,7 @@ table {
 // by enabling horizontal scrolling. Only applies <768px. Everything above that
 // will display normally.
 
-@media (max-width: @screen-sm) {
+@media (max-width: @screen-sm-min) {
   .table-responsive {
     width: 100%;
     margin-bottom: 15px;
diff --git a/less/variables.less b/less/variables.less
index c069ee1ad..93b3bb152 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -207,25 +207,29 @@
 // --------------------------------------------------
 
 // Extra small screen / phone
-@screen-xs:                  480px;
-@screen-phone:               @screen-xs;
+@screen-xs:                  480px;// NOTE: Deprecated in favor of @screen-xs-min
+@screen-xs-min:              @screen-xs;
+@screen-phone:               @screen-xs-min;
 
 // Small screen / tablet
-@screen-sm:                  768px;
-@screen-tablet:              @screen-sm;
+@screen-sm:                  768px;// NOTE: Deprecated in favor of @screen-sm-min
+@screen-sm-min:              @screen-sm;
+@screen-tablet:              @screen-sm-min;
 
 // Medium screen / desktop
-@screen-md:                  992px;
-@screen-desktop:             @screen-md;
+@screen-md:                  992px;// NOTE: Deprecated in favor of @screen-md-min
+@screen-md-min:              @screen-md;
+@screen-desktop:             @screen-md-min;
 
 // Large screen / wide desktop
-@screen-lg:                  1200px;
-@screen-lg-desktop:          @screen-lg;
+@screen-lg:                  1200px;// NOTE: Deprecated in favor of @screen-lg-min
+@screen-lg-min:              @screen-lg;
+@screen-lg-desktop:          @screen-lg-min;
 
 // So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm - 1);
-@screen-sm-max:              (@screen-md - 1);
-@screen-md-max:              (@screen-lg - 1);
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
 
 
 // Grid system