EZPZ Flexbox Grid
!
dependencies 
A lightweight Sass (.scss) flexbox grid system that's easy to setup and offers a lot of customisation, by
VI Company.
Want to see how it works? Check out the
demo pages and
settings.
Features
* Easy peasy to setup and use
* Works in all
modern browsers & IE11
* IE10 when using
Autoprefixer
* Uses
BEM syntax for grid classes
* Many optional features to reduce CSS bloat
* Define and use fractions
* Infinite nesting
* Create and name your own breakpoints
* Custom namespacing
Documentation
-
Installation
-
Settings
-
CSS usage
-
Mixins usage
Demo
*
Default features
*
Optional features
*
Responsive features
*
Using mixins
What about older browsers?
The aim of the EZPZ Flexbox Grid is to offer an easy to use grid system that takes abundant calculations and classes out of your workflow by leveraging flexbox' "awareness" of available space within a section.
Unfortunately, legacy browsers like IE9 and below do not support the flexbox syntax and won't be able to use these properties. To maintain simplicity, reduce code bloat and in the light of
Microsoft's decision to stop support for IE10 and below, the decision has been made to not support older browsers.
Contributing
$3
``
npm install
npm run build
``
$3
- Bugs / Suggestions:
open an issue
- Twitter:
@vicompany
Credits
* Variable namespacing and the .grid and .cell classes have been inspired by the
Avalanche CSS grid system.
* Multiple cross-browser issues have been resolved through the extremely helpful
Flexbugs repository.
*
A guide to Flexbox by Chris Coyier has been a great resource throughout the development of the EZPZ grid.
* Wes Bos'
What the Flexbox which re-ignited my interest in Flexbox.
* The grid functionality in the example pages has been illustrated through the use of the
Ocean Five color pallete by Designjunkee.
License
The EZPZ Flexbox Grid is licensed under the
MIT License.