From e2336ef02ab620277e2d81f3fc6b4ff69e027ae4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 00:30:43 -0700 Subject: [PATCH] remove specific values for the fluid grid system and instead use LESS's percentage() function --- docs/assets/css/bootstrap-responsive.css | 292 +++++++++++------------ docs/assets/css/bootstrap.css | 148 ++++++------ docs/download.html | 13 - docs/templates/pages/download.mustache | 13 - less/variables.less | 14 +- 5 files changed, 228 insertions(+), 252 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index f052417256..6dbf997b4e 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -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, diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 0a3e863937..3669a3c7a5 100644 --- a/docs/assets/css/bootstrap.css +++ b/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 { diff --git a/docs/download.html b/docs/download.html index 34fdc741ec..ff06ee66da 100644 --- a/docs/download.html +++ b/docs/download.html @@ -286,19 +286,6 @@ -

Fluid grid system

- - - - - - - - - - - -

Typography

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index c839053634..3e1b4eb1eb 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -209,19 +209,6 @@ -

{{_i}}Fluid grid system{{/i}}

- - - - - - - - - - - -

{{_i}}Typography{{/i}}

diff --git a/less/variables.less b/less/variables.less index 09dc554942..4d07f0649d 100644 --- a/less/variables.less +++ b/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);