twitter/bootstrap — pull request #631 by AgentG (2011-11-14 05:05:25+00:00)
Title: Responsive design

Lots of responsive design updates. First off, converted the grid to be fluid, which is one of the three things needed to qualify as responsive design under Ethan Marcotte's definition. The second is flexible images, which fall outside the scope of Bootstrap, and third is media queries which have been simplified and refactored in this branch.

While not part of the strict definition for responsive design, I've also converted most pixel based measurements to em. If you're like me this may seem repulsive at first. Pixels are easier to visualize and in fixed width layouts the advantages of em are minimal. Yet in every example of using responsive design I've seen Ethan write about, a big part of it involves converting px to em. Once I dove in and gave em a go in responsive designs the strengths became more clear. With em everything is relative to it's parent's font-size. It becomes very easy to just adjust the scale of an entire design in a media query by changing the font-size of the body tag, or of a particular section of the page by adjusting it's container; everything proportionally scales inside.

I used Ethan Marcotte's style of commenting em values. At the end of each line there is a comment with a fraction in it. The format is value/context. So for example, if you have your body tag set to a something equal to 13px (context), and a child heading tag you want to be 16px (the value) the comment would look like // 16/13. This makes it quick and easy to understand what the em value represents in pixel terms. The same commenting style is used on the % values in the grid.

There are a few places I went overboard with em conversions (namely some padding), so I intend to revisit a few areas and see if I just have bad calculations in those places or should have stuck with pixels there.

One goal with all these changes is to make everything look exactly the same when you set the page to the same fixed width the framework started with. A few miscellaneous bugs non-withstanding, it stays true to this goal.

I also added a fractional grid, because they are sexy to to work with when using a fluid grid. The fractional grid is modified version of Nicole Sullivan's OOCSS grid. It's been modified to play nice with Bootstrap's preference of using padding over margins for gutters and other spacing. Curious what you guys will think of it.

There is a new file called grid-test-iframe.html (inside the examples folder) which is handy for getting an overview of how the media queries are playing with the layout.

I wouldn't call this update production ready. There are a few bugs and it hasn't had much browser testing yet (built with Safari). Though I wanted to get it in your hands for feedback and feel its far enough along for the big picture to be apparent.