Created
May 2, 2012 20:42
-
-
Save bencallahan/2580313 to your computer and use it in GitHub Desktop.
Responsive Retrofitting: CSS Loading: Option 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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. | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this is a SCSS file which aggregates the necessary components for the | |
| medium layout ONLY if JavaScript is enabled */ | |
| .js { | |
| @import "reset"; | |
| @import "small"; | |
| @import "medium"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this is a SCSS file which aggregates the necessary components for the | |
| original "desktop" design ONLY if JavaScript is enabled */ | |
| .js { | |
| @import "reset"; | |
| @import "grid"; | |
| @import "main"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this is a SCSS file which aggregates the necessary components for the | |
| small layout ONLY if JavaScript is enabled */ | |
| .js { | |
| @import "reset"; | |
| @import "small"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this is a SCSS file which aggregates the necessary components for the | |
| small layout */ | |
| @import "reset"; | |
| @import "small"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html class="no-js"> | |
| <head> | |
| <link media="min-width: 980px" rel="stylesheet" type="text/css" href="css/base-original-js.css"> | |
| <link media="max-width: 500px" rel="stylesheet" type="text/css" href="css/base-small-js.css"> | |
| <link media="(min-width: 501px) and (max-width: 979px)" rel="stylesheet" type="text/css" href="css/base-medium-js.css"> | |
| <noscript> | |
| <link rel="stylesheet" type="text/css" href="css/base-small.css"> | |
| </noscript> | |
| <script> | |
| /* pseudo-code */ | |
| if ((no media query support) and | |
| (document viewport width <= 500px)) { load "css/base-small-js.css" } | |
| if ((no media query support and) | |
| (document viewport width >= 501px) and | |
| (document viewport width <= 979px)) { load "css/base-medium-js.css" } | |
| if ((no media query support) and | |
| (document viewport width >= 980px)) { load "css/base-original-js.css" } | |
| </script> | |
| </head> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Requirements: