No more hidden overflow!

In Lu Nelson's comment on CSS Tricks, he suggested adding 0.01px of padding rather than using overflow: hidden or 1px of padding. The idea being that 0.01px of padding would get rounded down to 0px in browsers but it should still prevent margin collapse. I tried it out and 0.01px didn't work... but 0.1px did! 😁

Breaking changes

In version 7.0.0, I'm switching to using this 0.1px padding technique on the grid__wrapper element rather than using overflow: hidden. This means that grid__wrapper can now safely be used on elements that need overflow to be visible. This also means that the grid__paddedWrapper class that I added in version 4.1.0 has been made completely redundant.

grid__paddedWrapper hasn't been a part of Gutter Grid for very long so I'm outright removing it in this version. If you have used it in your codebase already and want to update to version 7.0.0, find and replace all instances of grid__paddedWrapper with grid__wrapper.

• The grid__wrapper class now adds padding-bottom: 0.1px; rather than overflow: hidden;
• The grid__paddedWrapper class has been removed from the class system.

New bogus CSS properties added

In this release I have added the following CSS properties to the Gutter Grid elements:

• -gutter-grid-: grid;
• -gutter-grid-: cell;
• -gutter-grid-: inner;

They are meaningless to browsers but they are designed to make it easier for developers to spot elements that are using the Gutter Grid mixin to form their layout.

One of the difficult parts of using the mixin version was trying to figure out what parts of the UI were using Gutter Grid and what parts weren't.

Adding these bogus CSS properties should make it easier to identify elements that are being affected by the Gutter Grid mixin.

I've added the properties to the class system as well. It is a little bit redundant but I think that having the bogus properties on the class system makes it more explicit where the styling is coming from.