Better grid template; link color change in docs navbar

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e389eaf6e900f7f32b8cfe4c2866811afeede916..9221cac1bdb0067170ba75aec3ea0e7eb25f7615 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -25,7 +25,7 @@ body {
   color: #fff;
 }
 .bs-docs-nav .navbar-nav > li > a {
-  color: #dfc9c8;
+  color: #e6cac8;
 }
 .bs-docs-nav .navbar-nav > li > a:hover {
   color: #fff;

diff --git a/docs/css.html b/docs/css.html
index be4e130985b65d7fcbd0b2fcedbe20b4cf3d329a..264d4c672c6f33988ae13f3deae917c7011dd888 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -67,6 +67,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     <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">
       <div class="row show-grid">
         <div class="col col-lg-1">1</div>

diff --git a/docs/examples/grid.html b/docs/examples/grid.html
index eea2ac0cf24680099b8c182755976955216d6ead..d14602e4ecb4cb8786df536bbed9e7a817ced5bf 100644 (file)
--- a/docs/examples/grid.html
+++ b/docs/examples/grid.html
@@ -11,9 +11,16 @@ title: Grid template
     padding-right: 15px;
   }
 
+  h4 {
+    margin-top: 25px;
+  }
   .row {
     margin-bottom: 20px;
   }
+  .row .row {
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
   [class*="col-lg-"] {
     padding-top: 15px;
     padding-bottom: 15px;
@@ -49,6 +56,19 @@ title: Grid template
   </div>
 
   <h4>Full width, single column</h4>
-  <p class="text-muted">No grid classes are necessary for full-width elements.</p>
+  <p class="text-warning">No grid classes are necessary for full-width elements.</p>
+
+  <h4>Two columns with two nested columns</h4>
+  <div class="row">
+    <div class="col col-lg-8">
+      .col .col-lg-8
+      <div class="row">
+        <div class="col col-lg-6">.col .col-lg-6</div>
+        <div class="col col-lg-6">.col .col-lg-6</div>
+      </div>
+    </div>
+    <div class="col col-lg-4">.col .col-lg-4</div>
+  </div>
+
 
 </div> <!-- /container -->