From: Mark Otto <otto@github.com>
Date: Mon, 14 Oct 2013 00:12:04 +0000 (-0700)
Subject: finish grid docs intro for now; needs work though
X-Git-Tag: v3.0.1~39^2~65
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=49f177fe6034c00242705a2f02b29758aaf96879;p=thirdparty%2Fbootstrap.git

finish grid docs intro for now; needs work though
---

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 4ef5e4bca0..543d004f30 100644
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -12,6 +12,7 @@
 <li>
   <a href="#grid">Grid system</a>
   <ul class="nav">
+    <li><a href="#grid-intro">Introduction</a></li>
     <li><a href="#grid-media-queries">Media queries</a></li>
     <li><a href="#grid-options">Grid options</a></li>
     <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
diff --git a/css.html b/css.html
index f6eb86c535..f8b801ea76 100644
--- a/css.html
+++ b/css.html
@@ -72,12 +72,15 @@ base_url: "../"
     </div>
     <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-basic">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-how-it-works">How it works</h3>
-    <p>Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.</p>
+    <h3 id="grid-intro">Introduction</h3>
+    <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
     <ul>
-      <li>Create a <code>.row</code> to house your columns. No content should be placed directly within a row, only in columns.</li>
-      <li>Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.</li>
+      <li>Use rows to create horizontal groups of columns.</li>
+      <li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
+      <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
+      <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
     </ul>
+    <p>Look to the examples for applying these principles to your code.</p>
 
     <h3 id="grid-media-queries">Media queries</h3>
     <p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p>