Created by: drublic
This PR is against the 3.0.0-wip branch.
In #6342 one of the issues still open is the use of the CSS unit rem.
Using rem is supported in all relevant browsers except Internet Explorer 8 and below.
It is fairly easy to write a mixin which provides a pixel-based fallback for properties using rem. I wrote about this some weeks ago but the technique is not exactly new.
This commit adds a simple mixin which calculates a pixel based value for font-sizes based on a provided rem-value. As described in the post, it is possible to interpolate property names and write a rem-fallback for all properties but in this case I sticked to font-size.
Including the mixin in LESS works like this:
.rem-font-size(@size) // while @size is a unit-less numberThe @size-variable is based on the root-font-size of the website – which is 10px in the case of Bootstrap (aka. 62.5%).
This commit also changes all font-sizes from px-based values to the usage of the rem-size fallback.
Later next month (aaaahm– year, decade… whatever) when Bootstrap will drop support for IE8 it is really easy to switch to a rem-only font-size by running a grep|sed with a regex and all.
The thing that bugs be a little about this PR is using of the unit()-function to calculate a proper base font-size for the main elements (which use @font-size-base).
To be honest I would consider rethinking the font-size situation and maybe build the rem values upon the default font-size of 14px (this would mean applying it to the root-element (which is html)).
An advantage at the moment is the calculating of rem-values (which is dividing the px-based font-size by 10). That could be a point against changing the root-font-size.
Well… This is open for discussion and I am willing to update the PR if necessary.