A Pen by Catherine Farman.

index.html

<div class="content wrap">
  <main>
    <h1>No Media Queries Fallback Stylesheet</h1>
    <h2>Main Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    
  </main>
  <div class="sub">
    <h2>Sub content</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </div>
  <div class="row">
    <h2>A row of content</h2>
      <div class="one-third">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </div>
      <div class="one-third">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </div>
      <div class="one-third-last">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </div>
    
  </div>
  <div class="row">
    <h2>Another row of content</h2>
    <div class="one-third">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </div>
    <div class="two-thirds-last">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </div>
  </div>
</div>

No-Media-Queries-Fallback.markdown

No Media Queries Fallback

Sass fallback for browsers that don't support media queries - i.e., IE8 and below.

A Pen by Catherine Farman on CodePen.

License.

script.js

// no polyfills here!
// IE8 just gets all our styles in one separate stylesheet.
// The cascade makes sure it gets the last declared style for each element.
// If you write media queries mobile first, your desktop styles will be what IE8 shows.

// For more details on how to implement check out this blog post: http://cognition.happycog.com/article/fall-back-to-the-cascade

style.scss

@import "compass";
@import 'compass';
// Screen size variables
$small:   480px;
$medium:  600px;
$ipad:    768px;
$large:   960px;
$wide:    1080px;

// are we supporting media queries in this stylehseet?
$supported: true;

// Breakpoint mixin to output media query styles
@mixin breakpoint($media, $support: $supported) {
  @if $support == true {
    @media (min-width: #{$media}) { @content; }
  } 
  @else {
     @content;
  }
}

// below is for the no-media-queries.scss file

// no-media-queries.scss

// $supported: false;

	
// import our styles from our main stylesheet!

//@import main.scss
// end no-media-queries.scss file

@mixin wrap {
  margin: 0 auto;
  padding: 0 16px;
  @include clearfix; 
  @include breakpoint($wide) {
    max-width: 1052px;
  }
}
/* Containers */
// content area wrapper
.wrap {
  @include wrap;
}
// used to contain floats within content area for combining grids
.row {
  @include wrap;
  margin-bottom: 20px;
  clear: both;
  .wrap & {
      padding: 0;
  }
}

/*  Grid Sections */
// Thirds
.one-third {
  @include breakpoint($ipad) {
    width: 31.558935361217%; // 332px/1052px
    float: left;
    margin-right: 2.661596958175%; // 28px/1052
  }
}
.one-third-last {
  @extend .one-third;
  @include breakpoint($ipad) {
    float: right;
    margin-right: 0;
  }
}
.two-thirds {
  @include breakpoint($ipad) {
    width: 65.779467680608%; // 692px/1052px
    float: left;
  }
}
.two-thirds-last {
  @extend .two-thirds;
  @include breakpoint($ipad) {
    float: right;
  }
}
// Layouts using extend
body {
  background: #333;
  font-family: Helvetica, sans-serif;
  h1 {
    font-size: 2em;
  }
  h2 {
  font-size: 1.5em;
  }
}
.content {
  background: #eee;
  border-radius: 6px;
  main {
    @extend .two-thirds;
  }
  .sub {
    @extend .one-third-last;
  }
}