Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/francoisromain/postcss-grid-fluid
A PostCSS plugin to create fluid grids.
https://github.com/francoisromain/postcss-grid-fluid
css flexbox float grid-system postcss postcss-plugin
Last synced: about 1 month ago
JSON representation
A PostCSS plugin to create fluid grids.
- Host: GitHub
- URL: https://github.com/francoisromain/postcss-grid-fluid
- Owner: francoisromain
- License: mit
- Created: 2016-04-21T14:59:42.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T04:33:17.000Z (almost 2 years ago)
- Last Synced: 2024-12-17T19:23:39.418Z (about 1 month ago)
- Topics: css, flexbox, float, grid-system, postcss, postcss-plugin
- Language: JavaScript
- Homepage: http://francoisromain.github.io/postcss-grid-fluid/
- Size: 1.81 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-grid-fluid
[![npm version][npm-img]][npm] [![Build Status][ci-img]][ci] [![Dependency Status][dep-img]][dep]
[francoisromain.github.io/postcss-grid-fluid](http://francoisromain.github.io/postcss-grid-fluid)
A [PostCSS] plugin to create fluid grids.
[github.io]: http://francoisromain.github.io/postcss-grid-fluid
[postcss]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/francoisromain/postcss-grid-fluid.svg
[ci]: https://travis-ci.org/francoisromain/postcss-grid-fluid
[npm-img]: https://badge.fury.io/js/postcss-grid-fluid.svg
[npm]: https://badge.fury.io/js/postcss-grid-fluid
[dep-img]: https://david-dm.org/francoisromain/postcss-grid-fluid.svg
[dep]: https://david-dm.org/francoisromain/postcss-grid-fluid
---
## Installation
Install the [npm package](https://www.npmjs.com/package/postcss-grid-fluid):
```bash
npm install postcss postcss-grid-fluid --save-dev
```
Require the PostCSS plugin:
```js
postcss([require('postcss-grid-fluid')]);
```
See [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts…
---
## Configuration (optional)
#### Option 1: In javascript
```javascript
{
width: 1, /* width/total of one blob integer if there is a _total_ or a float smaller than 1. */
gutter: 0, /* width of the gutter */
display: 'flex' /* 'float' or 'flex' */
}
```
#### Option 2: in css
```css
@gf {
width: 1; /* width/total of one blob */
gutter: 0; /* width of the gutter */
display: flex; /* float or flex */
}
```
If no configuration, the default value.
---
## Usage
### Rows
`gf: row ([gutter])`
- _gutter_ (optional, default = 0): width of the gutter in `px` or `rem`.
Rows are intended to contain a _blob_. They have a negative right margin.
### Blobs
`gf: blob [width](/[total]) ([gutter]) ([display])`
- _width_: width of the blob. Could be an integer if there is a _total_ or a float smaller than 1.
- _total_ (optional, default = 1): divider of the container width.
- _gutter_ (optional, default = 0): width of the gutter in `px` or `rem`.
- _display_ (optional, default = `flex`): `float` or `flex`.
Example 1: [input](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/01.html), [demo](https://francoisromain.github.io/postcss-grid-fluid/test/01.html)
Example 2: [input](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/dist/02.css), [markup](https://ithub.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/02.html), [demo](https://francoisromain.github.io/postcss-grid-fluid/test/02.html)