https://github.com/pure-css/rework-pure-grids
Generate custom units for Pure Grids via Rework
https://github.com/pure-css/rework-pure-grids
Last synced: 10 months ago
JSON representation
Generate custom units for Pure Grids via Rework
- Host: GitHub
- URL: https://github.com/pure-css/rework-pure-grids
- Owner: pure-css
- License: other
- Created: 2013-11-15T05:11:50.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2020-05-02T17:40:45.000Z (about 6 years ago)
- Last Synced: 2024-12-11T17:23:08.719Z (over 1 year ago)
- Language: JavaScript
- Size: 36.1 KB
- Stars: 105
- Watchers: 11
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
Rework Pure Grids
=================
Generate custom units for [Pure][] Grids via [Rework][].
[Pure]: http://purecss.io/
[Rework]: https://github.com/visionmedia/rework
Usage
-----
Install Rework and this Rework plugin from npm:
```shell
$ npm i rework rework-pure-grids
```
Create custom media queries for Pure's defaut Grids unit sizes:
```js
var rework = require('rework'),
pureGrids = require('rework-pure-grids');
var css = rework('').use(pureGrids.units({
mediaQueries: {
sm : 'screen and (min-width: 35.5em)',
md : 'screen and (min-width: 48em)',
lg : 'screen and (min-width: 64em)',
xl : 'screen and (min-width: 80em)'
}
})).toString();
```
Or create a customized set unit sizes for Pure Grids:
```js
var rework = require('rework'),
pureGrids = require('rework-pure-grids');
// Creates a 12ths-based Grid.
var css = rework('').use(pureGrids.units(12, {
mediaQueries: {
sm : 'screen and (min-width: 35.5em)',
md : 'screen and (min-width: 48em)',
lg : 'screen and (min-width: 64em)',
xl : 'screen and (min-width: 80em)'
}
})).toString();
```
The new classnames can be added to HTML elements whenever their width should
change at the break-points specified in the `mediaQueries` option above.
```html
Main Content
Side Content
```
License
-------
This software is free to use under the Yahoo! Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.
[LICENSE file]: https://github.com/yahoo/rework-pure-grids/blob/master/LICENSE