ericf/rework-pure-grids — pull request #2 by tilomitra (2013-12-18 20:05:58+00:00)
Title: Add media query support to generate mobile-first responsive grid

This pull request makes it possible to generate mobile-first responsive grids using `rework-pure-grids`.

## How to use

There's a new `mediaQuery()` method available in addition to `units()`. It accepts an array of objects. Each object can have the following properties:
* minWidth (string)
* maxWidth (string)
* gridName (string)

Based on the properties supplied, a media query string is created and populated with a grid.

## Example

```js
var rework = require('rework');
var fs = require('fs');
var pureGrids = require('../../');
var gridCss = rework('').use(pureGrids.units(12))
.use(pureGrids.mediaQueries([
{
minWidth: '480px',
gridName: 'med'
},
{
minWidth: '980px',
gridName: 'lrg'
},
{
minWidth: '1200px',
gridName: 'xlrg'
}
])).toString();
```

The generated `gridCss` will [look like this](https://gist.github.com/tilomitra/8028914).

## Fixed a `gridName` bug

I also noticed that the `gridName` option passed into `units()` was not being used anywhere, so I updated the `getSelector()` method with a `gridName` argument. This property is important as the grids need to have different class names for each media query level.

## Added manual tests

I added a simple manual test under `tests/manual/`. Just run `node run.js` and it creates a responsive grid under `grid.css` which can then be tested by opening the included `example.html` file.