remove specific values for the fluid grid system and instead use LESS's percentage() function

docs/assets/css/bootstrap.css

@@ -318,8 +318,8 @@ a:hover {
   float: left;
   width: 100%;
   min-height: 28px;
-  margin-left: 2.127659574%;
-  *margin-left: 2.0744680846382977%;
+  margin-left: 2.127659574468085%;
+  *margin-left: 2.074468085106383%;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
@@ -330,183 +330,183 @@ a:hover {
 }
 
 .row-fluid .span12 {
-  width: 99.99999998999999%;
-  *width: 99.94680850063828%;
+  width: 100%;
+  *width: 99.94680851063829%;
 }
 
 .row-fluid .span11 {
-  width: 91.489361693%;
-  *width: 91.4361702036383%;
+  width: 91.48936170212765%;
+  *width: 91.43617021276594%;
 }
 
 .row-fluid .span10 {
-  width: 82.97872339599999%;
-  *width: 82.92553190663828%;
+  width: 82.97872340425532%;
+  *width: 82.92553191489361%;
 }
 
 .row-fluid .span9 {
-  width: 74.468085099%;
-  *width: 74.4148936096383%;
+  width: 74.46808510638297%;
+  *width: 74.41489361702126%;
 }
 
 .row-fluid .span8 {
-  width: 65.95744680199999%;
-  *width: 65.90425531263828%;
+  width: 65.95744680851064%;
+  *width: 65.90425531914893%;
 }
 
 .row-fluid .span7 {
-  width: 57.446808505%;
-  *width: 57.3936170156383%;
+  width: 57.44680851063829%;
+  *width: 57.39361702127659%;
 }
 
 .row-fluid .span6 {
-  width: 48.93617020799999%;
-  *width: 48.88297871863829%;
+  width: 48.93617021276595%;
+  *width: 48.88297872340425%;
 }
 
 .row-fluid .span5 {
-  width: 40.425531911%;
-  *width: 40.3723404216383%;
+  width: 40.42553191489362%;
+  *width: 40.37234042553192%;
 }
 
 .row-fluid .span4 {
-  width: 31.914893614%;
-  *width: 31.8617021246383%;
+  width: 31.914893617021278%;
+  *width: 31.861702127659576%;
 }
 
 .row-fluid .span3 {
-  width: 23.404255317%;
-  *width: 23.3510638276383%;
+  width: 23.404255319148934%;
+  *width: 23.351063829787233%;
 }
 
 .row-fluid .span2 {
-  width: 14.89361702%;
-  *width: 14.8404255306383%;
+  width: 14.893617021276595%;
+  *width: 14.840425531914894%;
 }
 
 .row-fluid .span1 {
-  width: 6.382978723%;
-  *width: 6.329787233638298%;
+  width: 6.382978723404255%;
+  *width: 6.329787234042553%;
 }
 
 .row-fluid .offset12 {
-  margin-left: 104.25531913799999%;
-  *margin-left: 104.14893615927657%;
+  margin-left: 104.25531914893617%;
+  *margin-left: 104.14893617021275%;
 }
 
 .row-fluid .offset12:first-child {
-  margin-left: 102.127659564%;
-  *margin-left: 102.02127658527658%;
+  margin-left: 102.12765957446808%;
+  *margin-left: 102.02127659574467%;
 }
 
 .row-fluid .offset11 {
-  margin-left: 95.744680841%;
-  *margin-left: 95.63829786227659%;
+  margin-left: 95.74468085106382%;
+  *margin-left: 95.6382978723404%;
 }
 
 .row-fluid .offset11:first-child {
-  margin-left: 93.61702126700001%;
-  *margin-left: 93.5106382882766%;
+  margin-left: 93.61702127659574%;
+  *margin-left: 93.51063829787232%;
 }
 
 .row-fluid .offset10 {
-  margin-left: 87.23404254399999%;
-  *margin-left: 87.12765956527657%;
+  margin-left: 87.23404255319149%;
+  *margin-left: 87.12765957446807%;
 }
 
 .row-fluid .offset10:first-child {
-  margin-left: 85.10638297%;
-  *margin-left: 84.99999999127658%;
+  margin-left: 85.1063829787234%;
+  *margin-left: 84.99999999999999%;
 }
 
 .row-fluid .offset9 {
-  margin-left: 78.723404247%;
-  *margin-left: 78.61702126827659%;
+  margin-left: 78.72340425531914%;
+  *margin-left: 78.61702127659572%;
 }
 
 .row-fluid .offset9:first-child {
-  margin-left: 76.59574467300001%;
-  *margin-left: 76.4893616942766%;
+  margin-left: 76.59574468085106%;
+  *margin-left: 76.48936170212764%;
 }
 
 .row-fluid .offset8 {
-  margin-left: 70.21276594999999%;
-  *margin-left: 70.10638297127657%;
+  margin-left: 70.2127659574468%;
+  *margin-left: 70.10638297872339%;
 }
 
 .row-fluid .offset8:first-child {
-  margin-left: 68.085106376%;
-  *margin-left: 67.97872339727658%;
+  margin-left: 68.08510638297872%;
+  *margin-left: 67.9787234042553%;
 }
 
 .row-fluid .offset7 {
-  margin-left: 61.702127653%;
-  *margin-left: 61.595744674276595%;
+  margin-left: 61.70212765957446%;
+  *margin-left: 61.59574468085106%;
 }
 
 .row-fluid .offset7:first-child {
-  margin-left: 59.574468079%;
-  *margin-left: 59.468085100276596%;
+  margin-left: 59.574468085106375%;
+  *margin-left: 59.46808510638297%;
 }
 
 .row-fluid .offset6 {
-  margin-left: 53.19148935599999%;
-  *margin-left: 53.08510637727659%;
+  margin-left: 53.191489361702125%;
+  *margin-left: 53.085106382978715%;
 }
 
 .row-fluid .offset6:first-child {
-  margin-left: 51.06382978199999%;
-  *margin-left: 50.95744680327659%;
+  margin-left: 51.063829787234035%;
+  *margin-left: 50.95744680851063%;
 }
 
 .row-fluid .offset5 {
-  margin-left: 44.680851059%;
-  *margin-left: 44.574468080276596%;
+  margin-left: 44.68085106382979%;
+  *margin-left: 44.57446808510638%;
 }
 
 .row-fluid .offset5:first-child {
-  margin-left: 42.553191485%;
-  *margin-left: 42.4468085062766%;
+  margin-left: 42.5531914893617%;
+  *margin-left: 42.4468085106383%;
 }
 
 .row-fluid .offset4 {
-  margin-left: 36.170212762%;
-  *margin-left: 36.063829783276596%;
+  margin-left: 36.170212765957444%;
+  *margin-left: 36.06382978723405%;
 }
 
 .row-fluid .offset4:first-child {
-  margin-left: 34.042553188%;
-  *margin-left: 33.9361702092766%;
+  margin-left: 34.04255319148936%;
+  *margin-left: 33.93617021276596%;
 }
 
 .row-fluid .offset3 {
-  margin-left: 27.659574465%;
-  *margin-left: 27.553191486276596%;
+  margin-left: 27.659574468085104%;
+  *margin-left: 27.5531914893617%;
 }
 
 .row-fluid .offset3:first-child {
-  margin-left: 25.531914891%;
-  *margin-left: 25.425531912276597%;
+  margin-left: 25.53191489361702%;
+  *margin-left: 25.425531914893618%;
 }
 
 .row-fluid .offset2 {
-  margin-left: 19.148936168%;
-  *margin-left: 19.042553189276596%;
+  margin-left: 19.148936170212764%;
+  *margin-left: 19.04255319148936%;
 }
 
 .row-fluid .offset2:first-child {
-  margin-left: 17.021276594%;
-  *margin-left: 16.914893615276597%;
+  margin-left: 17.02127659574468%;
+  *margin-left: 16.914893617021278%;
 }
 
 .row-fluid .offset1 {
-  margin-left: 10.638297870999999%;
-  *margin-left: 10.531914892276596%;
+  margin-left: 10.638297872340425%;
+  *margin-left: 10.53191489361702%;
 }
 
 .row-fluid .offset1:first-child {
-  margin-left: 8.510638297%;
-  *margin-left: 8.404255318276597%;
+  margin-left: 8.51063829787234%;
+  *margin-left: 8.404255319148938%;
 }
 
 .container {

docs/download.html

@@ -286,19 +286,6 @@
         <input type="text" class="span3" placeholder="42px">
         <label>@gridGutterWidth768</label>
         <input type="text" class="span3" placeholder="20px">
-        <h3>Fluid grid system</h3>
-        <label>@fluidGridColumnWidth</label>
-        <input type="text" class="span3" placeholder="6.382978723%">
-        <label>@fluidGridGutterWidth</label>
-        <input type="text" class="span3" placeholder="2.127659574%">
-        <label>@fluidGridColumnWidth1200</label>
-        <input type="text" class="span3" placeholder="5.982905983%">
-        <label>@fluidGridGutterWidth1200</label>
-        <input type="text" class="span3" placeholder="2.564102564%">
-        <label>@fluidGridColumnWidth768</label>
-        <input type="text" class="span3" placeholder="5.801104972%">
-        <label>@fluidGridGutterWidth768</label>
-        <input type="text" class="span3" placeholder="2.762430939%">
 
         <h3>Typography</h3>
         <label>@sansFontFamily</label>

docs/templates/pages/download.mustache

@@ -209,19 +209,6 @@
         <input type="text" class="span3" placeholder="42px">
         <label>@gridGutterWidth768</label>
         <input type="text" class="span3" placeholder="20px">
-        <h3>{{_i}}Fluid grid system{{/i}}</h3>
-        <label>@fluidGridColumnWidth</label>
-        <input type="text" class="span3" placeholder="6.382978723%">
-        <label>@fluidGridGutterWidth</label>
-        <input type="text" class="span3" placeholder="2.127659574%">
-        <label>@fluidGridColumnWidth1200</label>
-        <input type="text" class="span3" placeholder="5.982905983%">
-        <label>@fluidGridGutterWidth1200</label>
-        <input type="text" class="span3" placeholder="2.564102564%">
-        <label>@fluidGridColumnWidth768</label>
-        <input type="text" class="span3" placeholder="5.801104972%">
-        <label>@fluidGridGutterWidth768</label>
-        <input type="text" class="span3" placeholder="2.762430939%">
 
         <h3>{{_i}}Typography{{/i}}</h3>
         <label>@sansFontFamily</label>

less/variables.less

@@ -213,21 +213,23 @@
 // 1200px min
 @gridColumnWidth1200:     70px;
 @gridGutterWidth1200:     30px;
+@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
 
 // 768px-979px
 @gridColumnWidth768:      42px;
 @gridGutterWidth768:      20px;
+@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
 
 
 // Fluid grid
 // -------------------------
-@fluidGridColumnWidth:    6.382978723%;
-@fluidGridGutterWidth:    2.127659574%;
+@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
 
 // 1200px min
-@fluidGridColumnWidth1200:     5.982905983%;
-@fluidGridGutterWidth1200:     2.564102564%;
+@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
 
 // 768px-979px
-@fluidGridColumnWidth768:      5.801104972%;
-@fluidGridGutterWidth768:      2.762430939%;
+@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);