Merge branch 'new_grid' into 2.0.2-wip

Conflicts:
	docs/assets/bootstrap.zip
	docs/assets/css/bootstrap-responsive.css
	docs/assets/css/bootstrap.css
	less/mixins.less

diff --cc docs/assets/bootstrap.zip
index 29fa6ab4c3e0fde3042e7e40e4ee9965414e01b6,84e1f81f1c0852a75651707b4eb311f947d46382..502139c251c28bc4a5776ad41c7565c1db63c020
Binary files differ

diff --cc docs/assets/css/bootstrap-responsive.css
index 2e2bd33173175c29bad8211975c8da0d17bc766f,8de0bb3496c5c457f98291363b9310def17b09d9..47d25b0e8e62a2f89967588bc73962d89b5b4af5
--- 1/docs/assets/css/bootstrap-responsive.css
--- 2/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@@ -323,65 -316,65 +323,41 @@@
    .uneditable-input {
      margin-left: 0;
    }
-   input.span1,
-   textarea.span1,
-   .uneditable-input.span1 {
-     width: 32px;
-   }
-   input.span2,
-   textarea.span2,
-   .uneditable-input.span2 {
-     width: 94px;
 -  input > .span12,
 -  textarea > .span12,
 -  .uneditable-input > .span12 {
++  input.span12, textarea.span12, .uneditable-input.span12 {
+     width: 714px;
    }
-   input.span3,
-   textarea.span3,
-   .uneditable-input.span3 {
-     width: 156px;
 -  input > .span11,
 -  textarea > .span11,
 -  .uneditable-input > .span11 {
++  input.span11, textarea.span11, .uneditable-input.span11 {
+     width: 652px;
    }
-   input.span4,
-   textarea.span4,
-   .uneditable-input.span4 {
-     width: 218px;
 -  input > .span10,
 -  textarea > .span10,
 -  .uneditable-input > .span10 {
++  input.span10, textarea.span10, .uneditable-input.span10 {
+     width: 590px;
    }
-   input.span5,
-   textarea.span5,
-   .uneditable-input.span5 {
-     width: 280px;
 -  input > .span9,
 -  textarea > .span9,
 -  .uneditable-input > .span9 {
++  input.span9, textarea.span9, .uneditable-input.span9 {
+     width: 528px;
    }
-   input.span6,
-   textarea.span6,
-   .uneditable-input.span6 {
-     width: 342px;
 -  input > .span8,
 -  textarea > .span8,
 -  .uneditable-input > .span8 {
++  input.span8, textarea.span8, .uneditable-input.span8 {
+     width: 466px;
    }
-   input.span7,
-   textarea.span7,
-   .uneditable-input.span7 {
 -  input > .span7,
 -  textarea > .span7,
 -  .uneditable-input > .span7 {
++  input.span7, textarea.span7, .uneditable-input.span7 {
      width: 404px;
    }
-   input.span8,
-   textarea.span8,
-   .uneditable-input.span8 {
-     width: 466px;
 -  input > .span6,
 -  textarea > .span6,
 -  .uneditable-input > .span6 {
++  input.span6, textarea.span6, .uneditable-input.span6 {
+     width: 342px;
    }
-   input.span9,
-   textarea.span9,
-   .uneditable-input.span9 {
-     width: 528px;
 -  input > .span5,
 -  textarea > .span5,
 -  .uneditable-input > .span5 {
++  input.span5, textarea.span5, .uneditable-input.span5 {
+     width: 280px;
    }
-   input.span10,
-   textarea.span10,
-   .uneditable-input.span10 {
-     width: 590px;
 -  input > .span4,
 -  textarea > .span4,
 -  .uneditable-input > .span4 {
++  input.span4, textarea.span4, .uneditable-input.span4 {
+     width: 218px;
    }
-   input.span11,
-   textarea.span11,
-   .uneditable-input.span11 {
-     width: 652px;
 -  input > .span3,
 -  textarea > .span3,
 -  .uneditable-input > .span3 {
++  input.span3, textarea.span3, .uneditable-input.span3 {
+     width: 156px;
    }
-   input.span12,
-   textarea.span12,
-   .uneditable-input.span12 {
-     width: 714px;
 -  input > .span2,
 -  textarea > .span2,
 -  .uneditable-input > .span2 {
++  input.span2, textarea.span2, .uneditable-input.span2 {
+     width: 94px;
+   }
 -  input > .span1,
 -  textarea > .span1,
 -  .uneditable-input > .span1 {
++  input.span1, textarea.span1, .uneditable-input.span1 {
+     width: 32px;
    }
  }
  @media (max-width: 979px) {
@@@ -652,65 -645,65 +628,41 @@@
    .uneditable-input {
      margin-left: 0;
    }
-   input.span1,
-   textarea.span1,
-   .uneditable-input.span1 {
-     width: 60px;
-   }
-   input.span2,
-   textarea.span2,
-   .uneditable-input.span2 {
-     width: 160px;
 -  input > .span12,
 -  textarea > .span12,
 -  .uneditable-input > .span12 {
++  input.span12, textarea.span12, .uneditable-input.span12 {
+     width: 1160px;
    }
-   input.span3,
-   textarea.span3,
-   .uneditable-input.span3 {
-     width: 260px;
 -  input > .span11,
 -  textarea > .span11,
 -  .uneditable-input > .span11 {
++  input.span11, textarea.span11, .uneditable-input.span11 {
+     width: 1060px;
    }
-   input.span4,
-   textarea.span4,
-   .uneditable-input.span4 {
-     width: 360px;
 -  input > .span10,
 -  textarea > .span10,
 -  .uneditable-input > .span10 {
++  input.span10, textarea.span10, .uneditable-input.span10 {
+     width: 960px;
    }
-   input.span5,
-   textarea.span5,
-   .uneditable-input.span5 {
-     width: 460px;
 -  input > .span9,
 -  textarea > .span9,
 -  .uneditable-input > .span9 {
++  input.span9, textarea.span9, .uneditable-input.span9 {
+     width: 860px;
    }
-   input.span6,
-   textarea.span6,
-   .uneditable-input.span6 {
-     width: 560px;
 -  input > .span8,
 -  textarea > .span8,
 -  .uneditable-input > .span8 {
++  input.span8, textarea.span8, .uneditable-input.span8 {
+     width: 760px;
    }
-   input.span7,
-   textarea.span7,
-   .uneditable-input.span7 {
 -  input > .span7,
 -  textarea > .span7,
 -  .uneditable-input > .span7 {
++  input.span7, textarea.span7, .uneditable-input.span7 {
      width: 660px;
    }
-   input.span8,
-   textarea.span8,
-   .uneditable-input.span8 {
-     width: 760px;
 -  input > .span6,
 -  textarea > .span6,
 -  .uneditable-input > .span6 {
++  input.span6, textarea.span6, .uneditable-input.span6 {
+     width: 560px;
    }
-   input.span9,
-   textarea.span9,
-   .uneditable-input.span9 {
-     width: 860px;
 -  input > .span5,
 -  textarea > .span5,
 -  .uneditable-input > .span5 {
++  input.span5, textarea.span5, .uneditable-input.span5 {
+     width: 460px;
    }
-   input.span10,
-   textarea.span10,
-   .uneditable-input.span10 {
-     width: 960px;
 -  input > .span4,
 -  textarea > .span4,
 -  .uneditable-input > .span4 {
++  input.span4, textarea.span4, .uneditable-input.span4 {
+     width: 360px;
    }
-   input.span11,
-   textarea.span11,
-   .uneditable-input.span11 {
-     width: 1060px;
 -  input > .span3,
 -  textarea > .span3,
 -  .uneditable-input > .span3 {
++  input.span3, textarea.span3, .uneditable-input.span3 {
+     width: 260px;
    }
-   input.span12,
-   textarea.span12,
-   .uneditable-input.span12 {
-     width: 1160px;
 -  input > .span2,
 -  textarea > .span2,
 -  .uneditable-input > .span2 {
++  input.span2, textarea.span2, .uneditable-input.span2 {
+     width: 160px;
+   }
 -  input > .span1,
 -  textarea > .span1,
 -  .uneditable-input > .span1 {
++  input.span1, textarea.span1, .uneditable-input.span1 {
+     width: 60px;
    }
    .thumbnails {
      margin-left: -30px;

diff --cc docs/assets/css/bootstrap.css
index 3935581901af7895cd67745acf5535eb95bf314d,20ec7f609b39526cae20f294a53ded62268ea1df..74ce8db86ede792b96ade307574b4c152b300fb6
--- 1/docs/assets/css/bootstrap.css
--- 2/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@@ -778,65 -767,65 +778,41 @@@ textarea
  .uneditable-input {
    margin-left: 0;
  }
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
-   width: 50px;
- }
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
-   width: 130px;
 -input > .span12,
 -textarea > .span12,
 -.uneditable-input > .span12 {
++input.span12, textarea.span12, .uneditable-input.span12 {
+   width: 930px;
  }
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
-   width: 210px;
 -input > .span11,
 -textarea > .span11,
 -.uneditable-input > .span11 {
++input.span11, textarea.span11, .uneditable-input.span11 {
+   width: 850px;
  }
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
-   width: 290px;
 -input > .span10,
 -textarea > .span10,
 -.uneditable-input > .span10 {
++input.span10, textarea.span10, .uneditable-input.span10 {
+   width: 770px;
  }
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
-   width: 370px;
 -input > .span9,
 -textarea > .span9,
 -.uneditable-input > .span9 {
++input.span9, textarea.span9, .uneditable-input.span9 {
+   width: 690px;
  }
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
-   width: 450px;
 -input > .span8,
 -textarea > .span8,
 -.uneditable-input > .span8 {
++input.span8, textarea.span8, .uneditable-input.span8 {
+   width: 610px;
  }
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
 -input > .span7,
 -textarea > .span7,
 -.uneditable-input > .span7 {
++input.span7, textarea.span7, .uneditable-input.span7 {
    width: 530px;
  }
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
-   width: 610px;
 -input > .span6,
 -textarea > .span6,
 -.uneditable-input > .span6 {
++input.span6, textarea.span6, .uneditable-input.span6 {
+   width: 450px;
  }
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
-   width: 690px;
 -input > .span5,
 -textarea > .span5,
 -.uneditable-input > .span5 {
++input.span5, textarea.span5, .uneditable-input.span5 {
+   width: 370px;
  }
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
-   width: 770px;
 -input > .span4,
 -textarea > .span4,
 -.uneditable-input > .span4 {
++input.span4, textarea.span4, .uneditable-input.span4 {
+   width: 290px;
  }
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
-   width: 850px;
 -input > .span3,
 -textarea > .span3,
 -.uneditable-input > .span3 {
++input.span3, textarea.span3, .uneditable-input.span3 {
+   width: 210px;
  }
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
-   width: 930px;
 -input > .span2,
 -textarea > .span2,
 -.uneditable-input > .span2 {
++input.span2, textarea.span2, .uneditable-input.span2 {
+   width: 130px;
+ }
 -input > .span1,
 -textarea > .span1,
 -.uneditable-input > .span1 {
++input.span1, textarea.span1, .uneditable-input.span1 {
+   width: 50px;
  }
  input[disabled],
  select[disabled],

diff --cc less/mixins.less
index 814a42b4bbe6ffcfa62b79d573737cd77cbc8ca3,c9ed1331751a1818fa3f6dd059a0281830ff0a69..bba7544528957e274fb4702f53d6a05558e819c0
--- 1/less/mixins.less
--- 2/less/mixins.less
+++ b/less/mixins.less
@@@ -482,11 -482,26 +482,19 @@@
  
  #grid {
  
 -  // Recursive mixins! <3
 -  // Requires not yet released LESS ;)
 +  .core (@gridColumnWidth, @gridGutterWidth) {
  
-     .span (@columns) {
-       width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 -  .spanX (@index) when (@index > 0) {
 -    ~".span@{index}" { .span(@index); }
 -    #grid .spanX(@index - 1);
 -  }
 -  .spanX (@index, child) when (@index > 0) {
 -    ~"> .span@{index}" { .span(@index); }
 -    #grid .spanX(@index - 1, child);
 -  }
 -  .spanX (0, ...) {}
 -
 -  .offsetX (@index) when (@index > 0) {
 -    ~".offset@{index}" { .offset(@index); }
 -    #grid .offsetX(@index - 1);
 -  }
 -  .offsetX (0) {}
++    .spanX (@index) when (@index > 0) {
++      (~".span@{index}") { .span(@index); }
++      .spanX(@index - 1);
++    }
++    .spanX (0) {}
+ 
 -  .core (@gridColumnWidth, @gridGutterWidth) {
++    .offsetX (@index) when (@index > 0) {
++      (~".offset@{index}") { .offset(@index); }
++      .offsetX(@index - 1);
 +    }
++    .offsetX (0) {}
  
      .offset (@columns) {
        margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
@@@ -502,41 -521,19 +514,25 @@@
        margin-left: @gridGutterWidth;
      }
  
 -    // Set the container width, and reset it for fixed navbars
 +    // Set the container width, and override it for fixed navbars in media queries
      .container,
      .navbar-fixed-top .container,
-     .navbar-fixed-bottom .container { .span(12); }
- 
-     .span1 { .span(1); }
-     .span2 { .span(2); }
-     .span3 { .span(3); }
-     .span4 { .span(4); }
-     .span5 { .span(5); }
-     .span6 { .span(6); }
-     .span7 { .span(7); }
-     .span8 { .span(8); }
-     .span9 { .span(9); }
-     .span10 { .span(10); }
-     .span11 { .span(11); }
-     .span12 { .span(12); }
- 
-     .offset1 { .offset(1); }
-     .offset2 { .offset(2); }
-     .offset3 { .offset(3); }
-     .offset4 { .offset(4); }
-     .offset5 { .offset(5); }
-     .offset6 { .offset(6); }
-     .offset7 { .offset(7); }
-     .offset8 { .offset(8); }
-     .offset9 { .offset(9); }
-     .offset10 { .offset(10); }
-     .offset11 { .offset(11); }
-     .offset12 { .offset(12); }
+     .navbar-fixed-bottom .container { .span(@gridColumns); }
+ 
+     // generate .spanX and .offsetX
 -    #grid .spanX (@gridColumns);
 -    #grid .offsetX (@gridColumns);
++    .spanX (@gridColumns);
++    .offsetX (@gridColumns);
  
    }
  
    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
  
++    .spanX (@index) when (@index > 0) {
++      (~"> .span@{index}") { .span(@index); }
++      .spanX(@index - 1);
++    }
++    .spanX (0) {}
++
      .span (@columns) {
        width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      }
@@@ -551,24 -548,15 +547,21 @@@
        > [class*="span"]:first-child {
          margin-left: 0;
        }
-       > .span1 { .span(1); }
-       > .span2 { .span(2); }
-       > .span3 { .span(3); }
-       > .span4 { .span(4); }
-       > .span5 { .span(5); }
-       > .span6 { .span(6); }
-       > .span7 { .span(7); }
-       > .span8 { .span(8); }
-       > .span9 { .span(9); }
-       > .span10 { .span(10); }
-       > .span11 { .span(11); }
-       > .span12 { .span(12); }
+ 
+       // generate .spanX
 -      #grid .spanX (@gridColumns, child);
++      .spanX (@gridColumns);
      }
  
    }
  
    .input(@gridColumnWidth, @gridGutterWidth) {
  
++    .spanX (@index) when (@index > 0) {
++      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
++      .spanX(@index - 1);
++    }
++    .spanX (0) {}
++
      .span(@columns) {
        width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
      }
@@@ -577,20 -565,11 +570,11 @@@
      textarea,
      .uneditable-input {
        margin-left: 0; // override margin-left from core grid system
-       &.span1 { .span(1); }
-       &.span2 { .span(2); }
-       &.span3 { .span(3); }
-       &.span4 { .span(4); }
-       &.span5 { .span(5); }
-       &.span6 { .span(6); }
-       &.span7 { .span(7); }
-       &.span8 { .span(8); }
-       &.span9 { .span(9); }
-       &.span10 { .span(10); }
-       &.span11 { .span(11); }
-       &.span12 { .span(12); }
 -
 -      // generate .spanX
 -      #grid .spanX (@gridColumns, child);
      }
  
++    // generate .spanX
++    .spanX (@gridColumns);
++
    }
  
  }