Deprecate container-{device} vars for container-{size} classes; updates customizer...

diff --git a/customize.html b/customize.html
index e0b269e7108581f64ce7d67b06f605b1f01ace7d..fd344298127efa2cc209b2aa7e5367ef8df81de6 100644 (file)
--- a/customize.html
+++ b/customize.html
@@ -488,19 +488,19 @@ base_url: "../"
     <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
     <div class="row">
       <div class="col-xs-6 col-sm-4">
-        <label>@container-tablet</label>
-        <input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
+        <label>@container-sm</label>
+        <input type="text" class="form-control" placeholder="728px" data-var="@container-sm">
         <p class="help-block">For <code>@screen-sm-min</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" data-var="@container-desktop">
+        <label>@container-md</label>
+        <input type="text" class="form-control" placeholder="940px" data-var="@container-md">
         <p class="help-block">For <code>@screen-md-min</code> and up.</p>
       </div>
       <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" data-var="@container-lg-desktop">
+        <label>@container-lg</label>
+        <input type="text" class="form-control" placeholder="1170px" data-var="@container-lg">
         <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
       </div>
     </div>

diff --git a/less/grid.less b/less/grid.less
index d3a3cf6bca53078e333f710a22b782f07eb547a0..ef6f1ebda9207c37e67113ade438b4a45403a2f9 100644 (file)
--- a/less/grid.less
+++ b/less/grid.less
@@ -116,7 +116,7 @@
 
 @media (min-width: @screen-sm) {
   .container {
-    max-width: @container-tablet;
+    max-width: @container-sm;
   }
 
   .col-sm-1,
@@ -194,7 +194,7 @@
 
 @media (min-width: @screen-md) {
   .container {
-    max-width: @container-desktop;
+    max-width: @container-md;
   }
   .col-md-1,
   .col-md-2,
@@ -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-lg-desktop) {
+@media (min-width: @screen-lg-min) {
   .container {
-    max-width: @container-lg-desktop;
+    max-width: @container-lg;
   }
 
   .col-lg-1,

diff --git a/less/variables.less b/less/variables.less
index 7dff919c39626e22a1ffb72832a1d14fc3b2acc7..8927d70fff0cf01a81b6b5f79ec1cbb85de1778d 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -626,10 +626,13 @@
 // --------------------------------------------------
 
 // Small screen / tablet
-@container-tablet:            ((720px + @grid-gutter-width));
+@container-sm:             ((720px + @grid-gutter-width));
+@container-tablet:         @container-sm;
 
 // Medium screen / desktop
-@container-desktop:           ((940px + @grid-gutter-width));
+@container-md:             ((940px + @grid-gutter-width));
+@container-desktop:        @container-md;
 
 // Large screen / wide desktop
-@container-lg-desktop:        ((1140px + @grid-gutter-width));
+@container-lg:             ((1140px + @grid-gutter-width));
+@container-large-desktop:  @container-lg;