Foundation Zurb Grid 4/5 in IE7 & IE8.

_lt-ie9-foundation-grid.scss

@charset "UTF-8";
/*---------------------------------------------------------------
	IE78 - Zurb Foundation 4 Grid
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ

	https://gist.github.com/replete/7082477

	(an enhanced fork of https://gist.github.com/zurbchris/5068210 )
	
	1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)
	2) Make sure $small-screen-px = your minimum large breakpoint row width (e.g. 768px)
	3) IE7 will need box-sizing polyfill, see my fix here: https://gist.github.com/replete/7082518
	
	-@replete

˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/


/* The Grid ---------------------- */
$half-gutter-px: $column-gutter-px / 2;
.row { width: $row-width-px; max-width: 100%; min-width: $small-screen-px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
.row.large-collapse .column, 
.row.large-collapse .columns { padding: 0; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
.row .row.large-collapse { margin: 0; }

.column, 
.columns { float: left; min-height: 1px; padding: 0 $half-gutter-px; position: relative; }
.column.large-centered, 
.columns.large-centered { float: none; margin: 0 auto; }

[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }



$i: 1;
@while $i < $total-columns + 1 {

    .large-#{$i},
    .row .large-#{$i} {
    width: ($i/$total-columns)*100%;
    }

    .row .large-offset-#{$i} {
    margin-left: ($i/$total-columns)*100%;
    }

    $i: $i + 1;
}


$j: 2;
@while $j < $total-columns + 1 {

    .pull-#{$j} {
    right: ($j/$total-columns)*100%;
    }

    .push-#{$j} {
    left: ($j/$total-columns)*100%;
    }

    $j: $j + 1;
}
/* Nicolas Gallagher's micro clearfix */
.row { *zoom: 1; }
.row:before, 
.row:after { content: " "; display: table; }
.row:after { clear: both; }



[class*=large-block-grid-] {
margin-left:-$half-gutter-px;
margin-right:-$half-gutter-px;
}

/* LARGE Block Grids */
.large-block-grid-2 {
list-style: none
}

.large-block-grid-2 > li {
float: left;
width: 50%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-2 > li:first-child+li {
float: right
}

.large-block-grid-2 > li:first-child+li+li {
clear: both
}

.large-block-grid-3 {
list-style: none
}

.large-block-grid-3 > li {
float: left;
width: 33.3333%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-3 > li:first-child+li+li {
float: right
}

.large-block-grid-3 > li:first-child+li+li+li {
clear: both
}

.large-block-grid-4 {
list-style: none
}

.large-block-grid-4 > li {
float: left;
width: 25%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-4 > li:first-child+li+li+li {
float: right
}

.large-block-grid-4 > li:first-child+li+li+li+li {
clear: both
}

.large-block-grid-5 {
list-style: none
}

.large-block-grid-5 > li {
float: left;
width: 20%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-5 > li:first-child+li+li+li+li {
float: right
}

.large-block-grid-5 > li:first-child+li+li+li+li+li {
clear: both
}

.large-block-grid-6 {
list-style: none
}

.large-block-grid-6 > li {
float: left;
width: 16.6667%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-6 > li:first-child+li+li+li+li+li {
float: right
}

.large-block-grid-6 > li:first-child+li+li+li+li+li+li {
clear: both
}

.large-block-grid-7 {
list-style: none
}

.large-block-grid-7 > li {
float: left;
width: 14.2857142%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-7 > li:first-child+li+li+li+li+li+li {
float: right
}

.large-block-grid-7 > li:first-child+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-8 {
list-style: none
}

.large-block-grid-8 > li {
float: left;
width: 12.5%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-8 > li:first-child+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-8 > li:first-child+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-9 {
list-style: none
}

.large-block-grid-9 > li {
float: left;
width: 11.111111%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-10 {
list-style: none
}

.large-block-grid-10 > li {
float: left;
width: 10%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-11 {
list-style: none
}

.large-block-grid-11 > li {
float: left;
width: 9.0909%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-12 {
list-style: none
}

.large-block-grid-12 > li {
float: left;
width: 8.333333%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}

//TODO: Implement above static CSS into sass function, in order to spit out total-columns

// $k: 2;
// @while $k < $total-columns + 1 {

//     .large-block-grid-#{$k} {
//     list-style:none;
//     }

//     .large-block-grid-#{$k} {
//     list-style:none;
//     }

//     .push-#{$k} {
//     left: ($k/$total-columns)*100%;
//     }

//     $k: $k + 1;
// }

Hi Shazbat4 - you must be right, Phil's doing something funky somewhere, probably working around a Rem bug. I got rid of "-px" on all the variables. I've only tested for five minutes, but it seems to work with IE8. Just wondering if we can get F5's js working with IE8, or F4 is the best we can do.

Hope all's well, Phil, thanks for the gist. If you're ever in London we could get a beer.

-Wilf