Using Foundation, grunt, and accommodating old IE

This post is about getting to grips with foundation, a responsive framework based on SASS. I’m trying to build in mixins that will allow a default desktop stylesheet to be generated for IE7,8, and a mixin to accommodate IE7’s lack of support for box-sizing.

Soooo. First off, maybe some will wonder why I still need to accommodate IE7,8. Well, most of the sites I do are for government authorities, and many of their users still have windows xp and IE7 (some even still use 6!). However, I also want to give users of modern browsers and smaller devices the best experience possible – hence the decision to experiment with a mobile first framework like foundation.

I followed the guide to get foundation installed using node and libsass. That all went ok apart from an initial error when trying to install it. I found out I had to change my global git settings so that github is accessed via https rather than the git protocol.

Setting up

When looking through the files, everything in the scss/_settings.scss file was commented out. Exploring a bit further, I found that there is a _global.scss file that defines all defaults, and then each component has its own specific variables within the related file. There are a lot of variables, so putting them in the file that they pertain to does help keep things logically structured. The main _settings file, however, allows you to override these settings in one place, so when the project is built, your settings are used over the default ones.

Immediate issues

Reading this blog post about the differences between bootstrap 3 and foundation 5, it becomes apparent that you need to get down and dirty a lot sooner when using foundation. It is built very much with modern browsers in mind, hence no ie7,8 support. Working in a local authority, however, where many pc’s are still on ie7, this isn’t good enough. So, the hunt for support was on.

Media Query fallbacks

IE7,8 don’t support media queries, so that was an immediate issue. I had done some research on a mixin way of getting round this (read about it here), and that seemed good. However, it would involve me re-writing foundation to use this mixin, which wasn’t a prospect I relished.

So, I turned to grunt tasks, of which there are many. It turns out there is a ‘stripmq‘ task which does just what the title implies: strips out the media queries and gives you a desktop fallback stylesheet. Yay. That just saved a whole lot of work.

Fixed width size

One other thing about this is that foundation uses fluid width for everything. For the desktop fallback, I just want a fixed width version. To do that I created another variable in _settings.scss called $desktop-default and set it to 1024px. Then, in the _grids.scss file, I added a little bit to the grid-row mixin right at the end.

.lt-ie9 & {
   width: $desktop-fallback;
}

Then, by using a conditional statement on the html tag to output a class if less than ie9, this value is targeted but only in ie7,8.

REM

Not the band. Foundation uses these as its measure unit (root em). I’m not going into what they are here (read this post to find that out). But, suffice it to say, they’re not supported in IE7,8 (what a surprise). So, turning to grunt again (this is really turning out to be a life-saver), I found rem-to-px. This task goes through an input stylesheet and outputs one where REM’s have been converted to px’s. So, running foundations app.scss through stripmq and rem-to-px results in a desktop version of the site that uses px’s not REM’s. Getting there…

Box sizing

Another hurdle. Things are looking ok for IE8, but IE7 is still not behaving. It doesn’t support box-sizing. So, now what? Well, there seem to be 2 ways of handling this. Introduce another stylesheet that handles only ie7, or try to consolidate ie7 and 8. The second option means that we only need 2 stylesheets (1 for mobile first, one for desktop fallback).

So, the first thing is to change the box-sizing model back to content-box for ie8. This means that ie7 and 8 now render the same way. Then, we need a way to re-calculate the widths and padding values for each element. I’ve looked at doing this with a mixin, but unfortunately, its not that easy. The grunt tasks handle stripping mq’s and conversion of rems to px but this is done after the sass processing task. The mixin I found only works if its getting either px values or percentages (not rem’s). So, I’m thinking now that I could take the ie7 padding mixin and create a grunt task out of it using css-parse and css-stringify tasks respectively.

When I get round to making the plugin I’ll write a separate post about that. Anywho, here’s the final bit of my gruntfile showing the specification and order of tasks…

...
   stripmq: {
        options: {
            width: 1024
        },
        all: {
            files: {
                'css/desktop.css': ['css/app.css']
            }
        }
    },

    "rem-to-px": {
      default_options: {
        options: {
          path_images: 'images/'
        },

        files: {
          'css/desktop.css': ['css/desktop.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-stripmq');
  grunt.loadNpmTasks('grunt-rem-to-px');

  grunt.registerTask('build', ['sass', 'stripmq', 'rem-to-px']);

I think this represents a good solution so far, for a local authority website that still has to cater to older browsers. When we finally drop support for IE7,8, it’ll be a cinch to take out that dependency.

 

 

Leave a Reply