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

Deprecate container-{device} vars for container-{size} classes; updates customizer and grid to do the same

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>

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,

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;