ie8-grid-foundation-4.css

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }

.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }

.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }

.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }

.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }

.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }

.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }

.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }

.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }

.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }

.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }

.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }

.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }

.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }

.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }

.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }

/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }

Hello everyone!

WARNING: This is a long article. But I hope you find it helpful and I'm sure my journey mirrors many of yours. I've put a brief summary at the bottom.

One super cool advantage to using an open source tool is that we all help each other! So, my turn to contribute back! When I started rebuilding our templates with the Foundation 4 framework, I knew only a little bit about building css stylesheets and why the heck anyone used div's. Needless to say, I've grown a ton :) Not only do I better understand stylesheets, I came up with a good process for overriding styles, building stylesheets with a pre-processor and how to use the foundation framework with our content management system (CommonSpot... don't run out and buy it. You've been warned :P).

So I was excited when Foundation 4 came out. The buzzword of "mobile-first" got me all excited, even though I didn't really know what it meant. I went full on into using Foundation 4, worked out all the bugs, experimented with different layout options, built some really neat custome elements in out CMS to take advantage of components in Foundation 4 without the user really needing to know anything new. Moved all the templates over from dev into production and then had my first "oh sh*t" moment. We had way more users visiting our pages on IE 7 and 8 than I realized. Check your browser usage before getting started. It will determine whether or not this entire article is worth reading :)

Aside: Now, I have a huge suspicion that Google Analytics is reporting users with IE 8/9/10 in compatibility mode being reported as IE7 or IE8 and so our numbers are artificially inflated. I mean, from a practical standpoint, even Windows XP supports IE8, so why are so many people using IE7?! The other piece to this puzzle is that our PeopleSoft system doesn't play nicely with "real" browsers, so a large number of folks on our campus that are frequent PeopleSoft users are using IE in a compatibility mode. Gross.

Moral of the story? Even if the data being reported is of folks with IE9 (which works GREAT with Foundation 4) with compatibility mode, I still want the website to appear as nicely as possible. So I put my head down and tried to reseach ways to get it working.

Where did I start?

I started with the IE8 grid supplied by zurbchris: https://gist.github.com/zurbchris/5068210 and the wonderful (seriously) comments. From there, I made an IE8 and IE7 grid with some adjustments for IE7 suggested in the comments by @stevehiley. NOTE: I didn't not (as suggested in the documentation) use class="small-x columns", instead I stuck to using large pretty much all the time.

So the modified grid got me close. It at least didn't make the pages look completely stupid. I also added a few block-grid changes for the addresses in my footer.

I also tried polyfills but I don't a) know what those really are b) couldn't get them to work and c) I've heard they can really slow a page down. So that was a bust...

Then, the lights started to go off:

Modernizr - you can generate your own! One of the big issues with IE7/8 support is that they do not support box-sizing, so it's ability to calculate and determine columns widths getts a little hokey. So using the link in the ZURB-provided custom.modernizr.js file, I built a custom package with box-sizing added (http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-testallprops-prefixes-css_boxsizing-ie8compat-load) and added this snippet to the bottom of my document (source:http://www.snackoclock.net/2012/08/simple-box-sizing-border-box-fallback-for-ie/) :

$(function(){
if( !($('html').hasClass('boxsizing')) ){
$('.boxSized, .boxSized *').each(function(){
var fullW = $(this).outerWidth(),
actualW = $(this).width(),
wDiff = fullW - actualW,
newW = actualW - wDiff;

        $(this).css('width',newW);
    });
}

});

Great, now the columns mostly work! Things look even less stuipd!

I then came to a hilarious (but late) realization. We really don't care about any of the mobile styles for IE7/8, since they are only desktop browsers! And since Foundation 4 is mobile first, all of the desktop styles were "hidden" from IE7/8 inside @media queries. So then all I needed to do was get those styles OUT of media queries and into a style sheet only for IE.

I had initially put those IE7/8 grid gists straight into my app-overrides.css, but now that I was getting aggressive only for IE I decided to pull them into their own separate stylesheet (and who wants to load a stylesheet with style that only apply to 8-12% of my visitors?). Using this guide: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Now things were cooking! Everything that seemed to be using mobile styles in IE, I brought over the styles from inside their corresponding media query (making heavy use of Chrome's fabulous Inspector to track everything down).

Then, the top-bar. I was initially content with IE users using the mobile version of the top-bar since well, it did work. But that's not good enough! "What happens if the university president is using IE8?" I thought to myself...

So I came across this gist: https://gist.github.com/tmayr/5190565 and while it did work, it is based off of the default css for the top-bar. Brilliance struck again. All I needed to do was open up my customized scss generated app.css, pull the styles for the top bar from inside the media query, put them into my app-ie.css file and I was in business! Everything was peachy.

Except on IE7, the were some z-index issues in the drop down menu. But there's an easy fix for that too! Since I'm already using jQuery, this snippet: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/ fixed the z-index issues and all was mostly well. I quick change to the ".top-bar-section .dropdown" class to make the background not transparent and IE7's dropdowns looked even better.

tl;dr
Knowing what I know now:

1. Create a separate ie style sheet.

2. Build an ie style sheet from either this gist and the comments in it: https://gist.github.com/zurbchris/5068210

OR

Pull the column styles from inside your main stylesheet under the media queries. Do this instead especially if you are using a preprocessor to generate your stylesheets. Additionally, you do not technically need the .lt-ie9/.lt-ie8 classes provided in the gist if you are using a separate, conditionally loaded IE stylesheet (http://css-tricks.com/snippets/jquery/fixing-ie-z-index/)

3. To fix the top-bar, again pull media-queried styles from your main stylesheet into the IE stylesheet, apply this fix for IE7's z-index (of course, inside conditional statement): http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

4. Continues looking for things that aren't working in your desktop IE site and pull the styles into the conditional IE.css

5. Enjoy the almost-perfectly-functional ZURB Foundation 4 Framework in IE.

6. Help make this even more efficient, possibly with some really cool .scss magic? I don't know scss well enough yet to make this a reality.

My stylesheets (NOTE: app-overrides and app-ie are a little messy right now :-/)
http://ben.edu/style/app.css
http://ben.edu/style/app-overrides.css
http://ben.edu/style/app-ie.css

Some example production pages:
http://ben.edu/marcom/
http://www.ben.edu/pedagogy/
http://www.ben.edu/fa/

A note about testing:
DON'T bother with IE's compatibility mode to test actual IE7/8 browser behavior. Go to http://www.modern.ie/en-us/virtualization-tools and either use BrowserStack or Download the Virtual Machine options (I did the virtual machines, and yes Vista is still a piece of sh*t).

A note about Zepto vs jQuery:
I didn't even bother with Zepto. The trade off doesn't seem to be worth it, especially since it (apparently) doesn't support any version of IE... I'd rather eventually hook into a custom build of jQuery where you only add the components you need, therefore reducing it's file size. Additionally, I'm using Google's jQuery CDN, so there's a good chance that many visitors are able to load a cached copy of jQuery. So this is a personal choice, seems to me that Zepto is a little more trouble than it's worth for me.

At the end of the day, it really wasn't all THAT hard to make IE7/8 work. Please ask questions and I'll try and help as best I can. And if you've got more efficient suggests, I'm all ears!

Whew,
Kevin Sherman