update the fluid examples to use new classes and clear the floats properly from sidebar

6 files changed, 65 insertions, 47 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 411bc9c43..2f57e5f95 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan  7 01:22:18 PST 2012
+ * Date: Sat Jan  7 01:58:07 PST 2012
  */
 html, body {
   margin: 0;
@@ -209,21 +209,27 @@ body {
 .fluid-container:after {
   clear: both;
 }
-.fluid-sidebar-left, .fluid-sidebar-right {
+.fluid-sidebar {
   width: 220px;
+  margin: 0 20px 18px;
 }
-.fluid-sidebar-left {
+.sidebar-left {
+  padding-left: 260px;
+}
+.sidebar-right {
+  padding-right: 260px;
+}
+.sidebar-left .fluid-sidebar {
   float: left;
+  margin-left: -240px;
 }
-.fluid-sidebar-right {
+.sidebar-right .fluid-sidebar {
   float: right;
+  margin-right: -240px;
 }
 .fluid-content {
-  margin-left: 240px;
-}
-.fluid-container.reverse .fluid-content {
-  margin-left: 0;
-  margin-right: 240px;
+  float: left;
+  width: 100%;
 }
 a {
   font-weight: inherit;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index fb036b6a0..9996dc318 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -25,11 +25,12 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
 .container:after{clear:both;}
 .fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;}
 .fluid-container:after{clear:both;}
-.fluid-sidebar-left,.fluid-sidebar-right{width:220px;}
-.fluid-sidebar-left{float:left;}
-.fluid-sidebar-right{float:right;}
-.fluid-content{margin-left:240px;}
-.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;}
+.fluid-sidebar{width:220px;margin:0 20px 18px;}
+.sidebar-left{padding-left:260px;}
+.sidebar-right{padding-right:260px;}
+.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;}
+.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;}
+.fluid-content{float:left;width:100%;}
 a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;}
 .pull-right{float:right;}
 .pull-left{float:left;}
diff --git a/docs/upgrading.html b/docs/upgrading.html
index c84cba123..d22fa8c27 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -102,6 +102,11 @@
       <li>Added button bar options</li>
     </ul>
   </li>
+  <li>Examples
+    <ul>
+      <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
+    </ul>
+  </li>
 </ul>
 <!--
   <li>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index 8df731181..61aa08de9 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -42,8 +42,8 @@
       </div>
     </div>
 
-    <div class="fluid-container reverse">
-      <div class="fluid-sidebar-right">
+    <div class="fluid-container sidebar-right">
+      <div class="fluid-sidebar">
         <div class="well">
           <h5>Sidebar</h5>
           <ul>
@@ -116,6 +116,8 @@
           </div>
         </div>
 
+        <hr>
+
         <footer>
           <p>&copy; Company 2011</p>
         </footer>
diff --git a/examples/fluid.html b/examples/fluid.html
index 66e07c82e..bba78a329 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -42,29 +42,29 @@
       </div>
     </div>
 
-    <div class="fluid-container">
-      <div class="fluid-sidebar-left">
-        <div class="well">
-          <h5>Sidebar</h5>
-          <ul>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
+    <div class="fluid-container sidebar-left">
+      <div class="fluid-sidebar">
+        <div class="well side-nav">
+          <h5 class="nav-label">Sidebar</h5>
+          <ul class="nav-group">
+            <li class="active"><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
           </ul>
-          <h5>Sidebar</h5>
-          <ul>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
+          <h5 class="nav-label">Sidebar</h5>
+          <ul class="nav-group">
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
           </ul>
-          <h5>Sidebar</h5>
-          <ul>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
+          <h5 class="nav-label">Sidebar</h5>
+          <ul class="nav-group">
+            <li><a class="nav-item" href="#">Link</a></li>
+            <li><a class="nav-item" href="#">Link</a></li>
           </ul>
         </div>
       </div>
@@ -116,6 +116,8 @@
           </div>
         </div>
 
+        <hr>
+        
         <footer>
           <p>&copy; Company 2011</p>
         </footer>
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index d75adba56..f454b2e91 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -29,21 +29,23 @@ body {
   padding-right: 20px;
   .clearfix();
 }
+
 // Sidebars (left and right options)
-.fluid-sidebar-left,
-.fluid-sidebar-right {
+.fluid-sidebar {
   width: 220px;
+  margin: 0 20px 18px;
 }
-.fluid-sidebar-left   { float: left; }
-.fluid-sidebar-right  { float: right; }
+.sidebar-left   { padding-left: 260px; }
+.sidebar-right  { padding-right: 260px; }
+
+// Float the sidebars accordingly
+.sidebar-left .fluid-sidebar   { float: left; margin-left: -240px; }
+.sidebar-right .fluid-sidebar  { float: right; margin-right: -240px; }
+
 // The main content area
 .fluid-content {
-  margin-left: 240px;
-}
-// Reverse layout for sidebar on right
-.fluid-container.reverse .fluid-content {
-  margin-left: 0;
-  margin-right: 240px;
+  float: left;
+  width: 100%;
 }