ezpz-grid

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

• 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

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.

Changelog

5.0.0 (2024-12-19)

• Removed all deprecated Dart Sass features.
• Is a Sass Module which needs to be imported using the Node.js Package Importer.