bencallahan · May 2, 2012 20:25 · bencallahan · May 3, 2012
diff --git a/readme.html b/readme.html
 <!--
 This is a series of gists comparing options for how to load CSS for a large
 responsive retrofit. The requirements for this are as follows:

 1.  limit to one http request for CSS
 2.  keep the size of this CSS request as minimal as possible
 3.  serve only the original CSS to large resolutions (>= 980)
 4.  serve only the new "responsive" CSS to smaller resolutions (< 980)
 5.  serve only the original CSS to browsers that don't support media queries

 Because this is a retrofit, we're not touching the original CSS. So, smaller
 screen devices will have unique CSS. We can't touch the original CSS files,
 so we need to do this in a way that keeps these mutually exclusive.
 -->
diff --git a/option-2.html b/option-2.html
 <html class="no-mediaquery no-js">
 <head>

 <script src="/js/media-query-check.js">

 <link rel="stylesheet" type="text/css" href="css/styles.css">

 </head>
 </html>
diff --git a/styles.scss b/styles.scss
 /* this is a SCSS file which aggregates the necessary components for all
   screens */

 /* if JavaScript is disabled OR media queries aren't supported */
 .no-mediaquery {
  @import "original";
 }

 @media (max-width: 500px) {
  @import "small";
 }

 @media (max-width: 979px) {
  @import "medium";
 }

 @media (min-width: 980px) {
  @import "original";
 }
	<!--
	This is a series of gists comparing options for how to load CSS for a large
	responsive retrofit. The requirements for this are as follows:

	1. limit to one http request for CSS
	2. keep the size of this CSS request as minimal as possible
	3. serve only the original CSS to large resolutions (>= 980)
	4. serve only the new "responsive" CSS to smaller resolutions (< 980)
	5. serve only the original CSS to browsers that don't support media queries

	Because this is a retrofit, we're not touching the original CSS. So, smaller
	screen devices will have unique CSS. We can't touch the original CSS files,
	so we need to do this in a way that keeps these mutually exclusive.
	-->
	<html class="no-mediaquery no-js">
	<head>

	<script src="/js/media-query-check.js">

	<link rel="stylesheet" type="text/css" href="css/styles.css">

	</head>
	</html>
	/* this is a SCSS file which aggregates the necessary components for all
	screens */

	/* if JavaScript is disabled OR media queries aren't supported */
	.no-mediaquery {
	@import "original";
	}

	@media (max-width: 500px) {
	@import "small";
	}

	@media (max-width: 979px) {
	@import "medium";
	}

	@media (min-width: 980px) {
	@import "original";
	}