Turn off Respond.js by default, use .lt-ie9 rules for IE8 layouts

Well John.
First time using Zen for a little while, and the 7.5 branch is better than ever.

As much as I hate to admit it, IE8 and 7 need something better than respond.js.
I feel that conditional classes are best used to manage small individual 'hacks' rather that layout.
That said, I made use of them in a base them I built for fun.

http://drupalcode.org/project/thor.git/blob/refs/heads/7.x:/sass/layout....

But this method means that all browsers download a lot of CSS they don't need.

So i'm back to thinking that media queries should be used to load the layout stylesheets,
for the browsers that support them,
and IE8 and 7 would load the 'desktop' layout via a conditional comment.

And right on cue
http://jakearchibald.github.com/sass-ie/

+1 for turning off respond.js by default, i really like the method pointed out in the blog post, however I'm not sure whether or not we should load a conditional stylesheet, or use the inline conditional classes to do it. I guess it would be dependent on the actual amount of compiled CSS.

I made a suggestion in #1777912: Exclude ie8 media query that may lead to a solution. Here it is for brevity:

1. Disable respond.js
2.

$ie-layout: true !default;
$ie-layout-breakpoint: 980px;

// This is a standard media query mixin,
// with the option to add a layout for ie8 or lower
// It will bring in all min-width styles without a max constraint
// As well as any styles that meet the 980 threshold. 
@mixin respond-to($min-width, $max-width: false) {
  @media screen and (min-width: $min-width) {
     @if $max-width {
       @media (max-width: $max-width) {
          @content
        }
     } @else {
       @content;
     }
   }
  @if $ie-layout and $min-width <= $ie-layout-breakpoint and (not $max-width or $max-width and $max-width >= $ie-layout-breakpoint) {
    .lt-ie9 & {
      @content;
    }
  }
}

// Here is sample code with the respond-to mixin in place,
// it will add standard mq styles, as well as a lt-ie9 class
// containing the same styles outside of the mq
#main {
  @include zen-grid-container();
  @include respond-to(980px) {
    $zen-column-count: 5;
    .content {
      @include zen-grid-item(3, 2);
    }
    .first-sidebar {
      @include zen-grid-item(1, 1);
    }
    .second-sidebar {
      @include zen-grid-item(1, 5);
    }
  }
}

// This would be ignored and no ie classes would be created. 
  @include respond-to(480px, 979px) {
    $zen-column-count: 2;

    .content {
      @include zen-grid-item(2, 1);
    }
    .first-sidebar {
      @include zen-clear(); // Clear left-floated elements (#content)
      @include zen-grid-item(1, 1);
    }
    .second-sidebar {
      @include zen-grid-item(1, 2);
    }
  }
}

This is based off of the example in https://github.com/nex3/sass/issues/408#issuecomment-6086901 and is not fully tested. Sass 3.2 or later required.

The problem with this solution however is that there is a bug in the '&' selector that does not allow it to be set on base selectors, in order for it to work you need to nest the respond-to mixins inside another selector. (which is why it works here). But it's not a deal breaker.. writing:

#main {
  @include respond-to(980px) {
    margin-left: 2%;
  };
}

Gives the same output as writing this:

@media screen and (min-width: 960px) {
  #main {
    margin-left: 2%;
  }
}

Bug reference: https://github.com/nex3/sass/issues/286

Looks like breakpoint (discussed in #1524542: Add breakpoint mixins after release of Sass 3.2) has put a no-mqs option in the mixin.

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: true;

#foo {
  background: red;
  @include breakpoint(567px, $no-query: '.no-mqs') {
    background: green;
  }
}

And susy has a similar method, which adds the .lt-ie9 class https://github.com/ericam/susy/blob/master/sass/susy/_media.scss

$breakpoint-media-output  : false;
$breakpoint-ie-output     : false;
$breakpoint-raw-output: true;

#page {
  @include at-breakpoint(48em 12 ie8) {
    @include set-container-width;
  }
}

This tip/code cured all my IE/ response.js problems real quick:

.lt-ie9 {
  /* Repeated desktop-sized layout */
}

I recommend anyone using Zen to understand what that little bit of code is all about (see this and then look at the source of Zen to see how Zen implements). Imo, this technique is wayyyy more effective than messing with response.js and/or conditional stylesheets.

What about adding Breakpoint (which has a lot of cool features… ;)) as a requirement and using its built in No Query Fallback tool? https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks