Documented semifluid layouts

Added semifluid layouts to jasny/bootstrap.less and jasny/responsive.less

docs/assets/css/docs.css

@@ -398,6 +398,7 @@ hr.soften {
   background-color: #dceaf4;
   margin: 0 auto;
   width: 70%;
+  height: 100%;
 }
 .mini-layout.fluid .mini-layout-sidebar,
 .mini-layout.fluid .mini-layout-header,
@@ -407,12 +408,31 @@ hr.soften {
 .mini-layout.fluid .mini-layout-sidebar {
   background-color: #bbd8e9;
   width: 20%;
+  height: 100%;
 }
 .mini-layout.fluid .mini-layout-body {
   width: 77.5%;
   margin-left: 2.5%;
 }
-
+.semifluid-layouts {
+  clear: both;
+  overflow: hidden;
+}
+.semifluid-layouts .mini-layout {
+  width: auto;
+  height: 180px;
+}
+.semifluid-layouts .mini-layout.desktop {
+  width: 62%;
+  float: left;
+}
+.semifluid-layouts .mini-layout.tablet {
+  width: 25%;
+  float: right;
+}
+.mini-layout.tablet .mini-layout-body {
+  width: 100%;
+}
 
 
 /* Download page
@@ -1052,6 +1072,16 @@ form.bs-docs-example {
     border-top-width: 0px;
     padding: 0;
   }
+<<<<<<< HEAD
+=======
+  
+  /* Space out the show-grid examples */
+  .row-desktop.show-grid [class*="span"] {
+    margin-bottom: 5px;
+  }
+}
+
+>>>>>>> Added support for semifluid layouts
 
   /* Modal example */
   .modal-example .modal {

docs/templates/pages/index.mustache

@@ -57,6 +57,10 @@
         <h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
         <p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
       </div>
+      <div class="span3">
+        <h3><a href="./scaffolding.html#layouts">{{_i}}Semi-fluid layout{{/i}}</a></h3>
+        <p>{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
+      </div>
     </div>
     <div class="row">
       <div class="span3">

docs/templates/pages/scaffolding.mustache

@@ -301,6 +301,24 @@
     </div>
   </div>
 </div>
+</pre>
+
+          <h2>{{_i}}Semi-fluid layout{{/i}}</h2>
+          <p>{{_i}}Get the best of both worlds with <code>&lt;div class="container-semifluid"&gt;</code>. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
+          <div class="semifluid-layouts">
+            <div class="mini-layout desktop">
+              <div class="mini-layout-body"></div>
+            </div>
+            <div class="mini-layout tablet">
+              <div class="mini-layout-body"></div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="container-fluid"&gt;
+  &lt;div class="row-fluid"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
 </pre>
         </section>
 

less/jasny/bootstrap.less

@@ -12,6 +12,9 @@
 @import "../variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "../mixins.less";
 
+// Grid system and page structure
+@import "layouts-semifluid.less";
+
 // Base CSS
 @import "forms.less";
 @import "forms-uneditable.less";

less/jasny/responsive.less

@@ -12,6 +12,9 @@
 @import "../variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "../mixins.less";
 
+// Grid system and page structure
+@import "layouts-semifluid.responsive.less";
+
 // Base CSS
 @import "forms.responsive.less";