Another grid update

* Update docs to include table of grid levels and behaviors
* Change from .col-md to .col-sm to match existing size variables we use elsewhere
* Keep .col-lg as-is though for simplicity as we won't likely add a fourth level of the grid
* Combine responsive .container breakpoints with grid breakpoints in grid.less
* Other misc docs updates

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8642bf95db4b36f8ffab1ece26a7b01acb890a50..4d65d053bdcd96f0a8a5b66ec58dba9d1fc9a9e4 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -787,6 +787,18 @@ pre code {
 .col-10,
 .col-11,
 .col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
 .col-lg-1,
 .col-lg-2,
 .col-lg-3,
@@ -856,40 +868,43 @@ pre code {
 }
 
 @media (min-width: 768px) {
-  .col-md-1 {
+  .container {
+    max-width: 728px;
+  }
+  .col-sm-1 {
     width: 8.333333333333332%;
   }
-  .col-md-2 {
+  .col-sm-2 {
     width: 16.666666666666664%;
   }
-  .col-md-3 {
+  .col-sm-3 {
     width: 25%;
   }
-  .col-md-4 {
+  .col-sm-4 {
     width: 33.33333333333333%;
   }
-  .col-md-5 {
+  .col-sm-5 {
     width: 41.66666666666667%;
   }
-  .col-md-6 {
+  .col-sm-6 {
     width: 50%;
   }
-  .col-md-7 {
+  .col-sm-7 {
     width: 58.333333333333336%;
   }
-  .col-md-8 {
+  .col-sm-8 {
     width: 66.66666666666666%;
   }
-  .col-md-9 {
+  .col-sm-9 {
     width: 75%;
   }
-  .col-md-10 {
+  .col-sm-10 {
     width: 83.33333333333334%;
   }
-  .col-md-11 {
+  .col-sm-11 {
     width: 91.66666666666666%;
   }
-  .col-md-12 {
+  .col-sm-12 {
     width: 100%;
   }
   .col-offset-1 {
@@ -994,6 +1009,9 @@ pre code {
 }
 
 @media (min-width: 992px) {
+  .container {
+    max-width: 940px;
+  }
   .col-lg-1 {
     width: 8.333333333333332%;
   }
@@ -1032,19 +1050,7 @@ pre code {
   }
 }
 
-@media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .container {
-    max-width: 940px;
-  }
-}
-
-@media screen and (min-width: 1200px) {
+@media (min-width: 1200px) {
   .container {
     max-width: 1170px;
   }

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6a608b4da80e5d2e1b9072f35356e752d9b7c5d9..811961d609c3e989192462c267632342c3eae1de 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -520,6 +520,7 @@ body {
 
 /* Utility classes table
 ------------------------- */
+.bs-table th small,
 .responsive-utilities th small {
   display: block;
   font-weight: normal;

diff --git a/docs/css.html b/docs/css.html
index 981626c607cc6fb6d8d2bacd64062c150239f1e7..dfab31523029985bfac93210cb359dc6da15b8de 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -63,9 +63,64 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     <div class="page-header">
       <h1>Grid system</h1>
     </div>
-    <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
+    <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
+
+    <h3 id="grid-options">Grid options</h3>
+    <p>Multiple device grids, columns, offsets, and column ordering.</p>
+    <table class="table table-bordered table-striped bs-table">
+      <thead>
+        <tr>
+          <th></th>
+          <th>
+            Tiny grid
+            <small>Phones (&lt;480px)</small>
+          </th>
+          <th>
+            Small grid
+            <small>Tablets (&lt;768px)</small>
+          </th>
+          <th>
+            Medium-large grid
+            <small>Destkops (&gt;768px)</small>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Grid behavior</th>
+          <td>Horizontal at all times</td>
+          <td colspan="2">Collapsed to start, horizontal above breakpoints</td>
+        </tr>
+        <tr>
+          <th>Class prefix</th>
+          <td><code>.col-</code></td>
+          <td><code>.col-sm-</code></td>
+          <td><code>.col-lg-</code></td>
+        </tr>
+        <tr>
+          <th># of columns</th>
+          <td colspan="3">12</td>
+        </tr>
+        <tr>
+          <th>Nestable</th>
+          <td colspan="3">Yes</td>
+        </tr>
+        <tr>
+          <th>Offsets</th>
+          <td class="text-muted">N/A</td>
+          <td colspan="2">Yes</td>
+        </tr>
+        <tr>
+          <th>Column ordering</th>
+          <td class="text-muted">N/A</td>
+          <td colspan="2">Yes</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 id="grid-examples">Grid examples</h3>
+    <p>Bootstrap's grid system includes three levels of column sizing&mdash;phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.</p>
 
-    <h3 id="grid-example">Grid example</h3>
     <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-lg-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-lg-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
     <p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p>
     <div class="bs-docs-grid">

diff --git a/less/grid.less b/less/grid.less
index bb99dff7e1583c203c9e3056268d2b66c7c0d8d3..b97d1d5c4a6b3da09b1b7ef609bce31dcea44033 100644 (file)
--- a/less/grid.less
+++ b/less/grid.less
@@ -26,6 +26,18 @@
 .col-10,
 .col-11,
 .col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
 .col-lg-1,
 .col-lg-2,
 .col-lg-3,
@@ -49,9 +61,13 @@
   padding-right: (@grid-gutter-width / 2);
 }
 
-// Grid column sizing
 
-// Small columns (phones and up)
+
+//
+// Container and grid column sizing
+//
+
+// Tiny device columns (smartphones)
 .col-1  { width: percentage((1 / @grid-columns)); }
 .col-2  { width: percentage((2 / @grid-columns)); }
 .col-3  { width: percentage((3 / @grid-columns)); }
@@ -65,20 +81,24 @@
 .col-11 { width: percentage((11/ @grid-columns)); }
 .col-12 { width: 100%; }
 
-// Medium columns (tablets and up)
+// Small device columns (phones to tablets)
 @media (min-width: @screen-tablet) {
-  .col-md-1  { width: percentage((1 / @grid-columns)); }
-  .col-md-2  { width: percentage((2 / @grid-columns)); }
-  .col-md-3  { width: percentage((3 / @grid-columns)); }
-  .col-md-4  { width: percentage((4 / @grid-columns)); }
-  .col-md-5  { width: percentage((5 / @grid-columns)); }
-  .col-md-6  { width: percentage((6 / @grid-columns)); }
-  .col-md-7  { width: percentage((7 / @grid-columns)); }
-  .col-md-8  { width: percentage((8 / @grid-columns)); }
-  .col-md-9  { width: percentage((9 / @grid-columns)); }
-  .col-md-10 { width: percentage((10/ @grid-columns)); }
-  .col-md-11 { width: percentage((11/ @grid-columns)); }
-  .col-md-12 { width: 100%; }
+  .container {
+    max-width: @container-tablet;
+  }
+
+  .col-sm-1  { width: percentage((1 / @grid-columns)); }
+  .col-sm-2  { width: percentage((2 / @grid-columns)); }
+  .col-sm-3  { width: percentage((3 / @grid-columns)); }
+  .col-sm-4  { width: percentage((4 / @grid-columns)); }
+  .col-sm-5  { width: percentage((5 / @grid-columns)); }
+  .col-sm-6  { width: percentage((6 / @grid-columns)); }
+  .col-sm-7  { width: percentage((7 / @grid-columns)); }
+  .col-sm-8  { width: percentage((8 / @grid-columns)); }
+  .col-sm-9  { width: percentage((9 / @grid-columns)); }
+  .col-sm-10 { width: percentage((10/ @grid-columns)); }
+  .col-sm-11 { width: percentage((11/ @grid-columns)); }
+  .col-sm-12 { width: 100%; }
 
   // Offsets
   .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
@@ -119,8 +139,11 @@
   .col-pull-11 { right: percentage((11/ @grid-columns)); }
 }
 
+// Medium and large device columns (desktop and up)
 @media (min-width: @screen-desktop) {
-  // Large columns (desktop and up)
+  .container {
+    max-width: @container-desktop;
+  }
   .col-lg-1  { width: percentage((1 / @grid-columns)); }
   .col-lg-2  { width: percentage((2 / @grid-columns)); }
   .col-lg-3  { width: percentage((3 / @grid-columns)); }
@@ -135,22 +158,8 @@
   .col-lg-12 { width: 100%; }
 }
 
-// Responsive: Tablets and up
-@media screen and (min-width: @screen-tablet) {
-  .container {
-    max-width: @container-tablet;
-  }
-}
-
-// Responsive: Desktops and up
-@media screen and (min-width: @screen-desktop) {
-  .container {
-    max-width: @container-desktop;
-  }
-}
-
-// Responsive: Large desktops and up
-@media screen and (min-width: @screen-large-desktop) {
+// Large desktops and up
+@media (min-width: @screen-large-desktop) {
   .container {
     max-width: @container-large-desktop;
   }