Susy, Media Queries, and Lt Ie9

At-breakpoint fallback causes error

That's a Sass issue, and should be fixed in Sass 3.3 (currently in alpha). In order to set a fallback class, Susy has to use the Sass parent selector (&) — but that selector fails when there is no parent. We've been tracking the issue on GitHub, and you can find a few work-arounds in that thread. Basically, if you use the fallback class (before Sass 3.3), you have to nest at-breakpoint inside another selector. In most cases (including yours) that's a simple as moving the mixin inside your existing selectors:

.l-header,
.l-main,
.l-footer,
.l-region--navigation {
  @include at-breakpoint($desk) {
    @include set-container-width;
  }
}

I am just getting started with susy grid and am trying to figure out responsive part

Your answer is in the source: https://github.com/ericam/susy/blob/master/sass/susy/_media.scss#L23

// Nest a block of code inside a new media-query and layout context.
//
// $media-layout  : a list of values [$min $layout $max $ie] including...
//                : - one unitless number (columns in a layout)
//                : - two optional lengths (min and max-width media-query breakpoints).
//                : - one optional boolean or string to trigger fallback support for IE.
// $font-size     : [optional] The base font-size of your layout, if you are using ems.
//                : - defaults to $base-font-size
@mixin at-breakpoint(
  $media-layout,
  $font-size: $base-font-size
) {
    // stuff
}

It is also in the documentation: http://susy.oddbird.net/guides/reference/#ref-media-layouts

// $media-layout: <min-width> <layout> <max-width> <ie-fallback>;
// - You must supply either <min-width> or <layout>.
$media-layout: 12;          // Use 12-col layout at matching min-width.
$media-layout: 30em;        // At min 30em, use closest fitting layout.
$media-layout: 30em 12;     // At min 30em, use 12-col layout.
$media-layout: 12 60em;     // Use 12 cols up to max 60em.
$media-layout: 30em 60em;   // Between min 30em & max 60em, use closest layout.
$media-layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em.
$media-layout: 60em 12 30em;// Same. Larger length will always be max-width.
$media-layout : 12 lt-ie9;  // Output is included under `.lt-ie9` class,
                            // for use with IE conditional comments
                            // on the <html> tag.

How do you use mobile-first in IE8

Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!

I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go!

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.

You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:

<!--[if lt IE 9]>
  <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]-->

And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.

So my ultimate set of IE 7-8 polyfills looks like 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]-->

Note: don't use IE9.js in combination with those as it will make IE 8 freeze.

Susy, Media Queries, and Lt Ie9

At-breakpoint fallback causes error

I am just getting started with susy grid and am trying to figure out responsive part

How do you use mobile-first in IE8

Related Topics

Leave a reply