Make Grids mobile-first

[tilomitra]

Make grids collapse by default, and add in specific widths inside media queries for desktop browsers.

[msweeney]

@tilomitra Can you provide additional details here, such as what problem(s) this solves? Depending on the goals, there are different ways to approach this.

In order to support IE < 9, the default unit sizes need to be applied outside of media queries, so if this is strictly a byte shaver, I'm not sure it buys us much.

Selector matching performance will likely be faster for mobile if media queries can be omitted, however this convolutes legacy support, and should be weighed against the overall complexity.

[msweeney]

I've implemented this in a branch:
https://github.com/msweeney/pure/compare/master...grids-mobile-first

The idea is that responsive layouts default to the narrow view, then use media queries to deliver other layouts. This is handled by adding a grid-units-r module to contain the responsive styling so that the non-responsive version continues to default to the wide view.

Legacy IE (<9) is targeted with a hack that allows those browsers to share the desktop rules rather than defaulting to the narrow view.

I'd like to discuss this a bit more prior to submitting a PR, mainly to clarify exactly what "mobile first" means in this context, and what the explicit goals are.

[ericf]

Interesting hack! I think this seems like the right approach, giving old IE browsers the desktop experience.

Side comment: Thinking of novel solutions to problems like this is something that we would probably not have done if Pure's source was authored with Sass…

[msweeney]

@ericf It does the job as far as literally making grids "mobile first", but I'm not sure what we actually gain from this. Using the hack to target legacy "desktop" complicates customization as it requires users to include the hack in order to override grid styling for legacy IE.

The only pro for "mobile first" grids seems to be that defaulting to the narrow view allows us to move those styles out from behind media queries, which may yield some performance benefits for narrow screens. The cons are a slightly heavier version of grids (minor concern) and the additional complexity for "desktop" layout customization (major concern).

Regarding the SASS tangent: From my view, the novelty of this solution isn't lost in a SASS (slash CSS preprocessor) world. A CSS preprocessor would allow us to centralize the unit sizes, but the hack would still be required output regardless. Additionally, a preprocessor could allow us to encapsulate this hack as a media desktop type helper so that consumers wouldn't be required to include the hack to customize the legacy desktop rules.

That said, I don't think this makes the case for adding a CSS preprocessor dependency. If anything it highlights some issues lurking behind making grids "mobile first".

[tilomitra]

Boom! https://github.com/yui/pure/releases/tag/v0.5.0-rc-1