ezpz-grid
v4.0.1
Published
A lightweight Sass (.scss) flexbox grid system that's easy to setup and offers a lot of customisation.
Downloads
454
Readme
EZPZ Flexbox Grid
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
Demo
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
Build
npm install
npm run build
Get in touch
- 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.