https://github.com/area17/postcss-flexgrid
PostCSS helpers for working with a flexible grid
https://github.com/area17/postcss-flexgrid
Last synced: 9 months ago
JSON representation
PostCSS helpers for working with a flexible grid
- Host: GitHub
- URL: https://github.com/area17/postcss-flexgrid
- Owner: area17
- License: mit
- Created: 2015-02-05T11:02:01.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-03-20T15:53:34.000Z (almost 11 years ago)
- Last Synced: 2024-05-21T08:09:06.189Z (over 1 year ago)
- Language: JavaScript
- Size: 210 KB
- Stars: 14
- Watchers: 6
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Flexgrid
[PostCSS](https://github.com/postcss/postcss) helpers for working with a flexible grid. Very early stage, you probably don't want to use this.
## Installation
```console
$ npm install --save-dev postcss-flexgrid
```
## Usage
```js
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var flexgrid = require("postcss-flexgrid")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
var options = {
max_columns: 12, // Number of columns of the grid
column_width: 70, // Width of one column, in pixels
gutter_width: 30, // Width of a gutter, in pixels
};
// process css
var output = postcss()
.use(flexgrid(options))
.process(css)
.css
```
```css
.container {
span: 5;
}
.container .sub-container {
span: 2 of 5;
}
.container .other-sub-container {
span: 3 of 5;
margin-right: 0;
}
```
## [Changelog](CHANGELOG.md)
## [License](LICENSE)