Skip to content

Instantly share code, notes, and snippets.

View bencallahan's full-sized avatar

Ben Callahan bencallahan

186 followers · 9 following
View GitHub Profile
@bencallahan
bencallahan / gist:3948483
Created October 24, 2012 20:04
Invalid "not print" media query
@media (not print, braille, embossed, speech, tty) and (min-width: 30em) {
/* styles here */
}
@bencallahan
bencallahan / gist:3948465
Created October 24, 2012 20:02
Ultra simple media query
@media (min-width: 30em) {
/* styles here */
}
@bencallahan
bencallahan / gist:3948447
Created October 24, 2012 19:59
Simple media query
@media screen and (min-width: 30em) {
/* styles here */
}
@bencallahan
bencallahan / gist:3948415
Created October 24, 2012 19:54
Rough example of "not print" css linking
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="not print" href="mq.css">
@bencallahan
bencallahan / index.html
Created October 11, 2012 00:23
I suspect that we actually want our media queries to apply to much more than just "screen." At Sparkbox, we've just been leaving off the media type (from "screen and (min-width: 30em)" to "(min-width: 30em)"). Obviously, most UAs that *shouldn't* be "scre
<body>
<h1>Media Query Tests</h1>
<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
@bencallahan
bencallahan / base-medium-js.scss
Created May 2, 2012 20:42
Responsive Retrofitting: CSS Loading: Option 3
/* 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";
}
@bencallahan
bencallahan / option-2.html
Created May 2, 2012 20:25
Responsive Retrofitting: CSS Loading: Option 2
<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>
@bencallahan
bencallahan / base-original.scss
Created May 2, 2012 13:59
Responsive Retrofitting: CSS Loading: Option 1
/* this is a SCSS file which aggregates the necessary components for the
original "desktop" design */
@import "reset";
@import "grid";
@import "main";
@bencallahan
bencallahan / option-1.html
Created May 1, 2012 21:10
Responsive Retrofitting CSS Link Options
<html>
<head>
<!-- always include the small layout -->
<!-- base-small.css has smallest styles at top and medium styles behind a media query at bottom -->
<link rel="stylesheet" type="text/css" href="css/base-small.css">
<!-- if the viewport width is >= 980 px, serve the original styles -->
<link media="min-width: 980px" rel="stylesheet" type="text/css" href="css/base-original.css">