new approach to grid with recursive mixins :D

docs/assets/css/bootstrap.css

@@ -148,77 +148,77 @@ a:hover {
 .navbar-fixed-bottom .container {
   width: 940px;
 }
-.span1 {
-  width: 60px;
-}
-.span2 {
-  width: 140px;
+.span12 {
+  width: 940px;
 }
-.span3 {
-  width: 220px;
+.span11 {
+  width: 860px;
 }
-.span4 {
-  width: 300px;
+.span10 {
+  width: 780px;
 }
-.span5 {
-  width: 380px;
+.span9 {
+  width: 700px;
 }
-.span6 {
-  width: 460px;
+.span8 {
+  width: 620px;
 }
 .span7 {
   width: 540px;
 }
-.span8 {
-  width: 620px;
+.span6 {
+  width: 460px;
 }
-.span9 {
-  width: 700px;
+.span5 {
+  width: 380px;
 }
-.span10 {
-  width: 780px;
+.span4 {
+  width: 300px;
 }
-.span11 {
-  width: 860px;
+.span3 {
+  width: 220px;
 }
-.span12 {
-  width: 940px;
+.span2 {
+  width: 140px;
 }
-.offset1 {
-  margin-left: 100px;
+.span1 {
+  width: 60px;
 }
-.offset2 {
-  margin-left: 180px;
+.offset12 {
+  margin-left: 980px;
 }
-.offset3 {
-  margin-left: 260px;
+.offset11 {
+  margin-left: 900px;
 }
-.offset4 {
-  margin-left: 340px;
+.offset10 {
+  margin-left: 820px;
 }
-.offset5 {
-  margin-left: 420px;
+.offset9 {
+  margin-left: 740px;
 }
-.offset6 {
-  margin-left: 500px;
+.offset8 {
+  margin-left: 660px;
 }
 .offset7 {
   margin-left: 580px;
 }
-.offset8 {
-  margin-left: 660px;
+.offset6 {
+  margin-left: 500px;
 }
-.offset9 {
-  margin-left: 740px;
+.offset5 {
+  margin-left: 420px;
 }
-.offset10 {
-  margin-left: 820px;
+.offset4 {
+  margin-left: 340px;
 }
-.offset11 {
-  margin-left: 900px;
+.offset3 {
+  margin-left: 260px;
 }
-.offset12 {
-  margin-left: 980px;
+.offset2 {
+  margin-left: 180px;
+}
+.offset1 {
+  margin-left: 100px;
 }
 .row-fluid {
   width: 100%;
@@ -239,41 +239,41 @@ a:hover {
 .row-fluid > [class*="span"]:first-child {
   margin-left: 0;
 }
-.row-fluid > .span1 {
-  width: 6.382978723%;
-}
-.row-fluid > .span2 {
-  width: 14.89361702%;
+.row-fluid > .span12 {
+  width: 99.99999998999999%;
 }
-.row-fluid > .span3 {
-  width: 23.404255317%;
+.row-fluid .span11 {
+  width: 91.489361693%;
 }
-.row-fluid > .span4 {
-  width: 31.914893614%;
+.row-fluid .span10 {
+  width: 82.97872339599999%;
 }
-.row-fluid > .span5 {
-  width: 40.425531911%;
+.row-fluid .span9 {
+  width: 74.468085099%;
 }
-.row-fluid > .span6 {
-  width: 48.93617020799999%;
+.row-fluid .span8 {
+  width: 65.95744680199999%;
 }
-.row-fluid > .span7 {
+.row-fluid .span7 {
   width: 57.446808505%;
 }
-.row-fluid > .span8 {
-  width: 65.95744680199999%;
+.row-fluid .span6 {
+  width: 48.93617020799999%;
 }
-.row-fluid > .span9 {
-  width: 74.468085099%;
+.row-fluid .span5 {
+  width: 40.425531911%;
 }
-.row-fluid > .span10 {
-  width: 82.97872339599999%;
+.row-fluid .span4 {
+  width: 31.914893614%;
 }
-.row-fluid > .span11 {
-  width: 91.489361693%;
+.row-fluid .span3 {
+  width: 23.404255317%;
 }
-.row-fluid > .span12 {
-  width: 99.99999998999999%;
+.row-fluid .span2 {
+  width: 14.89361702%;
+}
+.row-fluid .span1 {
+  width: 6.382978723%;
 }
 .container {
   margin-left: auto;
@@ -767,65 +767,65 @@ 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 {
+  width: 930px;
 }
-input > .span3,
-textarea > .span3,
-.uneditable-input > .span3 {
-  width: 210px;
+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 {
+  width: 770px;
 }
-input > .span5,
-textarea > .span5,
-.uneditable-input > .span5 {
-  width: 370px;
+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 {
+  width: 610px;
 }
-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 {
+  width: 450px;
 }
-input > .span9,
-textarea > .span9,
-.uneditable-input > .span9 {
-  width: 690px;
+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 {
+  width: 290px;
 }
-input > .span11,
-textarea > .span11,
-.uneditable-input > .span11 {
-  width: 850px;
+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 {
+  width: 130px;
+}
+input .span1,
+textarea .span1,
+.uneditable-input .span1 {
+  width: 50px;
 }
 input[disabled],
 select[disabled],
@@ -2880,7 +2880,7 @@ input[type="submit"].btn.btn-small {
 .navbar-search .search-query :-moz-placeholder {
   color: #eeeeee;
 }
-.navbar-search .search-query::-webkit-input-placeholder {
+.navbar-search .search-query ::-webkit-input-placeholder {
   color: #eeeeee;
 }
 .navbar-search .search-query:hover {