From eb3389303d169b4ad8e85292e23fbc1a1be87f1b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 28 Apr 2011 11:46:32 -0700
Subject: [PATCH] Added in mini layout docs; cleaned up layout markup and added
 the css for it;

---
 index.html            | 55 ++++++++++++++++++++++----------
 less/docs.less        | 74 ++++++++++++++++++++++++++++++++++++++-----
 less/scaffolding.less | 17 +++++++++-
 readme.markdown       |  1 -
 4 files changed, 120 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 6274b8c314..b1e13d7937 100644
--- a/index.html
+++ b/index.html
@@ -12,19 +12,6 @@
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
     <script type="text/javascript" src="js/jquery/hashgrid.js"></script>
-    <script type="text/javascript">
-      $(document).ready(function(){
-        // Active state in top nav
-        $('div.topbar ul a').click(function() {
-          if ($(this).parents('li').hasClass('active')) {
-            $(this).parents('li').removeClass('active');
-          } else {
-            $(this).parents('li').siblings().removeClass('active');
-            $(this).parents('li').addClass('active');
-          }
-        });
-      });
-    </script>
 
     <!-- Code Highlighting -->
     <script type="text/javascript" src="js/jquery/chili/jquery.chili-2.2.js"></script>
@@ -54,7 +41,7 @@
           <img src="img/twitter-logo-no-bird.png" alt="Twitter" /> <span>baseline</span>
         </a></h3>
         <ul>
-          <li class="active"><a href="#">Getting Started</a></li>
+          <li><a href="#getting-started">Getting Started</a></li>
           <li><a href="#bootstrap">Bootstrap</a></li>
           <li><a href="#grid-system">Grid</a></li>
           <li><a href="#layouts">Layouts</a></li>
@@ -91,7 +78,7 @@
 
 
 
-<section>
+<section id="getting-started">
 <div class="page-header">
   <h1>Getting started</h1>
 </div>
@@ -338,10 +325,44 @@
   </div>
   <div class="row">
     <div class="span4 columns">
-      
+      <h2>Fixed layout</h2>
+      <p>A basic 940px wide, centered container layout for just about any site or page.</p>
     </div>
     <div class="span12 columns">
-      
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="html">
+&lt;body&gt;
+  &lt;div class="container"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span4 columns">
+      <h2>Fluid layout</h2>
+      <p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
+    </div>
+    <div class="span12 columns">
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="html">
+&lt;body&gt;
+  &lt;div class="container-fluid"&gt;
+    &lt;div class="sidebar"&gt;
+      ...
+    &lt;/div&gt;
+    &lt;div class="content"&gt;
+      ...
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
     </div>
   </div>
 </section>
diff --git a/less/docs.less b/less/docs.less
index 8ce89e2769..b21c39aa86 100644
--- a/less/docs.less
+++ b/less/docs.less
@@ -1,3 +1,13 @@
+/*
+  Baseline's documentation styles
+  Special styles for presenting Baseline's documentation and examples
+*/
+
+
+/* Body and structure
+-------------------------------------------------- */
+
+// Give us a gradient background
 body {
   #gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
   background-attachment: fixed;
@@ -5,7 +15,7 @@ body {
   position: relative;
 }
 
-// Give us some love
+// Give us some love on HTML5 elements (hardly use these in Basline thus far though)
 header,
 section,
 footer,
@@ -14,6 +24,13 @@ aside {
   display: block;
 }
 
+// Break up sections
+section {
+  padding-top: @baseline * 4;
+  margin-bottom: @baseline * -2;
+}
+
+// Blueprint-style header and footer
 #masthead,
 #footer {
   #gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
@@ -69,7 +86,10 @@ aside {
   }
 }
 
-// Show the grids
+
+/* Special grid styles
+-------------------------------------------------- */
+
 .show-grid {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -89,13 +109,10 @@ aside {
   }
 }
 
-// Break up sections
-section {
-  padding-top: @baseline * 4;
-  margin-bottom: @baseline * -2;
-}
 
-// Hashgrid.js grid
+/* Hashgrid.js grid (press G & H to view)
+-------------------------------------------------- */
+
 #grid {
   width: 980px;
   position: absolute;
@@ -121,3 +138,44 @@ section {
     border-color: rgba(255,0,0,.25);
   }
 }
+
+
+
+/* Render mini layout previews
+-------------------------------------------------- */
+
+div.mini-layout {
+  height: 340px;
+  margin-bottom: @baseline;
+  padding: 9px;
+  border: 1px solid rgba(0,0,0,.25);
+  .border-radius(6px);
+  .box-shadow(0 1px 3px rgba(0,0,0,.125));
+  // Default mini layout (fixed container)
+  div {
+    .border-radius(3px);
+    &.mini-layout-body {
+      background-color: rgba(141,192,219,.25);
+      margin: 0 auto;
+      width: 450px;
+      height: 340px;
+    }
+  }
+  // Fluid layout (sidebar)
+  &.fluid {
+    div.mini-layout-sidebar,
+    div.mini-layout-header,
+    div.mini-layout-body {
+      float: left;
+    }
+    div.mini-layout-sidebar {
+      background-color: rgba(141,192,219,.5);
+      width: 90px;
+      height: 340px;
+    }
+    div.mini-layout-body {
+      width: 400px;
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 88bcf714a9..fc920ab3a4 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -41,12 +41,27 @@ body {
   .box-shadow(inset 0 1px 0 #fff);
 }
 
-// Containers
+// Container (centered, fixed-width layouts)
 div.container {
   width: 940px;
   margin: 0 auto;
 }
 
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+div.container-fluid {
+  padding: 20px;
+  .clearfix();
+  div.sidebar {
+    float: left;
+    width: 220px;
+  }
+  div.content {
+    min-width: 700px;
+    max-width: 1180px;
+    margin-left: 240px;
+  }
+}
+
 
 /* Base Styles
 -------------------------------------------------- */
diff --git a/readme.markdown b/readme.markdown
index 5c149d2f31..a2064aa4d0 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -11,6 +11,5 @@ http://twitter.com/mdo
 
 # Todos
 
-* Add the empty layout section in
 * Cross browser checks? Show this anywhere?
 * Write up brief section on browser support
\ No newline at end of file