susy, media queries, and lt IE9 [closed]

Question

I was wondering what (if any) shims you use to get the magic grids to respond correctly in SUSY in IE8 and under?

On non-susy sites I've always used moderizr or the shim from google and they worked as expected. I'm working on my first SUSY site and the media queries for the largest size won't kick in.

http://dev.apehangar.com

Answer 1

It's not clear to me what sort of "shim" you are looking for. I don't know any good way to make MQs work in IE8, but Susy does have an option to output styles under a fallback class. Those styles wont respond dynamically, but you can use it to send IE a desktop site:

.page {
  width: 20em;
  @include at-breakpoint(30em 12 no-mediaqueries) {
    width: 70em;
  }
}

Will output:

.page { width: 20em; }
@media (min-width: 30em) { .page { width: 70em; } }
.no-mediaqueries .page { width: 70em; }

You can replace "no-mediaqueries" with any fallback class you want. Just make sure that class is applied using Modernizr or IE conditional comments.