follow up to #9963 and #10005: update docs to use .screen-*-min vars, update...

follow up to #9963 and #10005: update docs to use .screen-*-min vars, update customizer as well; run grunt to adjust raw files

css.html

@@ -80,20 +80,20 @@ base_url: "../"
 /* No media query since this is the default in Bootstrap */
 
 /* Small devices (tablets, 768px and up) */
-@media (min-width: @screen-sm) { ... }
+@media (min-width: @screen-sm-min) { ... }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: @screen-md) { ... }
+@media (min-width: @screen-md-min) { ... }
 
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: @screen-lg) { ... }
+@media (min-width: @screen-lg-min) { ... }
 {% endhighlight %}
     <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
 {% highlight css %}
-@media (max-width: @screen-phone-max) { ... }
-@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
-@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
-@media (min-width: @screen-lg) { ... }
+@media (max-width: @screen-xs-max) { ... }
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
+@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
+@media (min-width: @screen-lg-min) { ... }
 {% endhighlight %}
 
     <h3 id="grid-options">Grid options</h3>

customize.html

@@ -471,16 +471,16 @@ base_url: "../"
     <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
     <div class="row">
       <div class="col-xs-6">
-        <label>@screen-xs</label>
-        <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs">
-        <label>@screen-sm</label>
-        <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm">
+        <label>@screen-xs-min</label>
+        <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
+        <label>@screen-sm-min</label>
+        <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
       </div>
       <div class="col-xs-6">
-        <label>@screen-md</label>
-        <input type="text" class="form-control" placeholder="992px" data-var="@screen-md">
-        <label>@screen-lg</label>
-        <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg">
+        <label>@screen-md-min</label>
+        <input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
+        <label>@screen-lg-min</label>
+        <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
       </div>
     </div>
 
@@ -490,18 +490,18 @@ base_url: "../"
       <div class="col-xs-6 col-sm-4">
         <label>@container-tablet</label>
         <input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
-        <p class="help-block">For <code>@screen-sm</code> and up.</p>
+        <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">
-        <p class="help-block">For <code>@screen-md</code> and up.</p>
+        <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">
-        <p class="help-block">For <code>@screen-lg</code> and up.</p>
+        <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
       </div>
     </div>
 
@@ -524,7 +524,7 @@ base_url: "../"
       <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-sm" data-var="@grid-float-breakpoint">
+        <input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
         <p class="help-block">Point at which the navbar stops collapsing.</p>
       </div>
     </div>