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

rename @screen-XX to @screen-XX-min for clarity+unambiguity
stempler · Aug 24, 2013 · 70cc763 · 70cc763
2 parents 80c1341 + e89fe01
commit 70cc763
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 48 deletions.
diff --git a/mixins.less b/mixins.less
@@ -575,25 +575,25 @@
   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));
   }
 }
 
 // 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,15 +608,15 @@
   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));
   }
 }
 
 // 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,25 +641,25 @@
   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));
   }
 }
 
 // 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/navs.less b/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/responsive-utilities.less b/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/tables.less b/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/variables.less b/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