Bootstrap 2.3 rem/em

Previously, I wrote about making changes to make Twitter Bootstrap 2.2.2 use rem/em text sizing. It wasn't perfect, but it worked pretty well. Since then, I've done similar analysis and changes to Bootstrap 2.3 (and 2.3.1 since 2.3.1 is JavaScript-only changes).  I've also made some improvements and better addressed some Firefox-specific issues noted in the earlier post.

Changes needed to make Bootstrap 2.3 support rem/em are documented in a spreadsheet as before. Good practice recommends working on a copy of the original Bootstrap LESS so you have the original as a reference (or fallback). A few notes about some differences from the earlier version.

More Comprehensive

This version of the spreadsheet is more comprehensive, listing everywhere that font-size or line-height are set and (I think) everywhere that @baseFontSize and @baseLineHeight are used. Columns A-E identify which file and line are being changed, what element/class/etc. it applies to, the specific property being set, and the original value in Bootstrap 2.3's LESS code. Note that the same line may appear multiple times if it sets values for multiple elements/classes/etc. For example, rows 11-13 all represent the same line.

Column F identifies the value to use with my own typographic scale (based on the golden ratio). Column G identifies changes to column F to get something closer to the original Bootstrap font sizing and line spacing. Note that I haven't tested the Bootstrap scale, but am basing it on the work for Bootstrap 2.2.2. If you have issues, let me know, but it's probably just a matter of choosing a different value on the Bootstrap scale.

Better Handling of Firefox Append/Prepend Issues

Rows 329-349 of the spreadsheet (highlighted yellow) identify a set of changes to forms that add lines to address component sizing for prepend/append components. I have tested on IE9 and the latest versions of Chrome and Firefox (as of this writing) and these changes seem to address the sizing issues in csstests.html (in the tests folder).

Row 349 is a large chunk of CSS specifically to address text positioning for certain prepend/append inputs Firefox and uses @-moz-document url_prefix() to target only Firefox. Try it with and without (in Firefox, of course) to see the difference and you'll understand. This is FF-targeted because it causes issues in Chrome and IE. The padding set seems to work with different base rem multipliers and gets the text on append/prepend submit inputs (among others) to be properly centered. If it doesn't for your specific settings, I recommend fiddling with the values in Firebug. That's how I figured out what worked.

 Mixin for REM with PX Fallbacks

As before, I'm using a mixin called .font-size() to set font sizes. The mixin takes a REM size and generates px fallbacks for certain lame browsers. I use the LESS unit() function to force units to px and rem, regardless of what you pass, but assumes you've passed rem (multiply whatever you pass by 16 to get px). This approach seems much better than what I found in all the px-fallback example LESS on the web and it seems to work. The code for this mixin appears in row 350 of the spreadsheet and below.

// REM/EM FONT-SIZE WITH PX FALLBACK
// assumes 1rem = 16px for fallback
// -------------------------
.font-size(@size){
  font-size:unit(round(@size * 16, 3), px);
  font-size:unit(@size, rem);
}

Other Notes

I'm not 100% sure about the .navbar .brand padding (spreadsheet row 183). It may be slightly off. It's possible padding: 0.45em @baseLineHeight would work better that 0.5em, which is what you'll get when @navbarHeightMultiplier is 2 (value I'm using). Your mileage may vary. Do what you think works best, and let me know what you think is appropriate here. I'm open to suggestions.

I plan to do something similar for Bootstrap 3 and am currently looking at the WIP branch to get a sense of what will be involved. (Maybe we'll be lucky and mdo and fat will decide to make it rem/em by default.)

If there's enough interest, I may set up a pull of BS2.3.1 to incorporate these changes. My git-foo is rather weak, so if you're a github guru and would like to help me figure out a few questions I have about proper management of branches, let me know. Likewise, if BS3 doesn't include rem/em, given enough interest, I may do a pull to apply these changes.

UPDATE: (2 hours later) I noticed I missed .navbar-search .search-form, the one place #font is called with a fixed (px) font-size. I have updated the spreadsheet accordingly. (This will be obviously wrong because the search form in the navbar will use a 13rem font. None of the default Bootstrap tests includes a navbar search form.)