vicompany / ezpz-flexbox-grid

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

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.

ezpz-flexbox-grid's Issues

Vertical layout

I've tried .gid--vertical > .cell.cell--6 + .cell.cell--6 and, well, it's still setting width of the cells. I think it's worth to mention in the docs that you have to specify heights yourself :)

Cheers!

Grid wrapping

Make wrapping the default. My opinion is that grid cells should wrap to a new line when there isn't enough space. Just like all other grid systems.

Also the demo does not seem to work on Firefox.

Grid gutter collapsed not working

Because the grid-gutter-expanded mixin (line 383) is generating the wrong class. It's using &#{$breakpoint}collapsed instead of &#{$breakpoint}expanded.

Update the default behaviour demo pages to better reflect the default stretching behaviour of cells

A link on the default demo page is broken

The link points to fractions-default.html but should point to fractions.html

Responsive gutter-collapse examples don't clearly show when gutters are collapsing and expanding

The gutters are indicated by light colored rectangles, but these don't toggle when the css is changed (based on the viewport width).

This can hopefully be made more clear.

When $ezpz-grid-default-content-stretch is left to default, grid breaks on IE10

Hi guys,

When leaving the $ezpz-grid-default-content-stretch to the default setting 'unstretch' the grid will break.

This is happening because IE can't handle '.grid .cell { display: inline; }. Changing this to inline-block seems to work?

Add fraction HTML examples

Fix responsive gutter examples

Using grid wrap is broken in IE11 in the latest version of the grid

_ezpz-flexbox-grid.scss

line number 463

flex-basis: auto;

change to:

flex-basis: 0%;

Create build task

And default /src and /dist folders

Autoprefixer seems to generate a .grid > .cell else { } css selector

This most likely has to do with the if else statement that has been introduced with the align baseline property (#29) on line 486 of _ezpz-flexbox-grid.scss

Content placed within a cell does not automatically scale to the same height as the cell itself.

One of the benefits of flexbox is the fact that elements are aware of the height of sibling flex-items and adjust their height accordingly.

It would be preferred for content placed within a cell to take up the same height as the parent cell to allow for easy equal height columns / boxes within the same row etc.

Use Rawgit for demo

Generate a CSS file in the master branche and use this file, thru RawGit, for the demo (gh-pages branche). This way the demo will always be up to date and we don't need any build scripts in that branche.

Publish on NPM

Method to override flex-grow for direct children of .cell

The grid has the following rule set in which all direct children of a .cell get the flex-grow property. That can be nice for equal height columns, but it's a problem when you don't want that automagic behaviour.

.grid > .cell > * {
    flex-grow: 1;
}

Also, I'd rather not use the universal selector and the .cell doesn't have to be nested within a .grid. Just using the .cell selector reduces the risk of specificity problems.

Collapsed and expanded classes are not working

Add HTML code examples to the demo pages

Make fractions the default behaviour of the grid instead of columns

Optional features: gutter-collapse default is true

The docs states that the optional features are false by default:
http://vicompany.github.io/ezpz-flexbox-grid/optional-features.html

But the optional fueature $ezpz-gutter-collapse is true by default:
https://github.com/vicompany/ezpz-flexbox-grid/blob/master/lib/_ezpz-flexbox-grid.scss#L42

Introduced since #13

Grid class modifier to align items to baseline

The grid has alignment features such as: .grid--align-start and .grid--align-end. An extra class (f.e. .grid--align-baseline) to align items to the baseline would be a welcome enhancement.

Offset

The normal (non breakpoint) classes for offset are not generated by the grid.

.cell--offset-1/4 is not availble but .cell--offset-small-1/4 is.

Mixins

Hello
Nice grid system - however, I was wondering whether you're planning to add some mixins so the grid systems could be used in a more unobtrusive way.

Thanks

Add a config option to disable the default stretch behaviour of cells

When using the collapsed mode, `.grid` should not have margin

When using .grid--collapsed the child .cells have no padding, which is correct. However, the .grid parent still has negative margins to compensate for the padding. This seems incorrect, as the grid is now aligned incorrectly too far to the left/right sides of the screen.

Proposed solution, add:

.grid--collapsed {
	margin-right: 0;
	margin-left: 0;
}

Could be placed after line 426:

https://github.com/vicompany/ezpz-flexbox-grid/blob/master/lib/_ezpz-flexbox-grid.scss#L426

grid--wrap and grid--wrap-reverse modifiers don't work on webkit browsers

Use package from NPM for demo (gh-pages)

Instead of copying the source, just use the latest version from NPM.

Somewhat related to #8.

Unit test our generated CSS

That would be awesome! :)

Direct children of cells automatically occupy the full height of the container, this should be optional through the use of a modifier class

Breaking Change: Slash as Division

See article: https://sass-lang.com/documentation/breaking-changes/slash-div

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

To ease the transition, Sass has begun by adding the math.div() function. The / operator still does division for now, but it also prints a deprecation warning when it does so. Users should switch all division to use math.div() instead.

There are 5 instances where the / is used as a division operation in version 4.0.0 of the ezpz-flexbox-grid system according to my Dart-Sass compiler:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($ezpz-gutter, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
474 │     margin-right: -($ezpz-gutter / 2);
    │                     ^^^^^^^^^^^^^^^^
    ╵
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 474:18  create-grid()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 494:2   generate-full-grid()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 541:3   base()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 593:2   @import
    src/scss/main.scss 23:9                                    root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($ezpz-gutter, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
475 │     margin-left: -($ezpz-gutter / 2);
    │                    ^^^^^^^^^^^^^^^^
    ╵
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 475:17  create-grid()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 494:2   generate-full-grid()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 541:3   base()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 593:2   @import
    src/scss/main.scss 23:9                                    root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($ezpz-gutter, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
490 │     padding: 0 ($ezpz-gutter / 2);
    │                 ^^^^^^^^^^^^^^^^
    ╵
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 490:14  create-grid-cell()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 497:3   generate-full-grid()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 541:3   base()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 593:2   @import
    src/scss/main.scss 23:9                                    root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($key, $val)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
75 │                 @include create-cell($key / $val);
   │                                      ^^^^^^^^^^^
   ╵
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 75:26  create-cells()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 60:2   generate-all-cells()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 543:3  base()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 593:2  @import
    src/scss/main.scss 23:9                                   root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($key, $val)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
271 │                 @include cell-offset($key / $val);
    │                                      ^^^^^^^^^^^
    ╵
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 271:26  cell-fraction-offset()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 252:2   generate-cell-offset()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 563:5   base()
    node_modules/ezpz-grid/lib/_ezpz-flexbox-grid.scss 593:2   @import
    src/scss/main.scss 23:9                                    root stylesheet

.grid--wrap breaks cells in IE11

Using the grid--wrap modifier on a grid, breaks the cell in IE11.

Using flex-wrap: wrap leads to non wrapping content in the cells.
This can be fixed by giving the cell a width.

See:
http://stackoverflow.com/questions/31022747/flexbox-ie11-flex-wrap-wrap-does-not-wrap-images-codepen-inside

Example: http://codepen.io/anon/pen/vXjqYW