Skip to content

Instantly share code, notes, and snippets.

@bencallahan

bencallahan/base-original.scss

Created May 2, 2012 13:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bencallahan/2576705 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bencallahan/2576705 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Retrofitting: CSS Loading: Option 1
Raw
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.
-->
Raw
base-original.scss
/* this is a SCSS file which aggregates the necessary components for the
original "desktop" design */
@import "reset";
@import "grid";
@import "main";
Raw
base-small.scss
/* this is a SCSS file which aggregates the necessary components for small
and medium screens */
@import "reset";
@import "small";
@media (min-width: 500px) {
@import "medium";
}
Raw
option-1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/base-small.css">
<link media="min-width: 980px" rel="stylesheet" type="text/css" href="css/base-original.css">
<!--[if (lte IE 8)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="css/base-original.css">
<![endif]-->
</head>
</html>
@bencallahan

bencallahan commented May 2, 2012

Copy link
Copy Markdown
Author

Requirements:

  • fails 1 (browsers that support Media Queries make two requests)
  • fails 2 (browsers that only need "small" styles will load "medium" styles also—although they won't use them)
  • fails 3 (all browsers will load the "small" styles)
  • passes 4
  • fails 5 (non-IE browsers that don't support Media Queries get small layout)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment