csswizardry-grids-ie7-polyfill

This polyfill will allow the CSS Wizardry Grid to run in IE7.

This polyfill was heavily influenced and uses code modified from the box-sizing-polyfill.js project. More info about the box-sizing-polyfill plugin can be found at:

https://github.com/Schepp/box-sizing-polyfill

In order to get this to work in the CSSWizardyGrid you will need to modify the SASS code for the grid__item so that the display attribute uses an inline-block mixin to be able to approximate an inline-block display type in ie7.

Use your own inline block mixin or you can use the one I usually use which is as follows:

@mixin inline-block($minHeight: null) {
    display:inline-block;
    *zoom:1;
    *display:inline;
    @if $minHeight != null {
        *min-height: $minHeight;
        _height: $minHeight;
    }
}

Using the above mixin, you would rewrite the grid__item as follows:

#{$class-type}grid__item{
    @include inline-block;          /* [1] */
    padding-left:$gutter;           /* [2] */
    vertical-align:top;             /* [3] */
    @if $mobile-first == true{
        width:100%;                 /* [4] */
    }
    -webkit-box-sizing:border-box;  /* [5] */
       -moz-box-sizing:border-box;  /* [5] */
            box-sizing:border-box;  /* [5] */
    @if $use-markup-fix != true{
        letter-spacing:normal;
        word-spacing:normal;
    }
}

To use this polyfill, you simply need to include the following on the page after the jQuery include:

<!--[if IE 7]>
    <script type="text/javascript" src="csswizardy-grids-ie7-polyfill.js"></script>
<![endif]-->

Including this polyfill, along with updating the SASS for the display property of the grid__item using the inline-block mixin will add ie7 support to the CssWizardryGrid.