bencallahan

@media (max-width: 1000px) {

  html:root {
      min-width: 100%;
  }
  
  .block, .inner-col {
      width: 90%;
      margin-left: 5%;

bencallahan

<p>President of <a href="http://seesparkbox.com/">Sparkbox</a> and founder of the <a href="http://buildright.io/">Build Right workshop series</a>, Ben shares his ideas about the web on the <a href="http://seesparkbox.com/foundry/">Sparkbox Foundry</a> and other <a href="http://webstandardssherpa.com/about/authors/ben-callahan">leading</a> <a href="http://www.creativebloq.com/business/what-responsive-web-design-means-team-organisation-11410353">industry</a> <a href="http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/">blogs</a>. He’s incredibly grateful for the <a href="http://seesparkbox.com/team">team</a> at Sparkbox as they pioneer new responsive web design techniques and he continues to push for great user experiences outside the context of specific devices. You can find him <a href="http://uxim14.uie.com/workshops/ben-callahan">speaking</a> <a href="http://schedule.sxsw.com/2014/events/event_IAP20315">around</a> <a href="http://frontenddesignconference.com/portland"

bencallahan

// mq.scss
// For user agents that support media queries
@import "my-media-mq"; // where my-base and my-media are defined
@import "styles";


// nomq.scss
// For user agents that don't support media queries
@import "my-media-nomq"; // where my-base and my-media are defined
@import "styles";

bencallahan

// _styles.scss

// all styles not in media queries are served through "my-base"
@include my-base {
  header, section, aside, footer {
    background-color: #ddd;
    margin: 1em 5%;
    padding: 1em 5%;
    width: 80%;
    float: left;

bencallahan

// _my-media-nomq.scss

@mixin my-base {
  // never serve the base styles to old IE
  // (it will already receive this in mq.css)
  // note, SCSS won't compile unless you use @content
  @if false {
    @content;
  }
}

bencallahan

// _my-media-mq.scss
@mixin my-base {
  // just pass the content through
  @content;
}

@mixin my-media($theQuery, $serveToOldIE: true) {
  // interpret the media query passed in
  // and wrap the content in that query
  @media #{$theQuery} {

bencallahan

<link rel="stylesheet" media="screen, projection, tv" href="c/mq.css">

bencallahan

<link rel="stylesheet" href="c/base.css">
<link rel="stylesheet" media="not print, braille, embossed, speech, tty" href="c/mq.css">

<!--[if (lte IE 8)&(!IEMobile)]>
<link rel="stylesheet" media="screen" href="c/nomq.css">
<![endif]-->

bencallahan

/* mq.css */

@media (min-width: 30em) {
   div.column {
      width: 50%;
   }
}

@media (min-width: 60em) {
   div.column {

bencallahan

/* basic.css */

div.column {
   width: 100%;
}

@media print {
   nav, video {
      display: none;
   }