Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

1 files changed, 107 insertions, 21 deletions

diff --git a/less/responsive.less b/less/responsive.less
index 6c3102c14..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;
@@ -135,10 +139,10 @@
 @media (min-width: 768px) and (max-width: 940px) {
 
   // Reset grid variables
-  @gridColumns:       16;
-  @gridColumnWidth:   44px;
+  @gridColumns:       12;
+  @gridColumnWidth:   42px;
   @gridGutterWidth:   20px;
-  @siteWidth:         748px;
+  @siteWidth:         724px;
 
   // Bring grid mixins to recalculate widths
   .columns(@columns: 1) {
@@ -148,11 +152,11 @@
     margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
   }
 
-  // 16cols at 30px wide with 16px gutters
+  // 12cols at 44px wide with 20px gutters
   .container {
     width: @siteWidth;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
   }
 
   // Default columns
@@ -181,8 +185,43 @@
   .offset9   { .offset(9); }
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
 
+  // 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); }
+  }
 }
 
 
@@ -199,10 +238,10 @@
   // Unfix the navbar
   .navbar-fixed-top {
     position: static;
-    margin-bottom: @baseLineHeight * 2;
+    margin-bottom: @baseLineHeight;
   }
   .navbar-inner {
-    padding: 10px;
+    padding: 5px;
     background-image: none;
   }
   .navbar .container {
@@ -210,16 +249,18 @@
   }
   // Account for brand name
   .navbar .brand {
-    float: none;
-    display: block;
-    padding-left: 15px;
-    padding-right: 15px;
-    margin: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  // Nav collapse clears brand
+  .navbar .nav-collapse {
+    clear: left;
   }
   // Block-level the nav
   .navbar .nav {
     float: none;
-    margin: (@baseLineHeight / 2) 0;
+    margin: 0 0 (@baseLineHeight / 2);
   }
   .navbar .nav > li {
     float: none;
@@ -248,8 +289,10 @@
   // Dropdowns in the navbar
   .navbar .dropdown-menu {
     position: static;
-    display: block;
+    top: auto;
+    left: auto;
     float: none;
+    display: block;
     max-width: none;
     margin: 0 15px;
     padding: 0;
@@ -291,6 +334,7 @@
     display: block;
   }
 
+  // Hide everything in the navbar save .brand and toggle button */
   .nav-collapse {
     overflow: hidden;
     height: 0;
@@ -301,8 +345,8 @@
 
 // LARGE DESKTOP & UP
 // ------------------
-/*
-@media (min-width: 1210px) {
+
+@media (min-width: 1200px) {
 
   // Reset grid variables
   @gridColumns:       12;
@@ -310,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));
@@ -317,7 +369,6 @@
   .offset(@columns: 1) {
     margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
   }
-
   .container {
     width: @siteWidth;
   }
@@ -354,7 +405,42 @@
   .offset9   { .offset(9); }
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
 
+
+  // 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); }
+  }
 }
-*/
\ No newline at end of file