mozilla/bedrock — pull request #165 by craigcook (2012-06-14 11:33:56+00:00)
Title: Basic responsive grid

This is a work in progress but it's a good enough start.

Having two grids means we need to declare two sets of variables, and it means some things don't translate across grids. We've lost the class="span3 offset1" stuff because spanning 3 columns means something very different in a 5 column grid. That means anywhere we're currently using those classes to indicate column spans and offsets in the HTML, we'll instead have to select those elements and use the .span(*) and .offset(*) mixins. Slightly less convenient, but it eliminates presentational classes so it's a win in my book :D

We're still assuming large windows by default (this isn't a mobile-first approach at this point) and at mobile sizes we switch to using the .span_mobile(*) and .offset_mobile(*) mixins to handle the different column. It's a bit crude but I see no way around it if we want to maintain two different grids.

Because we've gone fluid we don't actually need a different grid at tablet width; it's still 12 columns and the columns are just naturally narrower. However, as we're building individual pages we may find ourselves needing to style things differently at tablet width, depending on the content and design, so we'll probably need that breakpoint after all.

To responsify a page just reference the responsive versions of the .less files (sandstone-resp.less, variables-resp.less, and mixins-resp.less). It's kind of a hack but seemed the simplest temporary way to avoid breaking other pages. Maybe there's a better way. We could also take this opportunity to consolidate variables and mixins into one file, since I think they're always used together anyway.

Still to do:
* Menu
* Browser testing (including IE7)
* General tidying