Skip to content

Legacy mode fixes

Choose a tag to compare

@Dan503 Dan503 released this 05 Jul 14:36
· 79 commits to master since this release

This is a small release compared to version 4. It primarily sets out to fix some issues that version 4 had with IE 8 and 9 compatibility. It also brings legacy mode more into alignment with how modern mode behaves.

Breaking changes

  • Grids that have a set of columns defined would previously stretch while wrapping in legacy mode. This was inconsistent behavior to modern mode. In modern mode, grid cells would remain at their column width setting while wrapping. Legacy mode grids now behave consistently with modern mode grids with the exception of wrapping.
  • In general, legacy mode grids will not wrap unless explicitly told to. The exceptions to this rule are grids that have align, space, or vAlign settings applied to them and also grids that have had stretch disabled (grid--noStretch / $stretch: false and grid--noResize/$resize: false). vAlign, space and noStretch will automatically enable wrapping in legacy mode. vAlign will only enable wrapping in legacy mode if a column count has also been set. Previously these exceptions were not consistent in legacy mode between legacy and modern browsers. Using grid--noWrap/$wrap:false can overide this implicit wrapping behaviour to force modern browsers to not wrap. This technique will not prevent IE8 and 9 from wrapping though.

New features

  • You can now use $align: stretch or .grid--align-stretch to apply grid cell stretching instead of $stretch: true and the .grid--stretch class. Don't worry, you can still use $stretch: true and .grid--stretch, it's just an extra option you have available to you now.
  • Added legacy mode backups for vertical cell alignment. These backups will only come into effect though if wrapping is enabled and a column count has been defined.
  • Added a new grid--space-evenly class to the class system and $space: evenly setting to the mixin system. This is the equivalent of justify-content: space-evenly. It features a justify-content: space-around backup for browsers that don't support evenly yet and features an extra center alignment backup when running in legacy mode on browsers that don't support flexbox.