Skip to content

Gutter Grid now in mixin flavor!

Choose a tag to compare

View all tags
@Dan503 Dan503 released this 12 Jun 11:58
· 376 commits to master since this release
v2.0.0
dc9fbe5

What's new?

  • Gutter Grid can now be used as a mixin rather than a purely class name based system
  • Gutters can now have different vertical vs horizontal gutter widths
  • Column media queries can now take mq-scss syntax for defining completely custom breakpoints
  • Improved legacy browser support
  • Reduced specificity on class based selectors for easier overriding of styles

Breaking changes

Reduced specificity in class names

If upgrading, none of the class names have changed, however the reduced specificity will mean that you may need to update your styles to not conflict with the new grid system.

New format for assigning column break points

The new format to the column break points is a bit different to the original. before it was a list of screen-sizes then column widths with a space in between each one.

Version 1.x

(
  600px 100%,
)

Column width is now stated first, and screen width is stated second. By default, the screen width will be calculated as a max-width media query. However, you can now provide mq-scss syntax as an alternative to stating a screen width pixel value. This means that you can define the column break points using just about any media query you like. Taking a mobile first min-width approach will break legacy browser support though unless you have UnMQ integrated into your build process.

Version 2.x

(
  100% : 600px, //state a max-width pixel value
  //or
  100% : (max, 600px), //provide a custom mq-scss media query
)

New format for assigning gutter break-points

The new way of assigning breakpoints to gutters isn't much different different to the original method. The only incompatible difference being that now you need to write mq with a space after it before the list of values (the space is vital).

Version 1.x

$grid-cell-gutters: (
    'mediaQueryGutter' : (
        50px,
        30px (max, 800px),
        10px (max, 700px)
    )
);

Version 2.x

$grid-cell-gutters: (
    'mediaQueryGutter' : mq (
        50px,
        30px (max, 800px),
        10px (max, 700px)
    )
);
Assets 2
Loading