diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 29fa6ab4c3..502139c251 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 2e2bd33173..47d25b0e8e 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -191,77 +191,77 @@
   .navbar-fixed-bottom .container {
     width: 724px;
   }
-  .span1 {
-    width: 42px;
-  }
-  .span2 {
-    width: 104px;
-  }
-  .span3 {
-    width: 166px;
-  }
-  .span4 {
-    width: 228px;
-  }
-  .span5 {
-    width: 290px;
-  }
-  .span6 {
-    width: 352px;
-  }
-  .span7 {
-    width: 414px;
-  }
-  .span8 {
-    width: 476px;
-  }
-  .span9 {
-    width: 538px;
-  }
-  .span10 {
-    width: 600px;
+  .span12 {
+    width: 724px;
   }
   .span11 {
     width: 662px;
   }
-  .span12 {
-    width: 724px;
+  .span10 {
+    width: 600px;
   }
-  .offset1 {
-    margin-left: 82px;
+  .span9 {
+    width: 538px;
   }
-  .offset2 {
-    margin-left: 144px;
+  .span8 {
+    width: 476px;
   }
-  .offset3 {
-    margin-left: 206px;
+  .span7 {
+    width: 414px;
   }
-  .offset4 {
-    margin-left: 268px;
+  .span6 {
+    width: 352px;
   }
-  .offset5 {
-    margin-left: 330px;
+  .span5 {
+    width: 290px;
   }
-  .offset6 {
-    margin-left: 392px;
+  .span4 {
+    width: 228px;
   }
-  .offset7 {
-    margin-left: 454px;
+  .span3 {
+    width: 166px;
   }
-  .offset8 {
-    margin-left: 516px;
+  .span2 {
+    width: 104px;
   }
-  .offset9 {
-    margin-left: 578px;
+  .span1 {
+    width: 42px;
   }
-  .offset10 {
-    margin-left: 640px;
+  .offset12 {
+    margin-left: 764px;
   }
   .offset11 {
     margin-left: 702px;
   }
-  .offset12 {
-    margin-left: 764px;
+  .offset10 {
+    margin-left: 640px;
+  }
+  .offset9 {
+    margin-left: 578px;
+  }
+  .offset8 {
+    margin-left: 516px;
+  }
+  .offset7 {
+    margin-left: 454px;
+  }
+  .offset6 {
+    margin-left: 392px;
+  }
+  .offset5 {
+    margin-left: 330px;
+  }
+  .offset4 {
+    margin-left: 268px;
+  }
+  .offset3 {
+    margin-left: 206px;
+  }
+  .offset2 {
+    margin-left: 144px;
+  }
+  .offset1 {
+    margin-left: 82px;
   }
   .row-fluid {
     width: 100%;
@@ -282,106 +282,82 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid > .span1 {
-    width: 5.801104972%;
-  }
-  .row-fluid > .span2 {
-    width: 14.364640883%;
-  }
-  .row-fluid > .span3 {
-    width: 22.928176794%;
-  }
-  .row-fluid > .span4 {
-    width: 31.491712705%;
-  }
-  .row-fluid > .span5 {
-    width: 40.055248616%;
-  }
-  .row-fluid > .span6 {
-    width: 48.618784527%;
-  }
-  .row-fluid > .span7 {
-    width: 57.182320438000005%;
-  }
-  .row-fluid > .span8 {
-    width: 65.74585634900001%;
-  }
-  .row-fluid > .span9 {
-    width: 74.30939226%;
-  }
-  .row-fluid > .span10 {
-    width: 82.87292817100001%;
+  .row-fluid > .span12 {
+    width: 99.999999993%;
   }
   .row-fluid > .span11 {
     width: 91.436464082%;
   }
-  .row-fluid > .span12 {
-    width: 99.999999993%;
+  .row-fluid > .span10 {
+    width: 82.87292817100001%;
+  }
+  .row-fluid > .span9 {
+    width: 74.30939226%;
+  }
+  .row-fluid > .span8 {
+    width: 65.74585634900001%;
+  }
+  .row-fluid > .span7 {
+    width: 57.182320438000005%;
+  }
+  .row-fluid > .span6 {
+    width: 48.618784527%;
+  }
+  .row-fluid > .span5 {
+    width: 40.055248616%;
+  }
+  .row-fluid > .span4 {
+    width: 31.491712705%;
+  }
+  .row-fluid > .span3 {
+    width: 22.928176794%;
+  }
+  .row-fluid > .span2 {
+    width: 14.364640883%;
+  }
+  .row-fluid > .span1 {
+    width: 5.801104972%;
   }
   input,
   textarea,
   .uneditable-input {
     margin-left: 0;
   }
-  input.span1,
-  textarea.span1,
-  .uneditable-input.span1 {
-    width: 32px;
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 714px;
   }
-  input.span2,
-  textarea.span2,
-  .uneditable-input.span2 {
-    width: 94px;
-  }
-  input.span3,
-  textarea.span3,
-  .uneditable-input.span3 {
-    width: 156px;
-  }
-  input.span4,
-  textarea.span4,
-  .uneditable-input.span4 {
-    width: 218px;
-  }
-  input.span5,
-  textarea.span5,
-  .uneditable-input.span5 {
-    width: 280px;
-  }
-  input.span6,
-  textarea.span6,
-  .uneditable-input.span6 {
-    width: 342px;
-  }
-  input.span7,
-  textarea.span7,
-  .uneditable-input.span7 {
-    width: 404px;
-  }
-  input.span8,
-  textarea.span8,
-  .uneditable-input.span8 {
-    width: 466px;
-  }
-  input.span9,
-  textarea.span9,
-  .uneditable-input.span9 {
-    width: 528px;
-  }
-  input.span10,
-  textarea.span10,
-  .uneditable-input.span10 {
-    width: 590px;
-  }
-  input.span11,
-  textarea.span11,
-  .uneditable-input.span11 {
+  input.span11, textarea.span11, .uneditable-input.span11 {
     width: 652px;
   }
-  input.span12,
-  textarea.span12,
-  .uneditable-input.span12 {
-    width: 714px;
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 590px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 528px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 466px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 404px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 342px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 280px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 218px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 156px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 94px;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 32px;
   }
 }
 @media (max-width: 979px) {
@@ -520,77 +496,77 @@
   .navbar-fixed-bottom .container {
     width: 1170px;
   }
-  .span1 {
-    width: 70px;
-  }
-  .span2 {
-    width: 170px;
-  }
-  .span3 {
-    width: 270px;
-  }
-  .span4 {
-    width: 370px;
-  }
-  .span5 {
-    width: 470px;
-  }
-  .span6 {
-    width: 570px;
-  }
-  .span7 {
-    width: 670px;
-  }
-  .span8 {
-    width: 770px;
-  }
-  .span9 {
-    width: 870px;
-  }
-  .span10 {
-    width: 970px;
+  .span12 {
+    width: 1170px;
   }
   .span11 {
     width: 1070px;
   }
-  .span12 {
-    width: 1170px;
+  .span10 {
+    width: 970px;
   }
-  .offset1 {
-    margin-left: 130px;
+  .span9 {
+    width: 870px;
   }
-  .offset2 {
-    margin-left: 230px;
+  .span8 {
+    width: 770px;
   }
-  .offset3 {
-    margin-left: 330px;
+  .span7 {
+    width: 670px;
   }
-  .offset4 {
-    margin-left: 430px;
+  .span6 {
+    width: 570px;
   }
-  .offset5 {
-    margin-left: 530px;
+  .span5 {
+    width: 470px;
   }
-  .offset6 {
-    margin-left: 630px;
+  .span4 {
+    width: 370px;
   }
-  .offset7 {
-    margin-left: 730px;
+  .span3 {
+    width: 270px;
   }
-  .offset8 {
-    margin-left: 830px;
+  .span2 {
+    width: 170px;
   }
-  .offset9 {
-    margin-left: 930px;
+  .span1 {
+    width: 70px;
   }
-  .offset10 {
-    margin-left: 1030px;
+  .offset12 {
+    margin-left: 1230px;
   }
   .offset11 {
     margin-left: 1130px;
   }
-  .offset12 {
-    margin-left: 1230px;
+  .offset10 {
+    margin-left: 1030px;
+  }
+  .offset9 {
+    margin-left: 930px;
+  }
+  .offset8 {
+    margin-left: 830px;
+  }
+  .offset7 {
+    margin-left: 730px;
+  }
+  .offset6 {
+    margin-left: 630px;
+  }
+  .offset5 {
+    margin-left: 530px;
+  }
+  .offset4 {
+    margin-left: 430px;
+  }
+  .offset3 {
+    margin-left: 330px;
+  }
+  .offset2 {
+    margin-left: 230px;
+  }
+  .offset1 {
+    margin-left: 130px;
   }
   .row-fluid {
     width: 100%;
@@ -611,106 +587,82 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid > .span1 {
-    width: 5.982905983%;
-  }
-  .row-fluid > .span2 {
-    width: 14.529914530000001%;
-  }
-  .row-fluid > .span3 {
-    width: 23.076923077%;
-  }
-  .row-fluid > .span4 {
-    width: 31.623931624%;
-  }
-  .row-fluid > .span5 {
-    width: 40.170940171000005%;
-  }
-  .row-fluid > .span6 {
-    width: 48.717948718%;
-  }
-  .row-fluid > .span7 {
-    width: 57.264957265%;
-  }
-  .row-fluid > .span8 {
-    width: 65.81196581200001%;
-  }
-  .row-fluid > .span9 {
-    width: 74.358974359%;
-  }
-  .row-fluid > .span10 {
-    width: 82.905982906%;
+  .row-fluid > .span12 {
+    width: 100%;
   }
   .row-fluid > .span11 {
     width: 91.45299145300001%;
   }
-  .row-fluid > .span12 {
-    width: 100%;
+  .row-fluid > .span10 {
+    width: 82.905982906%;
+  }
+  .row-fluid > .span9 {
+    width: 74.358974359%;
+  }
+  .row-fluid > .span8 {
+    width: 65.81196581200001%;
+  }
+  .row-fluid > .span7 {
+    width: 57.264957265%;
+  }
+  .row-fluid > .span6 {
+    width: 48.717948718%;
+  }
+  .row-fluid > .span5 {
+    width: 40.170940171000005%;
+  }
+  .row-fluid > .span4 {
+    width: 31.623931624%;
+  }
+  .row-fluid > .span3 {
+    width: 23.076923077%;
+  }
+  .row-fluid > .span2 {
+    width: 14.529914530000001%;
+  }
+  .row-fluid > .span1 {
+    width: 5.982905983%;
   }
   input,
   textarea,
   .uneditable-input {
     margin-left: 0;
   }
-  input.span1,
-  textarea.span1,
-  .uneditable-input.span1 {
-    width: 60px;
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 1160px;
   }
-  input.span2,
-  textarea.span2,
-  .uneditable-input.span2 {
-    width: 160px;
-  }
-  input.span3,
-  textarea.span3,
-  .uneditable-input.span3 {
-    width: 260px;
-  }
-  input.span4,
-  textarea.span4,
-  .uneditable-input.span4 {
-    width: 360px;
-  }
-  input.span5,
-  textarea.span5,
-  .uneditable-input.span5 {
-    width: 460px;
-  }
-  input.span6,
-  textarea.span6,
-  .uneditable-input.span6 {
-    width: 560px;
-  }
-  input.span7,
-  textarea.span7,
-  .uneditable-input.span7 {
-    width: 660px;
-  }
-  input.span8,
-  textarea.span8,
-  .uneditable-input.span8 {
-    width: 760px;
-  }
-  input.span9,
-  textarea.span9,
-  .uneditable-input.span9 {
-    width: 860px;
-  }
-  input.span10,
-  textarea.span10,
-  .uneditable-input.span10 {
-    width: 960px;
-  }
-  input.span11,
-  textarea.span11,
-  .uneditable-input.span11 {
+  input.span11, textarea.span11, .uneditable-input.span11 {
     width: 1060px;
   }
-  input.span12,
-  textarea.span12,
-  .uneditable-input.span12 {
-    width: 1160px;
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 960px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 860px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 760px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 660px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 560px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 460px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 360px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 260px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 160px;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 60px;
   }
   .thumbnails {
     margin-left: -30px;
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3935581901..74ce8db86e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -148,77 +148,77 @@ a:hover {
 .navbar-fixed-bottom .container {
   width: 940px;
 }
-.span1 {
-  width: 60px;
-}
-.span2 {
-  width: 140px;
-}
-.span3 {
-  width: 220px;
-}
-.span4 {
-  width: 300px;
-}
-.span5 {
-  width: 380px;
-}
-.span6 {
-  width: 460px;
-}
-.span7 {
-  width: 540px;
-}
-.span8 {
-  width: 620px;
-}
-.span9 {
-  width: 700px;
-}
-.span10 {
-  width: 780px;
+.span12 {
+  width: 940px;
 }
 .span11 {
   width: 860px;
 }
-.span12 {
-  width: 940px;
+.span10 {
+  width: 780px;
 }
-.offset1 {
-  margin-left: 100px;
+.span9 {
+  width: 700px;
 }
-.offset2 {
-  margin-left: 180px;
+.span8 {
+  width: 620px;
 }
-.offset3 {
-  margin-left: 260px;
+.span7 {
+  width: 540px;
 }
-.offset4 {
-  margin-left: 340px;
+.span6 {
+  width: 460px;
 }
-.offset5 {
-  margin-left: 420px;
+.span5 {
+  width: 380px;
 }
-.offset6 {
-  margin-left: 500px;
+.span4 {
+  width: 300px;
 }
-.offset7 {
-  margin-left: 580px;
+.span3 {
+  width: 220px;
 }
-.offset8 {
-  margin-left: 660px;
+.span2 {
+  width: 140px;
 }
-.offset9 {
-  margin-left: 740px;
+.span1 {
+  width: 60px;
 }
-.offset10 {
-  margin-left: 820px;
+.offset12 {
+  margin-left: 980px;
 }
 .offset11 {
   margin-left: 900px;
 }
-.offset12 {
-  margin-left: 980px;
+.offset10 {
+  margin-left: 820px;
+}
+.offset9 {
+  margin-left: 740px;
+}
+.offset8 {
+  margin-left: 660px;
+}
+.offset7 {
+  margin-left: 580px;
+}
+.offset6 {
+  margin-left: 500px;
+}
+.offset5 {
+  margin-left: 420px;
+}
+.offset4 {
+  margin-left: 340px;
+}
+.offset3 {
+  margin-left: 260px;
+}
+.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 > .span3 {
-  width: 23.404255317%;
-}
-.row-fluid > .span4 {
-  width: 31.914893614%;
-}
-.row-fluid > .span5 {
-  width: 40.425531911%;
-}
-.row-fluid > .span6 {
-  width: 48.93617020799999%;
-}
-.row-fluid > .span7 {
-  width: 57.446808505%;
-}
-.row-fluid > .span8 {
-  width: 65.95744680199999%;
-}
-.row-fluid > .span9 {
-  width: 74.468085099%;
-}
-.row-fluid > .span10 {
-  width: 82.97872339599999%;
+.row-fluid > .span12 {
+  width: 99.99999998999999%;
 }
 .row-fluid > .span11 {
   width: 91.489361693%;
 }
-.row-fluid > .span12 {
-  width: 99.99999998999999%;
+.row-fluid > .span10 {
+  width: 82.97872339599999%;
+}
+.row-fluid > .span9 {
+  width: 74.468085099%;
+}
+.row-fluid > .span8 {
+  width: 65.95744680199999%;
+}
+.row-fluid > .span7 {
+  width: 57.446808505%;
+}
+.row-fluid > .span6 {
+  width: 48.93617020799999%;
+}
+.row-fluid > .span5 {
+  width: 40.425531911%;
+}
+.row-fluid > .span4 {
+  width: 31.914893614%;
+}
+.row-fluid > .span3 {
+  width: 23.404255317%;
+}
+.row-fluid > .span2 {
+  width: 14.89361702%;
+}
+.row-fluid > .span1 {
+  width: 6.382978723%;
 }
 .container {
   margin-left: auto;
@@ -778,65 +778,41 @@ textarea,
 .uneditable-input {
   margin-left: 0;
 }
-input.span1,
-textarea.span1,
-.uneditable-input.span1 {
-  width: 50px;
+input.span12, textarea.span12, .uneditable-input.span12 {
+  width: 930px;
 }
-input.span2,
-textarea.span2,
-.uneditable-input.span2 {
-  width: 130px;
-}
-input.span3,
-textarea.span3,
-.uneditable-input.span3 {
-  width: 210px;
-}
-input.span4,
-textarea.span4,
-.uneditable-input.span4 {
-  width: 290px;
-}
-input.span5,
-textarea.span5,
-.uneditable-input.span5 {
-  width: 370px;
-}
-input.span6,
-textarea.span6,
-.uneditable-input.span6 {
-  width: 450px;
-}
-input.span7,
-textarea.span7,
-.uneditable-input.span7 {
-  width: 530px;
-}
-input.span8,
-textarea.span8,
-.uneditable-input.span8 {
-  width: 610px;
-}
-input.span9,
-textarea.span9,
-.uneditable-input.span9 {
-  width: 690px;
-}
-input.span10,
-textarea.span10,
-.uneditable-input.span10 {
-  width: 770px;
-}
-input.span11,
-textarea.span11,
-.uneditable-input.span11 {
+input.span11, textarea.span11, .uneditable-input.span11 {
   width: 850px;
 }
-input.span12,
-textarea.span12,
-.uneditable-input.span12 {
-  width: 930px;
+input.span10, textarea.span10, .uneditable-input.span10 {
+  width: 770px;
+}
+input.span9, textarea.span9, .uneditable-input.span9 {
+  width: 690px;
+}
+input.span8, textarea.span8, .uneditable-input.span8 {
+  width: 610px;
+}
+input.span7, textarea.span7, .uneditable-input.span7 {
+  width: 530px;
+}
+input.span6, textarea.span6, .uneditable-input.span6 {
+  width: 450px;
+}
+input.span5, textarea.span5, .uneditable-input.span5 {
+  width: 370px;
+}
+input.span4, textarea.span4, .uneditable-input.span4 {
+  width: 290px;
+}
+input.span3, textarea.span3, .uneditable-input.span3 {
+  width: 210px;
+}
+input.span2, textarea.span2, .uneditable-input.span2 {
+  width: 130px;
+}
+input.span1, textarea.span1, .uneditable-input.span1 {
+  width: 50px;
 }
 input[disabled],
 select[disabled],
@@ -2892,7 +2868,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 {
diff --git a/less/mixins.less b/less/mixins.less
index 814a42b4bb..bba7544528 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -484,14 +484,26 @@
 
   .core (@gridColumnWidth, @gridGutterWidth) {
 
-    .span (@columns) {
-      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+    .spanX (@index) when (@index > 0) {
+      (~".span@{index}") { .span(@index); }
+      .spanX(@index - 1);
     }
+    .spanX (0) {}
+
+    .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);
     }
 
+    .span (@columns) {
+      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+    }
+
     .row {
       margin-left: @gridGutterWidth * -1;
       .clearfix();
@@ -505,38 +517,22 @@
     // Set the container width, and override it for fixed navbars in media queries
     .container,
     .navbar-fixed-top .container,
-    .navbar-fixed-bottom .container { .span(12); }
+    .navbar-fixed-bottom .container { .span(@gridColumns); }
 
-    .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); }
+    // generate .spanX and .offsetX
+    .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 +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
+      .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 +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
+    .spanX (@gridColumns);
+
   }
 
 }