Skip to content

Instantly share code, notes, and snippets.

@zakmac

zakmac/_lt-ie9-foundation-grid.scss

Forked from hatefulcrawdad/ie8-grid-foundation-4.css
Last active August 29, 2015 14:23
Show Gist options
  • Save zakmac/66f910ddfa3b5cc6b404 to your computer and use it in GitHub Desktop.
Save zakmac/66f910ddfa3b5cc6b404 to your computer and use it in GitHub Desktop.
Download ZIP
A SASS 3.2 compatible fix for the Foundation grid system in IE 7/8
Raw
_lt-ie9-foundation-grid.scss
@charset "UTF-8";
/**
IE 7/8 FIX FOR ZURB FOUNDATION 4 GRID
About: A SASS 3.2 compatible fix for the Foundation grid system in IE 7/8
Author: Zak MacDonald <http://github.com/zakmac>
Origin: https://gist.github.com/hatefulcrawdad/5068210
Fork: https://gist.github.com/zakmac/66f910ddfa3b5cc6b404
JSBin: https://jsbin.com/cexuni/edit?css
**/
$z: 1;
$col-width: 100%;
.lt-ie9 {
.row {
margin: 0 auto;
max-width: 100%;
min-width: 768px;
width: 940px;
[class*="column"] + [class*="column"]:last-child {
float: right;
}
[class*="column"] + [class*="column"].end {
float: left;
}
&.large-collapse .column,
&.large-collapse .columns {
padding: 0;
}
.column,
.columns {
float: left;
min-height: 1px;
padding: 0 15px;
position: relative;
&.large-centered {
float: none;
margin: 0 auto;
}
@while $z <= 12 {
$col-width: (100% / 12) * $z;
.large-#{$z} {
width: $col-width;
}
@if $z <= 10 {
.large-offset-#{$z} {
margin-left: $col-width;
}
@if $z >= 2 {
.pull-#{$z} {
right: $col-width;
}
.push-#{$z} {
left: $col-width;
}
}
}
$z: $z + 1;
}
}
.row {
margin: 0 -15px;
max-width: none;
min-width: 0;
width: auto;
&.large-collapse {
margin: 0;
}
}
// Nicolas Gallagher's micro clearfix
& {
*zoom: 1;
&:after,
&:before {
content: " ";
display: table;
}
&:after { clear: both; }
}
} // .row
}
Raw
lt-ie9-foundation-grid.css
/**
IE 7/8 FIX FOR ZURB FOUNDATION 4 GRID
About: A SASS 3.2 compatible fix for the Foundation grid system in IE 7/8
Author: Zak MacDonald <http://github.com/zakmac>
Origin: https://gist.github.com/hatefulcrawdad/5068210
Fork: https://gist.github.com/zakmac/66f910ddfa3b5cc6b404
JSBin: https://jsbin.com/cexuni/edit?css
**/
.lt-ie9 .row {
margin: 0 auto;
max-width: 100%;
min-width: 768px;
width: 940px;
}
.lt-ie9 .row [class*="column"] + [class*="column"]:last-child {
float: right;
}
.lt-ie9 .row [class*="column"] + [class*="column"].end {
float: left;
}
.lt-ie9 .row.large-collapse .column, .lt-ie9 .row.large-collapse .columns {
padding: 0;
}
.lt-ie9 .row .column,
.lt-ie9 .row .columns {
float: left;
min-height: 1px;
padding: 0 15px;
position: relative;
}
.lt-ie9 .row .column.large-centered,
.lt-ie9 .row .columns.large-centered {
float: none;
margin: 0 auto;
}
.lt-ie9 .row .column .large-1,
.lt-ie9 .row .columns .large-1 {
width: 8.33333%;
}
.lt-ie9 .row .column .large-offset-1,
.lt-ie9 .row .columns .large-offset-1 {
margin-left: 8.33333%;
}
.lt-ie9 .row .column .large-2,
.lt-ie9 .row .columns .large-2 {
width: 16.66667%;
}
.lt-ie9 .row .column .large-offset-2,
.lt-ie9 .row .columns .large-offset-2 {
margin-left: 16.66667%;
}
.lt-ie9 .row .column .pull-2,
.lt-ie9 .row .columns .pull-2 {
right: 16.66667%;
}
.lt-ie9 .row .column .push-2,
.lt-ie9 .row .columns .push-2 {
left: 16.66667%;
}
.lt-ie9 .row .column .large-3,
.lt-ie9 .row .columns .large-3 {
width: 25%;
}
.lt-ie9 .row .column .large-offset-3,
.lt-ie9 .row .columns .large-offset-3 {
margin-left: 25%;
}
.lt-ie9 .row .column .pull-3,
.lt-ie9 .row .columns .pull-3 {
right: 25%;
}
.lt-ie9 .row .column .push-3,
.lt-ie9 .row .columns .push-3 {
left: 25%;
}
.lt-ie9 .row .column .large-4,
.lt-ie9 .row .columns .large-4 {
width: 33.33333%;
}
.lt-ie9 .row .column .large-offset-4,
.lt-ie9 .row .columns .large-offset-4 {
margin-left: 33.33333%;
}
.lt-ie9 .row .column .pull-4,
.lt-ie9 .row .columns .pull-4 {
right: 33.33333%;
}
.lt-ie9 .row .column .push-4,
.lt-ie9 .row .columns .push-4 {
left: 33.33333%;
}
.lt-ie9 .row .column .large-5,
.lt-ie9 .row .columns .large-5 {
width: 41.66667%;
}
.lt-ie9 .row .column .large-offset-5,
.lt-ie9 .row .columns .large-offset-5 {
margin-left: 41.66667%;
}
.lt-ie9 .row .column .pull-5,
.lt-ie9 .row .columns .pull-5 {
right: 41.66667%;
}
.lt-ie9 .row .column .push-5,
.lt-ie9 .row .columns .push-5 {
left: 41.66667%;
}
.lt-ie9 .row .column .large-6,
.lt-ie9 .row .columns .large-6 {
width: 50%;
}
.lt-ie9 .row .column .large-offset-6,
.lt-ie9 .row .columns .large-offset-6 {
margin-left: 50%;
}
.lt-ie9 .row .column .pull-6,
.lt-ie9 .row .columns .pull-6 {
right: 50%;
}
.lt-ie9 .row .column .push-6,
.lt-ie9 .row .columns .push-6 {
left: 50%;
}
.lt-ie9 .row .column .large-7,
.lt-ie9 .row .columns .large-7 {
width: 58.33333%;
}
.lt-ie9 .row .column .large-offset-7,
.lt-ie9 .row .columns .large-offset-7 {
margin-left: 58.33333%;
}
.lt-ie9 .row .column .pull-7,
.lt-ie9 .row .columns .pull-7 {
right: 58.33333%;
}
.lt-ie9 .row .column .push-7,
.lt-ie9 .row .columns .push-7 {
left: 58.33333%;
}
.lt-ie9 .row .column .large-8,
.lt-ie9 .row .columns .large-8 {
width: 66.66667%;
}
.lt-ie9 .row .column .large-offset-8,
.lt-ie9 .row .columns .large-offset-8 {
margin-left: 66.66667%;
}
.lt-ie9 .row .column .pull-8,
.lt-ie9 .row .columns .pull-8 {
right: 66.66667%;
}
.lt-ie9 .row .column .push-8,
.lt-ie9 .row .columns .push-8 {
left: 66.66667%;
}
.lt-ie9 .row .column .large-9,
.lt-ie9 .row .columns .large-9 {
width: 75%;
}
.lt-ie9 .row .column .large-offset-9,
.lt-ie9 .row .columns .large-offset-9 {
margin-left: 75%;
}
.lt-ie9 .row .column .pull-9,
.lt-ie9 .row .columns .pull-9 {
right: 75%;
}
.lt-ie9 .row .column .push-9,
.lt-ie9 .row .columns .push-9 {
left: 75%;
}
.lt-ie9 .row .column .large-10,
.lt-ie9 .row .columns .large-10 {
width: 83.33333%;
}
.lt-ie9 .row .column .large-offset-10,
.lt-ie9 .row .columns .large-offset-10 {
margin-left: 83.33333%;
}
.lt-ie9 .row .column .pull-10,
.lt-ie9 .row .columns .pull-10 {
right: 83.33333%;
}
.lt-ie9 .row .column .push-10,
.lt-ie9 .row .columns .push-10 {
left: 83.33333%;
}
.lt-ie9 .row .column .large-11,
.lt-ie9 .row .columns .large-11 {
width: 91.66667%;
}
.lt-ie9 .row .column .large-12,
.lt-ie9 .row .columns .large-12 {
width: 100%;
}
.lt-ie9 .row .row {
margin: 0 -15px;
max-width: none;
min-width: 0;
width: auto;
}
.lt-ie9 .row .row.large-collapse {
margin: 0;
}
.lt-ie9 .row {
*zoom: 1;
}
.lt-ie9 .row:after, .lt-ie9 .row:before {
content: " ";
display: table;
}
.lt-ie9 .row:after {
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment