twitter/bootstrap — pull request #6801 by drublic (2013-02-05 00:21:07+00:00)
Title: Add rem as default unit for font-sizes, including fallback

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](http://drublic.de/blog/rem-fallback-sass-less/) 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 number

The `@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.