Menu icon Foundation
Making Foundation 5 work in IE 7 & 8

Alright, I have already started work on creating ways for SASS to output F5 grid in IE.css using Chris Coyier's "Conditional Media Queries Mixin" (http://css-tricks.com/conditional-media-query-mixins/) and Sébastien Axinté "REM to PX Function with SASS" (http://davidwalsh.name/rem-px-browser-function-sass).

See my CodePen for the Example: http://codepen.io/glennphilp/pen/kzimf

Let me explain before everyone starts jumping on my case that Foundation isn't made for old IE. True, I was given the task of building a framework or finding a solution for my company. Of which my company has approximately 14,000 employees that work on Windows 7 with IE 8 in IE 7 compatibility mode. I won't bore you with why I finally choose F5. However, it is now my task of getting it to working on all browsers.

I initially used one suggest of loading Foundation 3 in conditionals and Foundation 5 for all others. This worked for the most part, except still had problems in IE 7. This leads me to today, where I have spent weeks coming up with a SASS solution to make F5 grid output to a IE specific stylesheet. Now I am challenged with getting all the JavaScript to work or writing new scripts that will accomplish the same thing using old jQuery.

I do NOT expect or think that Zurb or any other developers should support IE 7 or 8. However if you are one of us unfortunate front-end architects that has to, I am reaching out to see if you would want to collaborate on updating F5, where needed to make it more IE 7 and 8 friendly.

Currently I have made the following changes:
- replaced the Orbit Slider with SlideMe (http://slideme.luigiferraresi.it/)
- added Conditional Media Queries Mixin
- added REM-to-PX Function with SASS

I think the REM-to-PX function could be incorporated into Foundations rem-convert using an if-else statement, thus making it output all sizes in pixels for IE and REMs for everything else without using a special mixin. The media queries might even be able to be cleaned up using the examples below in resources.

Additional Resources and Thoughts:
http://jakearchibald.github.io/sass-ie/
https://github.com/nex3/sass/issues/408#issuecomment-6086901

ie8ie7fallbacks

Alright, I have already started work on creating ways for SASS to output F5 grid in IE.css using Chris Coyier's "Conditional Media Queries Mixin" (http://css-tricks.com/conditional-media-query-mixins/) and Sébastien Axinté "REM to PX Function with SASS" (http://davidwalsh.name/rem-px-browser-function-sass).

See my CodePen for the Example: http://codepen.io/glennphilp/pen/kzimf

Let me explain before everyone starts jumping on my case that Foundation isn't made for old IE. True, I was given the task of building a framework or finding a solution for my company. Of which my company has approximately 14,000 employees that work on Windows 7 with IE 8 in IE 7 compatibility mode. I won't bore you with why I finally choose F5. However, it is now my task of getting it to working on all browsers.

I initially used one suggest of loading Foundation 3 in conditionals and Foundation 5 for all others. This worked for the most part, except still had problems in IE 7. This leads me to today, where I have spent weeks coming up with a SASS solution to make F5 grid output to a IE specific stylesheet. Now I am challenged with getting all the JavaScript to work or writing new scripts that will accomplish the same thing using old jQuery.

I do NOT expect or think that Zurb or any other developers should support IE 7 or 8. However if you are one of us unfortunate front-end architects that has to, I am reaching out to see if you would want to collaborate on updating F5, where needed to make it more IE 7 and 8 friendly.

Currently I have made the following changes:
- replaced the Orbit Slider with SlideMe (http://slideme.luigiferraresi.it/)
- added Conditional Media Queries Mixin
- added REM-to-PX Function with SASS

I think the REM-to-PX function could be incorporated into Foundations rem-convert using an if-else statement, thus making it output all sizes in pixels for IE and REMs for everything else without using a special mixin. The media queries might even be able to be cleaned up using the examples below in resources.

Additional Resources and Thoughts:
http://jakearchibald.github.io/sass-ie/
https://github.com/nex3/sass/issues/408#issuecomment-6086901

Alexander Assimidis about 5 years ago

Try this

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Glenn Philp about 5 years ago

@Alexander: Thank you for your comment. I did test your suggestion and it unfortunately didn't pass. The site still failed to align correctly and add the appropriate sizes from Foundation.

Glenn Philp about 5 years ago

CORRECTION: IE 8 does see box-sizing

This is how I am setting up my project and what it takes to get my suggestion to work across all of Foundation.

I am trying to figure out how to make rem-calc and px-only a true/false statement instead of 2 separate functions.

Currently I have had to go into each component SCSS file an add the u() function to every section that has a rem-calc. However, in doing so I have learned that if there is a calculation being performed then sometimes it requires u( ( calculation ) ) otherwise it errors out.

The latest discovery is that the tabs won't work in IE 7 and IE 8. I tried to use Foundation 3 tabs in a conditional and then remove the class of "content" from the elements but this too didn't work. As the Foundation 3 and Foundation 5 tabs are setup completely different.

My current setup is
- src
--_scss
---core
----components (my custom components)
----foundation
-----components
---settings
----components (I have split up all Foundation settings into the similar structure of the SCSS files)
----_settings.scss
---themes
---app-ie.scss (this is a copy of the app.scss with $px-only: true; and $media-queries: false; )
---app.scss (the standard app file with $px-only: false; and $media-queries: true;)

CON:
The key is manually updating each of Foundation's components where there is a media-querie wrapping in the @if $media-queries {} @else {}. Then whenever you see a rem-calc() wrapping in u(rem-calc()), sometimes requires u((rem-calc()));

If you ever decide to update to the latest-and-greatest Foundation you would loose all the changes, unless you plan to make a manual comparison and update.

Glenn Philp almost 5 years ago

// @FUNCTION
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
  @if $ie {
    @return (percentage(($colNumber / $totalColumns)) - .1038);
  } @else {
    @return percentage(($colNumber / $totalColumns));
  }
}

Can anyone verify this is a correct function for IE 7? The end goal should be column number divided by total number of columns minus the percentage for padding ($column-gutter) to output a correct grid for IE 7.

Glenn Philp almost 5 years ago

*New $px-only solution for an IE specific stylesheet.

Inside of the _functions.scss find the //Convert to REM should be around line 41. Then update with:

// CONVERT TO UNIT
@function convert-to-unit($value, $base-value: $rem-base)  {
  @if $px-only {
    $value: strip-unit($value) * 1px;
    @if ($value == 0px) { $value: 0; } //Turn 0px into 0
  } @else {
    $value: strip-unit($value) / strip-unit($base-value) * 1rem;
    @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  }
  @return $value;
}

This will tell the rem-calc function to see if the said stylesheet is set to be a px-only or else output REMs.

You will also need to update the REM-CALC function, like so:

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-unit(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-unit(nth($values, $i), $base-value));
  }
  @return $remValues;
}

