last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now

5 files changed, 157 insertions, 69 deletions

diff --git a/less/grid.less b/less/grid.less
index d5b5f487d..4493d0b95 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,14 +1,40 @@
 // GRID SYSTEM
 // -----------
-// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
+
+
+// Default grid sizing
+// -------------------
+@gridColumns:           12;
+@gridColumnWidth:       60px;
+@gridGutterWidth:       20px;
+
+@gridRowWidth:          (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@gridTotalWidth:        @gridRowWidth;
+
+
+// Columns and offseting mixins
+// ----------------------------
+.columns(@columns: 1) {
+  //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
+}
+.offset(@columns: 1) {
+  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+}
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+  float: left;
+  margin-left: @gridGutterWidth;
+}
+
+// Grid rows and columns
+// ---------------------
 .row {
   margin-left: @gridGutterWidth * -1;
   .clearfix();
 }
 
-// Find all .span# classes within .row and give them the necessary properties for grid columns 
-// (supported by all browsers back to IE7)
-// Credit to @dhg for the idea
+// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
 [class*="span"] {
   .gridColumn();
 }
@@ -39,3 +65,42 @@
 .offset9   { .offset(9); }
 .offset10  { .offset(10); }
 .offset11  { .offset(11); }
+
+
+
+// FLUID GRID SYSTEM
+// -----------------
+// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
+
+.row-fluid {
+  @gridColumnWidth: 6.382978723%;
+  @gridGutterWidth: 2.127659574%;
+
+  width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+  margin-left: 0 - @gridGutterWidth;
+
+  // Redeclare the mixins
+  .gridColumn() {
+    float: left;
+    margin-left: @gridGutterWidth;
+  } 
+  [class*="span"] {
+    .gridColumn();
+  }
+  .fluidColumns(@columns: 1) {
+    width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+  }
+  // Redeclare the columns
+  .span1     { .fluidColumns(1); }
+  .span2     { .fluidColumns(2); }
+  .span3     { .fluidColumns(3); }
+  .span4     { .fluidColumns(4); }
+  .span5     { .fluidColumns(5); }
+  .span6     { .fluidColumns(6); }
+  .span7     { .fluidColumns(7); }
+  .span8     { .fluidColumns(8); }
+  .span9     { .fluidColumns(9); }
+  .span10    { .fluidColumns(10); }
+  .span11    { .fluidColumns(11); }
+  .span12    { .fluidColumns(12); }
+}
diff --git a/less/layouts.less b/less/layouts.less
index 14435c9d1..c8d358b24 100644
--- a/less/layouts.less
+++ b/less/layouts.less
@@ -10,34 +10,8 @@
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.fluid-container {
-  position: relative;
-  min-width: @siteWidth;
+.container-fluid {
   padding-left: @gridGutterWidth;
   padding-right: @gridGutterWidth;
   .clearfix();
-}
-
-// Sidebars (left and right options)
-.fluid-sidebar {
-  width: @fluidSidebarWidth;
-  margin: 0 20px 18px;
-}
-.sidebar-left   { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
-.sidebar-right  { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
-
-// Float the sidebars accordingly
-.sidebar-left .fluid-sidebar {
-  float: left;
-  margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-.sidebar-right .fluid-sidebar {
-  float: right;
-  margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-
-// The main content area
-.fluid-content {
-  float: left;
-  width: 100%;
-}
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2bfcd053e..2d0e2d4c0 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -133,31 +133,12 @@
 // Site container
 // -------------------------
 .container-fixed() {
-  width: @siteWidth;
+  width: @gridTotalWidth;
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
 
-// Columns and offseting
-// -------------------------
-.columns(@columns: 1) {
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-.offset(@columns: 1) {
-  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
-  float: left;
-  margin-left: @gridGutterWidth;
-}
-// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
-.makeColumn(@columnSpan: 1) {
-  .gridColumn();
-  .columns(@columnSpan);
-}
-
 
 
 // CSS3 PROPERTIES
diff --git a/less/responsive.less b/less/responsive.less
index db2675e3d..107fa7dd7 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -115,6 +115,10 @@
     width: auto;
     padding: 0 20px;
   }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
   // Undo negative margin on rows
   .row {
     margin-left: 0;
@@ -182,6 +186,42 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
 
+  // FLUID GRID
+  // ----------
+  .row-fluid {
+    @gridColumnWidth:     5.801104972%;
+    @gridGutterWidth:     2.762430939%;
+    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+    @gridTotalWidth:      @gridRowWidth;
+
+    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+    margin-left: 0 - @gridGutterWidth;
+
+    // Redeclare the mixins
+    .gridColumn() {
+      float: left;
+      margin-left: @gridGutterWidth;
+    } 
+    [class*="span"] {
+      .gridColumn();
+    }
+    .fluidColumns(@columns: 1) {
+      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+    }
+    // Redeclare the columns
+    .span1     { .fluidColumns(1); }
+    .span2     { .fluidColumns(2); }
+    .span3     { .fluidColumns(3); }
+    .span4     { .fluidColumns(4); }
+    .span5     { .fluidColumns(5); }
+    .span6     { .fluidColumns(6); }
+    .span7     { .fluidColumns(7); }
+    .span8     { .fluidColumns(8); }
+    .span9     { .fluidColumns(9); }
+    .span10    { .fluidColumns(10); }
+    .span11    { .fluidColumns(11); }
+    .span12    { .fluidColumns(12); }
+  }
 }
 
 
@@ -198,7 +238,7 @@
   // Unfix the navbar
   .navbar-fixed-top {
     position: static;
-    margin-bottom: @baseLineHeight * 2;
+    margin-bottom: @baseLineHeight;
   }
   .navbar-inner {
     padding: 5px;
@@ -314,6 +354,14 @@
   @gridGutterWidth:   30px;
   @siteWidth:         1170px;
 
+  // Thumbnails
+  .thumbnails {
+    margin-left: @gridGutterWidth * -1;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth;
+  }
+
   // Bring grid mixins to recalculate widths
   .columns(@columns: 1) {
     width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
@@ -358,12 +406,41 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
 
-  // Thumbnails
-  .thumbnails {
-    margin-left: @gridGutterWidth * -1;
-  }
-  .thumbnails > li {
-    margin-left: @gridGutterWidth;
-  }
 
+  // FLUID GRID
+  // ----------
+  .row-fluid {
+    @gridColumnWidth:     5.982%;
+    @gridGutterWidth:     2.56%;
+    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+    @gridTotalWidth:      @gridRowWidth;
+
+    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+    margin-left: 0 - @gridGutterWidth;
+
+    // Redeclare the mixins
+    .gridColumn() {
+      float: left;
+      margin-left: @gridGutterWidth;
+    } 
+    [class*="span"] {
+      .gridColumn();
+    }
+    .fluidColumns(@columns: 1) {
+      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+    }
+    // Redeclare the columns
+    .span1     { .fluidColumns(1); }
+    .span2     { .fluidColumns(2); }
+    .span3     { .fluidColumns(3); }
+    .span4     { .fluidColumns(4); }
+    .span5     { .fluidColumns(5); }
+    .span6     { .fluidColumns(6); }
+    .span7     { .fluidColumns(7); }
+    .span8     { .fluidColumns(8); }
+    .span9     { .fluidColumns(9); }
+    .span10    { .fluidColumns(10); }
+    .span11    { .fluidColumns(11); }
+    .span12    { .fluidColumns(12); }
+  }
 }
diff --git a/less/variables.less b/less/variables.less
index 4265d7ed3..c1e21978c 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -30,15 +30,6 @@
 @pink:                  #c3325f;
 @purple:                #7a43b6;
 
-// Grid system
-// Modify the grid styles in mixins.less
-@gridColumns:           12;
-@gridColumnWidth:       60px;
-@gridGutterWidth:       20px;
-@siteWidth:             (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Fluid width sidebar
-@fluidSidebarWidth:     220px;
-
 // Typography
 @baseFontSize:          13px;
 @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;