Last active
December 23, 2015 08:09
-
-
Save Celleb/6605909 to your computer and use it in GitHub Desktop.
Fixes grid layout problems for zurb foundation 4 for internet explorer 8 and 7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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 */ | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "columnfix"; | |
| .lt-ie9 { | |
| @include columnFix; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
@chriskobar, I might not have understood your question, but IE8 and below does not support the grid layout, and the mixin above allows them to support the grid system
New update for column centering support in ie8 and below
syntax: centered-{column number} i.e:
I have no experience with Mixins or SASS/LESS, and unfortunately, I have had no luck getting the IE8 CSS grid that Zurb and others provided that @chriskobar mentioned above, therefore, how would I go about making this work? Any help would be greatly appreciated.
if you want the css version then try this https://gist.github.com/hatefulcrawdad/5068210
Add the following to support offsets:
// Offsets
.large-offset-#{$i} { margin-left: ($i/$columns)*100%; }
Thanx
Can I create a 24-column layout with this mixin simply by changing the value of 12 into 24 in line 2?
push & pulls doesn't seem to work for now.
Yes you can do that
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Does this replace the IE8 CSS grid stuff that Zurb provided and others added-to?