Merge branch 'v4-dev' into fix-travis-v4

2 files changed, 20 insertions, 70 deletions

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index cd848cf98..da23bb806 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -48,7 +48,7 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start
 </div>
 {% endexample %}
 
-The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](). Those columns are centered in the page with the parent `.container`.
+The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](#predefined-classes). Those columns are centered in the page with the parent `.container`.
 
 ## Grid options
 
@@ -61,23 +61,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
         <th></th>
         <th>
           Extra small
-          <small>&lt;34em</small>
+          <small>&lt;34em / 480px</small>
         </th>
         <th>
           Small
-          <small>&ge;34em</small>
+          <small>&ge;34em / 480px</small>
         </th>
         <th>
           Medium
-          <small>&ge;48em</small>
+          <small>&ge;45em / 720px</small>
         </th>
         <th>
           Large
-          <small>&ge;62em</small>
+          <small>&ge;62em / 992px</small>
         </th>
         <th>
           Extra large
-          <small>&ge;75em</small>
+          <small>&ge;75em / 1200px</small>
         </th>
       </tr>
     </thead>
@@ -90,10 +90,10 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       <tr>
         <th class="text-nowrap" scope="row">Container width</th>
         <td>None (auto)</td>
-        <td>34rem</td>
-        <td>45rem</td>
-        <td>60rem</td>
-        <td>72.25rem</td>
+        <td>34rem / 480px</td>
+        <td>45rem / 720px</td>
+        <td>60rem / 960px</td>
+        <td>72.25rem / 1156px</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
@@ -129,7 +129,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
 
 ## Sass mixins
 
-When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [prebuilt grid classes](#grid-example-basic) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
+When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 
 ### Variables
 
@@ -140,13 +140,13 @@ $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 34em,
+  sm: 34em,    // 480px
   // Medium screen / tablet
-  md: 48em,
+  md: 48em,    // 768px
   // Large screen / desktop
-  lg: 62em,
+  lg: 62em,    // 992px
   // Extra large screen / wide desktop
-  xl: 75em
+  xl: 75em     // 1200px
 ) !default;
 
 $grid-columns:      12;
@@ -195,7 +195,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
 
-See it in action in <a href="http://jsbin.com/qiqet/3/edit">this rendered example</a>.
+See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>.
 
 {% highlight scss %}
 .container {
@@ -317,7 +317,7 @@ Build on the previous example by creating even more dynamic and powerful layouts
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <!-- Optional: clear the XS cols if their content doesn't match in height -->
-  <div class="clearfix visible-xs-block"></div>
+  <div class="clearfix hidden-sm-up"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
 {% endexample %}
@@ -339,7 +339,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
 
 ### Example: Responsive column resets
 
-With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes](#responsive-utilities).
+With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
 
 <div class="bd-example-row">
 {% example html %}
@@ -348,7 +348,7 @@ With the four tiers of grids available you're bound to run into issues where, at
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
   <!-- Add the extra clearfix for only the required viewport -->
-  <div class="clearfix visible-xs-block"></div>
+  <div class="clearfix hidden-sm-up"></div>
 
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
@@ -356,7 +356,7 @@ With the four tiers of grids available you're bound to run into issues where, at
 {% endexample %}
 </div>
 
-In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example](../examples/grid/).
+In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/examples/grid/).
 
 <div class="bd-example-row">
 {% example html %}
diff --git a/docs/layout/scaffolding.md b/docs/layout/scaffolding.md
deleted file mode 100644
index ea5537ef4..000000000
--- a/docs/layout/scaffolding.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: docs
-title: Scaffolding
-group: layout
----
-
-The scaffolding of Bootstrap refers to our general approach to building the project. It outlines the basic document requirements and project dependencies.
-
-Bootstrap's general approach to writing HTML, CSS, and JavaScript, as well as our core settings, is referred to as scaffolding. This includes required responsive and cross browser enhancements, dependencies, and more.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## HTML5 doctype
-
-Bootstrap makes use of certain HTML elements and CSS properties that **require** the use of the HTML5 doctype. Include it at the beginning of all your projects.
-
-{% highlight html %}
-<!DOCTYPE html>
-<html lang="en">
-  ...
-</html>
-{% endhighlight %}
-
-## Mobile first
-
-Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
-
-To ensure proper rendering and touch zooming, **add the viewport meta tag** to your `<head>`.
-
-{% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1">
-{% endhighlight %}
-
-## Normalize
-
-For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices.
-
-## Important CSS resets
-
-Still need to do this section. Should port the third party section about box sizing and edit it for here, then add the rest of the list items.
-
-Will also require rearranging the scaffolding.less file.
-
-- Box sizing
-- Form elements and their fonts
-- Global link colors
-- Responsive images