More consistent naming with screen size variables using xs, sm, md, and lg

diff --git a/customize.html b/customize.html
index 26df1c7485dbbfff7f742e0fa53698f45a8382c0..f410acefe0cd943e460c2258493e3193927e2429 100644 (file)
--- 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 e3684e5ae9d2956332ff73aa0fa6d1927553e679..c77f455f3c864a64b646b7efb1b8137a17fc7598 100644 (file)
--- 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 de21668b764a9b06caed29b2619ee68488b3f703..c4d1de5ff8f03e8dae4e1f375f3720727061e44e 100644 (file)
--- 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 b5320ba4e3a35fab69421612a3b068c4ae5ce795..110e8a35cac04294c3b40fe7ffc7356b2459ba83 100644 (file)
--- 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 abee86dcc0030ad9c86d26e0ee59466ccf34759e..6002a8cdd12f286a60b329777fbfa02da2ea3ce0 100644 (file)
--- 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 529152032cfe9993b41b8222ebe212463f1df711..062d6820ce2a8aeb5b97ade1a9cb3b95caf3811c 100644 (file)
--- 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 c3eeaaebc732ea75a8a79011f0c9a5a316952ca0..a46ad4fb695f7025ae4dce329ee9e7fd9db1cbd9 100644 (file)
--- 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));