ezpz-grid

A lightweight Sass (.scss) flexbox grid system that's easy to setup and offers a lot of customisation.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ezpz-grid
1414.0.12 years ago7 years agoMinified + gzip package size for ezpz-grid in KB

Readme

EZPZ Flexbox Grid
dependencies npm 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
  • 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

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.
  • 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.