Skip to content

Instantly share code, notes, and snippets.

@Celleb

Celleb/_columnfix.scss

Last active December 23, 2015 08:09
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Celleb/6605909 to your computer and use it in GitHub Desktop.
Save Celleb/6605909 to your computer and use it in GitHub Desktop.
Download ZIP
Fixes grid layout problems for zurb foundation 4 for internet explorer 8 and 7
Raw
_columnfix.scss
/* zurb foundation 4 grid column fix for ie8 and below */
@mixin columnFix($columns: 12){
$i: 1;
@while $i < $columns + 1 {
$colWidth: ($i/$columns)*100%;
$colWidth7: ($i/$columns)*98%;
& .large-#{$i}, & .small-#{$i} {
width: $colWidth;
*width: $colWidth7; //sets the width for ie7
}
/* thanks to pinder */
& .large-offset-#{$i} {
margin-left: ($i/$columns)*100%;
*margin-left: ($i/$columns)*98%;;
}
/* allows centering block elements */
& .centered-#{$i}{
margin-left: (100% - $colWidth)/2;
*margin-left: (98% - $colWidth7)/2;
}
$i: $i + 1;
}
& .columns {
//*padding-left: 1%;
//*padding-right: 1%;
}
& .row .row {
*margin-left: 0; /* fix ie7 margins */
}
}
Raw
app.scss
@import "columnfix";
.lt-ie9 {
@include columnFix;
}
Raw
index.html
<!DOCTYPE html>
<!--[if lte IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<title> Fix </title>
<link rel="stylesheet" href="css/app.css" />
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/vendor/jquery.cycle.all.js">
</head>
<body>
<div id='content' class="row">
<div id='leftPanel' class="large-8 columns left">
<p> 8 columns </p>
</div>
<div id='rightPanel' class='large-4 columns'>
4 columns
</div>
</div>
<div class='row'>
<div class='large-8 large-centered centered-8 columns'>
<p> This division is centered </p>
</div>
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
@Celleb
Copy link
Author

Celleb commented Oct 3, 2013

if you want the css version then try this https://gist.github.com/hatefulcrawdad/5068210

@pinder
Copy link

pinder commented Oct 11, 2013

Add the following to support offsets:

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

@Celleb
Copy link
Author

Celleb commented Nov 1, 2013

Thanx

@pixelliquid
Copy link

Can I create a 24-column layout with this mixin simply by changing the value of 12 into 24 in line 2?

@pixelliquid
Copy link

push & pulls doesn't seem to work for now.

@Celleb
Copy link
Author

Celleb commented Jan 13, 2014

Yes you can do that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment