Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Foundation Zurb Grid 4/5 in IE7 & IE8.
@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;
// }
@shazbat4

This comment has been minimized.

Copy link

commented Nov 18, 2013

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

@DrSuave

This comment has been minimized.

Copy link

commented Feb 10, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.