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

This commit is contained in:
Mark Otto 2012-07-07 00:30:43 -07:00
parent 6d447079a4
commit e2336ef02a
5 changed files with 228 additions and 252 deletions

View File

@ -200,8 +200,8 @@
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.564102564%;
*margin-left: 2.510911074638298%;
margin-left: 2.564102564102564%;
*margin-left: 2.5109110747408616%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -214,144 +214,144 @@
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.45299145300001%;
*width: 91.3997999636383%;
width: 91.45299145299145%;
*width: 91.39979996362975%;
}
.row-fluid .span10 {
width: 82.905982906%;
*width: 82.8527914166383%;
width: 82.90598290598291%;
*width: 82.8527914166212%;
}
.row-fluid .span9 {
width: 74.358974359%;
*width: 74.30578286963829%;
width: 74.35897435897436%;
*width: 74.30578286961266%;
}
.row-fluid .span8 {
width: 65.81196581200001%;
*width: 65.7587743226383%;
width: 65.81196581196582%;
*width: 65.75877432260411%;
}
.row-fluid .span7 {
width: 57.264957265%;
*width: 57.2117657756383%;
width: 57.26495726495726%;
*width: 57.21176577559556%;
}
.row-fluid .span6 {
width: 48.717948718%;
*width: 48.6647572286383%;
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
.row-fluid .span5 {
width: 40.170940171000005%;
*width: 40.117748681638304%;
width: 40.17094017094017%;
*width: 40.11774868157847%;
}
.row-fluid .span4 {
width: 31.623931624%;
*width: 31.5707401346383%;
width: 31.623931623931625%;
*width: 31.570740134569924%;
}
.row-fluid .span3 {
width: 23.076923077%;
*width: 23.0237315876383%;
width: 23.076923076923077%;
*width: 23.023731587561375%;
}
.row-fluid .span2 {
width: 14.529914530000001%;
*width: 14.4767230406383%;
width: 14.52991452991453%;
*width: 14.476723040552828%;
}
.row-fluid .span1 {
width: 5.982905983%;
*width: 5.929714493638298%;
width: 5.982905982905983%;
*width: 5.929714493544281%;
}
.row-fluid .offset12 {
margin-left: 105.128205128%;
*margin-left: 105.02182214927659%;
margin-left: 105.12820512820512%;
*margin-left: 105.02182214948171%;
}
.row-fluid .offset12:first-child {
margin-left: 102.564102564%;
*margin-left: 102.45771958527658%;
margin-left: 102.56410256410257%;
*margin-left: 102.45771958537915%;
}
.row-fluid .offset11 {
margin-left: 96.58119658100001%;
*margin-left: 96.4748136022766%;
margin-left: 96.58119658119658%;
*margin-left: 96.47481360247316%;
}
.row-fluid .offset11:first-child {
margin-left: 94.017094017%;
*margin-left: 93.91071103827659%;
margin-left: 94.01709401709402%;
*margin-left: 93.91071103837061%;
}
.row-fluid .offset10 {
margin-left: 88.03418803400001%;
*margin-left: 87.9278050552766%;
margin-left: 88.03418803418803%;
*margin-left: 87.92780505546462%;
}
.row-fluid .offset10:first-child {
margin-left: 85.47008547%;
*margin-left: 85.36370249127658%;
margin-left: 85.47008547008548%;
*margin-left: 85.36370249136206%;
}
.row-fluid .offset9 {
margin-left: 79.487179487%;
*margin-left: 79.38079650827659%;
margin-left: 79.48717948717949%;
*margin-left: 79.38079650845607%;
}
.row-fluid .offset9:first-child {
margin-left: 76.923076923%;
*margin-left: 76.81669394427658%;
margin-left: 76.92307692307693%;
*margin-left: 76.81669394435352%;
}
.row-fluid .offset8 {
margin-left: 70.94017094000002%;
*margin-left: 70.8337879612766%;
margin-left: 70.94017094017094%;
*margin-left: 70.83378796144753%;
}
.row-fluid .offset8:first-child {
margin-left: 68.376068376%;
*margin-left: 68.26968539727659%;
margin-left: 68.37606837606839%;
*margin-left: 68.26968539734497%;
}
.row-fluid .offset7 {
margin-left: 62.393162393%;
*margin-left: 62.286779414276594%;
margin-left: 62.393162393162385%;
*margin-left: 62.28677941443899%;
}
.row-fluid .offset7:first-child {
margin-left: 59.829059829%;
*margin-left: 59.7226768502766%;
margin-left: 59.82905982905982%;
*margin-left: 59.72267685033642%;
}
.row-fluid .offset6 {
margin-left: 53.846153846%;
*margin-left: 53.7397708672766%;
margin-left: 53.84615384615384%;
*margin-left: 53.739770867430444%;
}
.row-fluid .offset6:first-child {
margin-left: 51.282051282000005%;
*margin-left: 51.1756683032766%;
margin-left: 51.28205128205128%;
*margin-left: 51.175668303327875%;
}
.row-fluid .offset5 {
margin-left: 45.299145299%;
*margin-left: 45.1927623202766%;
margin-left: 45.299145299145295%;
*margin-left: 45.1927623204219%;
}
.row-fluid .offset5:first-child {
margin-left: 42.73504273500001%;
*margin-left: 42.628659756276605%;
margin-left: 42.73504273504273%;
*margin-left: 42.62865975631933%;
}
.row-fluid .offset4 {
margin-left: 36.752136752%;
*margin-left: 36.645753773276596%;
margin-left: 36.75213675213675%;
*margin-left: 36.645753773413354%;
}
.row-fluid .offset4:first-child {
margin-left: 34.188034188%;
*margin-left: 34.0816512092766%;
margin-left: 34.18803418803419%;
*margin-left: 34.081651209310785%;
}
.row-fluid .offset3 {
margin-left: 28.205128205%;
*margin-left: 28.0987452262766%;
margin-left: 28.205128205128204%;
*margin-left: 28.0987452264048%;
}
.row-fluid .offset3:first-child {
margin-left: 25.641025641%;
*margin-left: 25.534642662276596%;
margin-left: 25.641025641025642%;
*margin-left: 25.53464266230224%;
}
.row-fluid .offset2 {
margin-left: 19.658119658%;
*margin-left: 19.551736679276598%;
margin-left: 19.65811965811966%;
*margin-left: 19.551736679396257%;
}
.row-fluid .offset2:first-child {
margin-left: 17.094017094%;
*margin-left: 16.9876341152766%;
margin-left: 17.094017094017094%;
*margin-left: 16.98763411529369%;
}
.row-fluid .offset1 {
margin-left: 11.111111111%;
*margin-left: 11.004728132276597%;
margin-left: 11.11111111111111%;
*margin-left: 11.004728132387708%;
}
.row-fluid .offset1:first-child {
margin-left: 8.547008547%;
*margin-left: 8.440625568276596%;
margin-left: 8.547008547008547%;
*margin-left: 8.440625568285142%;
}
input,
textarea,
@ -542,8 +542,8 @@
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.762430939%;
*margin-left: 2.709239449638298%;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -552,148 +552,148 @@
margin-left: 0;
}
.row-fluid .span12 {
width: 99.999999993%;
*width: 99.9468085036383%;
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.436464082%;
*width: 91.38327259263829%;
width: 91.43646408839778%;
*width: 91.38327259903608%;
}
.row-fluid .span10 {
width: 82.87292817100001%;
*width: 82.8197366816383%;
width: 82.87292817679558%;
*width: 82.81973668743387%;
}
.row-fluid .span9 {
width: 74.30939226%;
*width: 74.25620077063829%;
width: 74.30939226519337%;
*width: 74.25620077583166%;
}
.row-fluid .span8 {
width: 65.74585634900001%;
*width: 65.6926648596383%;
width: 65.74585635359117%;
*width: 65.69266486422946%;
}
.row-fluid .span7 {
width: 57.182320438000005%;
*width: 57.129128948638304%;
width: 57.18232044198895%;
*width: 57.12912895262725%;
}
.row-fluid .span6 {
width: 48.618784527%;
*width: 48.5655930376383%;
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
.row-fluid .span5 {
width: 40.055248616%;
*width: 40.0020571266383%;
width: 40.05524861878453%;
*width: 40.00205712942283%;
}
.row-fluid .span4 {
width: 31.491712705%;
*width: 31.4385212156383%;
width: 31.491712707182323%;
*width: 31.43852121782062%;
}
.row-fluid .span3 {
width: 22.928176794%;
*width: 22.874985304638297%;
width: 22.92817679558011%;
*width: 22.87498530621841%;
}
.row-fluid .span2 {
width: 14.364640883%;
*width: 14.311449393638298%;
width: 14.3646408839779%;
*width: 14.311449394616199%;
}
.row-fluid .span1 {
width: 5.801104972%;
*width: 5.747913482638298%;
width: 5.801104972375691%;
*width: 5.747913483013988%;
}
.row-fluid .offset12 {
margin-left: 105.524861871%;
*margin-left: 105.41847889227658%;
margin-left: 105.52486187845304%;
*margin-left: 105.41847889972962%;
}
.row-fluid .offset12:first-child {
margin-left: 102.762430932%;
*margin-left: 102.65604795327658%;
margin-left: 102.76243093922652%;
*margin-left: 102.6560479605031%;
}
.row-fluid .offset11 {
margin-left: 96.96132596%;
*margin-left: 96.85494298127658%;
margin-left: 96.96132596685082%;
*margin-left: 96.8549429881274%;
}
.row-fluid .offset11:first-child {
margin-left: 94.198895021%;
*margin-left: 94.09251204227658%;
margin-left: 94.1988950276243%;
*margin-left: 94.09251204890089%;
}
.row-fluid .offset10 {
margin-left: 88.39779004900001%;
*margin-left: 88.29140707027659%;
margin-left: 88.39779005524862%;
*margin-left: 88.2914070765252%;
}
.row-fluid .offset10:first-child {
margin-left: 85.63535911000001%;
*margin-left: 85.5289761312766%;
margin-left: 85.6353591160221%;
*margin-left: 85.52897613729868%;
}
.row-fluid .offset9 {
margin-left: 79.83425413799999%;
*margin-left: 79.72787115927657%;
margin-left: 79.8342541436464%;
*margin-left: 79.72787116492299%;
}
.row-fluid .offset9:first-child {
margin-left: 77.071823199%;
*margin-left: 76.96544022027658%;
margin-left: 77.07182320441989%;
*margin-left: 76.96544022569647%;
}
.row-fluid .offset8 {
margin-left: 71.270718227%;
*margin-left: 71.16433524827659%;
margin-left: 71.2707182320442%;
*margin-left: 71.16433525332079%;
}
.row-fluid .offset8:first-child {
margin-left: 68.508287288%;
*margin-left: 68.40190430927659%;
margin-left: 68.50828729281768%;
*margin-left: 68.40190431409427%;
}
.row-fluid .offset7 {
margin-left: 62.70718231600001%;
*margin-left: 62.600799337276605%;
margin-left: 62.70718232044199%;
*margin-left: 62.600799341718584%;
}
.row-fluid .offset7:first-child {
margin-left: 59.944751377%;
*margin-left: 59.8383683982766%;
margin-left: 59.94475138121547%;
*margin-left: 59.838368402492065%;
}
.row-fluid .offset6 {
margin-left: 54.143646405000005%;
*margin-left: 54.0372634262766%;
margin-left: 54.14364640883978%;
*margin-left: 54.037263430116376%;
}
.row-fluid .offset6:first-child {
margin-left: 51.381215466%;
*margin-left: 51.2748324872766%;
margin-left: 51.38121546961326%;
*margin-left: 51.27483249088986%;
}
.row-fluid .offset5 {
margin-left: 45.580110494%;
*margin-left: 45.4737275152766%;
margin-left: 45.58011049723757%;
*margin-left: 45.47372751851417%;
}
.row-fluid .offset5:first-child {
margin-left: 42.817679555%;
*margin-left: 42.711296576276595%;
margin-left: 42.81767955801105%;
*margin-left: 42.71129657928765%;
}
.row-fluid .offset4 {
margin-left: 37.016574583%;
*margin-left: 36.9101916042766%;
margin-left: 37.01657458563536%;
*margin-left: 36.91019160691196%;
}
.row-fluid .offset4:first-child {
margin-left: 34.254143644%;
*margin-left: 34.1477606652766%;
margin-left: 34.25414364640884%;
*margin-left: 34.14776066768544%;
}
.row-fluid .offset3 {
margin-left: 28.453038671999998%;
*margin-left: 28.346655693276595%;
margin-left: 28.45303867403315%;
*margin-left: 28.346655695309746%;
}
.row-fluid .offset3:first-child {
margin-left: 25.690607733%;
*margin-left: 25.584224754276597%;
margin-left: 25.69060773480663%;
*margin-left: 25.584224756083227%;
}
.row-fluid .offset2 {
margin-left: 19.889502761%;
*margin-left: 19.783119782276597%;
margin-left: 19.88950276243094%;
*margin-left: 19.783119783707537%;
}
.row-fluid .offset2:first-child {
margin-left: 17.127071822%;
*margin-left: 17.0206888432766%;
margin-left: 17.12707182320442%;
*margin-left: 17.02068884448102%;
}
.row-fluid .offset1 {
margin-left: 11.32596685%;
*margin-left: 11.219583871276598%;
margin-left: 11.32596685082873%;
*margin-left: 11.219583872105325%;
}
.row-fluid .offset1:first-child {
margin-left: 8.563535911%;
*margin-left: 8.457152932276596%;
margin-left: 8.56353591160221%;
*margin-left: 8.457152932878806%;
}
input,
textarea,

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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);