yui/pure — pull request #146 by tilomitra (2013-07-23 19:42:16+00:00)
Title: Revamp Pure Grids

This PR introduces is a pretty big change to how Grids work in Pure.

## Features

* Mobile-first
* Declarative, allowing you to specify how your grid behaves on phones, tablets, and desktops
* Less verbose classnames: changes the grid classnames (`pure-g` => `pure-grid`, `pure-u` => `unit`, no need for `.pure-g-r`)
* Fixes #41 with a `font-size: 0` hack.
* More responsive! Instead of just collapsing to 100% on small screens, you can specify separate behavior for tablets, phones, and desktops.

## The rules

The rules for using the new grid is similar to the old one, with some minor differences:

* Everything must be nested in a `pure-grid` (used to be either a `pure-g` or a `pure-g-r`)
* All elements within a `pure-grid` need to atleast have the classname of `unit` (Same as the old `pure-u`).
* There are 3 types of classnames that you can use: (a) `default-*` which is the default width of an element, `tablet-*` which is the width when viewed on 480px and higher, and `desktop-*` which is the width when viewed at 768px and higher. See below for more info on how these work.

## How it works

The new grid syntax is more simplified and less verbose. Here's how you define the simplest grid. The grid below is a non-responsive grid with two 50% units.

```html

....

....

```

## Responsive Behavior

One of the problems with the current grid system is that it's not really smart when it comes to responsive design. On phones, everything just collapses to 100% width, or stays the same as the desktop version. This new grid helps with that. Suppose you want something that is 25% on desktops, 50% on tablets, and 100% on phones:

```html

....

....

....

....

```

The cool thing here is that you don't have to specify all 3 classnames. You only have to specify a classname when you want something to change. Suppose you have an element that you want to be 50% on phones **and** tablets, and only 20% on desktops:

```html

```

Unlike the old grids, you don't need a `pure-g` for non-responsive elements and a `pure-g-r` for responsive ones. Just use a `pure-grid` for everything.

## Offsets

I also took this time to introduce offsets to grids. You can add offsets through the `offset-*` classname:

```html

default-3-5

offset-1-5

```
## Tested

This has been tested on IE7+, Latest Chrome, Safari, FF, iOS6, Android 4.0.x. The new grids has separate `*widths` and `*margin-left` defined so that it works on old IEs.