unistyle-flex-grid


Simple Flexbox grid layout system built with Unistyle

Note: This is a work based on scss-flex-grid by Matthew Simo. You can check his demo page to learn how to use the grid while I finish my demo version.

$3

- Responsive, mobile first approach
- Define specific colum size or use a flex column (a column that grows to fill space)
- Define offset to push column a specific number of columns.
- Set your own number of columns!

$3

##### NPM

>_ npm install unistyle-flex-grid --save

``
import flexGrid from 'unistyle-flex-grid';

...

export default = [
flexGrid,
/ your styles here /
];
`

##### Bower

Coming soon...

##### Standalone

You can use the compiled, prefixed, and minified version of unistyle-flex-grid as a standalone CSS downloading the files found in the dist directory of this repository and adding it to your project using the HTML tag.

`

`

$3

- columns: The number of columns you want your grid to be, defaults to 12
- gutter: The gutter width used for each column, defaults to 0.5rem;
- breakpoints: The Flex Grid breakpoints object, binds grid namespaces to media queries. Read more about namespaces in the next section. Defaults to ((xs),(sm,768),(md,992px),(lg,1200px)).

$3

- .row: Flex box container, use this to wrap columns.
- .col-(breakpoint): This creates a column that will grow/shrink depending on available space in the defined breakpoint.
- .col-(breakpoint)-(number): This creates a column that span the specific number of columns in the defined breakpoint. Default valid numbers are 1-12.
- .off-(breakpoint)-(number): This will offset a column by a specific number of columns in the defined breakpoint. Default valid numbers are 1-11.

Valid breakpoints are xs, sm, md, lg. The xs` breakpoint is default and uses no media queries.

$3

- Report bugs by opening a new issue
- If you want to contribute some code open an issue for discussion first.