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;
// }

Hey Phil;

Trying to use this gist in my Zurb 4 project, and am getting the following error:

error sass/app.scss (Line 20 of sass/_lt-ie9-foundation-grid.scss: Undefined variable:"$column-gutter-px".)

Is there some other file that is missing that defines this variable?

Any guidance appreciated - thanks!

--Chris

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