From 61caed21e2553e1be29d98bd83c8e6ac06565ecd Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 17 Aug 2013 15:21:38 -0700
Subject: [PATCH] More consistent naming with screen size variables using xs,
 sm, md, and lg

---
 customize.html                 | 36 ++++++++++++++-----------
 less/grid.less                 |  4 +--
 less/mixins.less               | 24 ++++++++---------
 less/navbar.less               |  6 ++---
 less/navs.less                 |  2 +-
 less/responsive-utilities.less | 48 +++++++++++++++++-----------------
 less/variables.less            | 29 ++++++++++----------
 7 files changed, 77 insertions(+), 72 deletions(-)

diff --git a/customize.html b/customize.html
index 26df1c7485..f410acefe0 100644
--- a/customize.html
+++ b/customize.html
@@ -480,16 +480,16 @@ base_url: "../"
     <h3>Media queries breakpoints</h3>
     <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
     <div class="row">
-      <div class="col-lg-6">
-        <label>@screen-xsmall</label>
+      <div class="col-xs-6">
+        <label>@screen-xs</label>
         <input type="text" class="form-control" placeholder="480px">
-        <label>@screen-small</label>
+        <label>@screen-sm</label>
         <input type="text" class="form-control" placeholder="768px">
       </div>
-      <div class="col-lg-6">
-        <label>@screen-medium</label>
+      <div class="col-xs-6">
+        <label>@screen-md</label>
         <input type="text" class="form-control" placeholder="992px">
-        <label>@screen-large</label>
+        <label>@screen-lg</label>
         <input type="text" class="form-control" placeholder="1200px">
       </div>
     </div>
@@ -497,35 +497,41 @@ base_url: "../"
     <h3>Container sizes</h3>
     <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
     <div class="row">
-      <div class="col-lg-6">
+      <div class="col-xs-6 col-sm-4">
         <label>@container-tablet</label>
         <input type="text" class="form-control" placeholder="728px">
-        <p class="help-block">For <code>@screen-small</code> and up.</p>
+        <p class="help-block">For <code>@screen-sm</code> and up.</p>
+      </div>
+      <div class="col-xs-6 col-sm-4">
         <label>@container-desktop</label>
         <input type="text" class="form-control" placeholder="940px">
-        <p class="help-block">For <code>@screen-medium</code> and up.</p>
+        <p class="help-block">For <code>@screen-md</code> and up.</p>
       </div>
-      <div class="col-lg-6">
-        <label>@container-large-desktop</label>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-4">
+        <label>@container-lg-desktop</label>
         <input type="text" class="form-control" placeholder="1170px">
-        <p class="help-block">For <code>@screen-large</code> and up.</p>
+        <p class="help-block">For <code>@screen-lg</code> and up.</p>
       </div>
     </div>
 
     <h3>Grid system</h3>
     <p>Define your custom responsive grid.</p>
     <div class="row">
-      <div class="col-lg-6">
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-columns</label>
         <input type="text" class="form-control" placeholder="12">
         <p class="help-block">Number of columns in the grid.</p>
+      </div>
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-gutter-width</label>
         <input type="text" class="form-control" placeholder="30px">
         <p class="help-block">Padding between columns.</p>
       </div>
-      <div class="col-lg-6">
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-float-breakpoint</label>
-        <input type="text" class="form-control" placeholder="@screen-tablet">
+        <input type="text" class="form-control" placeholder="@screen-sm">
         <p class="help-block">Point at which the navbar stops collapsing.</p>
       </div>
     </div>
diff --git a/less/grid.less b/less/grid.less
index e3684e5ae9..c77f455f3c 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -272,9 +272,9 @@
 // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
 // it's full-width.
 
-@media (min-width: @screen-large-desktop) {
+@media (min-width: @screen-lg-desktop) {
   .container {
-    max-width: @container-large-desktop;
+    max-width: @container-lg-desktop;
   }
 
   .col-lg-1,
diff --git a/less/mixins.less b/less/mixins.less
index de21668b76..c4d1de5ff8 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -558,7 +558,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -566,17 +566,17 @@
 
 // Generate the small column offsets
 .make-sm-column-offset(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -591,7 +591,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -599,17 +599,17 @@
 
 // Generate the large column offsets
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-push(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-pull(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -624,7 +624,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -632,17 +632,17 @@
 
 // Generate the large column offsets
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     right: percentage((@columns / @grid-columns));
   }
 }
diff --git a/less/navbar.less b/less/navbar.less
index b5320ba4e3..110e8a35ca 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -216,7 +216,7 @@
     }
   }
 
-  @media (max-width: @screen-phone-max) {
+  @media (max-width: @screen-xs-max) {
     // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
       position: static;
@@ -311,7 +311,7 @@
   .form-inline();
 
   .form-group {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       margin-bottom: 5px;
     }
   }
@@ -512,7 +512,7 @@
       }
     }
 
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
diff --git a/less/navs.less b/less/navs.less
index abee86dcc0..6002a8cdd1 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -162,7 +162,7 @@
     }
   }
 
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     > li {
       display: table-cell;
       width: 1%;
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 529152032c..062d6820ce 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -37,98 +37,98 @@
 
 .visible-xs {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-sm {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-md {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-lg {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-sm {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-md {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-lg {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
diff --git a/less/variables.less b/less/variables.less
index c3eeaaebc7..a46ad4fb69 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -193,26 +193,25 @@
 // --------------------------------------------------
 
 // Extra small screen / phone
-@screen-xsmall:              480px;
-@screen-phone:               @screen-xsmall;
+@screen-xs:                  480px;
+@screen-phone:               @screen-xs;
 
 // Small screen / tablet
-@screen-small:               768px;
-@screen-tablet:              @screen-small;
+@screen-sm:                  768px;
+@screen-tablet:              @screen-sm;
 
 // Medium screen / desktop
-@screen-medium:              992px;
-@screen-desktop:             @screen-medium;
+@screen-md:                  992px;
+@screen-desktop:             @screen-md;
 
 // Large screen / wide desktop
-@screen-large:               1200px;
-@screen-large-desktop:       @screen-large;
+@screen-lg:                  1200px;
+@screen-lg-desktop:          @screen-lg;
 
 // So media queries don't overlap when required, provide a maximum
-@screen-phone-max:           (@screen-small - 1);
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          (@screen-desktop - 1);
-@screen-desktop-max:         (@screen-large-desktop - 1);
+@screen-xs-max:              (@screen-sm - 1);
+@screen-sm-max:              (@screen-md - 1);
+@screen-md-max:              (@screen-lg - 1);
 
 
 // Grid system
@@ -600,10 +599,10 @@
 // --------------------------------------------------
 
 // Small screen / tablet
-@container-tablet:          ((720px + @grid-gutter-width));
+@container-tablet:            ((720px + @grid-gutter-width));
 
 // Medium screen / desktop
-@container-desktop:         ((940px + @grid-gutter-width));
+@container-desktop:           ((940px + @grid-gutter-width));
 
 // Large screen / wide desktop
-@container-large-desktop:   ((1140px + @grid-gutter-width));
+@container-lg-desktop:        ((1140px + @grid-gutter-width));