Dan Zimmerman almost 5 years ago

SASS says (when using your code from the last post):
Syntax error: Incompatible units: 'px' and 'rem'.
on line 158 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in lead'
from line 219 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in
@content'
from line 14 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/../_functions.scss, in `exports'
from line 169 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss
from line 17 of D:\web\www\idealbau.at\v3.0\wp-content\themes\ib-theme\scss\style.scss
Use --trace for backtrace.

Glenn Philp almost 5 years ago

@Dan

Yes, the .lead class in type has a mathmatical caluclation which causes an error. I haven't figured out exactly how to solve the math yet. For a temporary fix I did the following:

@mixin lead {
  @if $px-only {
    font-size: $paragraph-font-size + 3.5;
    line-height: 1.6;
  } else {
    font-size: $paragraph-font-size + 0.21875;
    line-height: 1.6;
  }
}

Glenn Philp almost 5 years ago

@Joshua,

Hey thank you for your input. Although Foundation 3 does play nicely with IE8 and 7 it became apparent that trying to maintain and/or customize two different frameworks was more of a hassle than a solution. This is why I started enhancing Foundation 5, as many of the components already work with jQuery 1.9 which also supports IE8 and 7. And the components like Orbitz I simply replaced with a slider that worked in all browsers.

Since my enhancements I have gotten the grid to work in IE7 and 8 using boxsizing.htc behavior. I have added onto the rem-calc function so that it will output a px-only version for IE. Using custom variables I have output for 5 different stylesheets (mobile, tablet, desktop, responsive, ie) as we use the RESS model at my job for smallest possible CSS for each device and browser fallback.

Next on my agenda is figuring out how to get the grid to work in IE7 mathematically without the HTC file hack, although Microsoft does not see anything wrong with the HTC file.

Dan Zimmerman almost 5 years ago

To me the only real REM solution seems to be this Grunt Library: https://github.com/lohmander/grunt-rem-to-px

I have no idea of Grunt but I guess I have to learn it.

Glenn Philp almost 5 years ago

@Dan, why is the Grunt library the only solution? I haven't tried this REM to PX solution. If it works then by all means. My goal is to enhance and modify Foundation, to make it my own, as it is a framework and anyone using it should do the same to fit their end goals.

My goal for Foundation is to use it for all browsers including IE7 and 8, thus I had to modified the rem-calc() function and tweak some of the components to get a IE only version with px-only.

*Side Note: I actually don't use Foundation out of the box. I have my own Gulp.js setup which I prefer over Grunt. They both have their pluses, it is just the build process I setup and have stuck with.

Jonathan Devine almost 5 years ago

Glenn I appreciate your efforts too. I'm stuck in a situation where many people navigate to our site through older servers that run IE8.

In fact I was initially asked to make Foundation work for IE8 using NO JAVASCRIPT.

Kill me dead. Seriously.

But after some talks they (bosses) came to understand that JS is how backward compatibility is achieved. That said, we're trying to minimize the need.

I'm still implementing your solution, so I'll let you know how it goes.