vicompany / ezpz-flexbox-grid Goto Github PK

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

Somewhat related to #8.

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

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

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

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

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.

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

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.

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

That would be awesome! :)

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.

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.

_ezpz-flexbox-grid.scss

line number 463

flex-basis: auto;

change to:

flex-basis: 0%;

And default /src and /dist folders

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.

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.

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

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.

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?

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!

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