Rasmus Thulstrup thulstrup

## demo.html
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> 	<html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> 	<html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> 	<html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

## breakpoint.sass
////////////////////////////
// SURVIVAL KIT - BREAKPOINT
// breakpoint($breakpoint, $media: 'screen')
////////////////////////////

$breakpoint-default-feature: min-width !default

// create $breakpoint variables like so
// assume $breakpoint-default-feature if only a number
$breakpoint1: 500px

## 01-variable-respond-to-mixin.md

      
              3 files
            
          
              6 forks
            
          
              0 comments
            
          
              22 stars
            
          
                Snugug
                / 01-variable-respond-to-mixin.md
            
            
              Created
              April 25, 2012 21:20
            
              
                Variable-driven respond-to mixin
              
          
    What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?
This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.
There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.
Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.
Without further adue, tada.

  
## uri.js
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

## 1_index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
  <div class="container c1"></div>
  <div class="container c2"></div>

## _media-queries.scss
// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break

## _grid.sass
// MEASUREMENTS

// Grid types to work on -- column, scale
$grid-type: column !default
$scale-grid-direction: rtl !default
$scale-grid-style: incremental !default

$base-size: 16px !default
$line-height: 1.3em !default

## gist:1988097
// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }

## 0_usage.scss
@include keyframes(appear-and-roundify) {
  0%   { opacity: 0; @include border-radius(2px);  }
  100% { opacity: 1; @include border-radius(10px); }
}

## dabblet.css
/**
 * PE to use SVG as CSS background image with fallback for IE8/7/6
 *
 * Using SVG as CSS background image to display
 * resolution-independent logos or icons is pretty
 * awesome but does completely fail on IE8/7/6
 *
 * The trick:
 * All three IE versions don't support rgba color values.
 * By defining a rgba background color together with the
	<!DOCTYPE html>
	<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
	<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]-->
	<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]-->
	<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]-->
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	////////////////////////////
	// SURVIVAL KIT - BREAKPOINT
	// breakpoint($breakpoint, $media: 'screen')
	////////////////////////////

	$breakpoint-default-feature: min-width !default

	// create $breakpoint variables like so
	// assume $breakpoint-default-feature if only a number
	$breakpoint1: 500px
	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>test</title>
	<link rel="stylesheet" href="stylesheets/screen.css">
	</head>
	<body>
	<div class="container c1"></div>
	<div class="container c2"></div>
	// Media Queries in Sass 3.2
	//
	// These mixins make media queries a breeze with Sass.
	// The media queries from mobile up until desktop all
	// trigger at different points along the way
	//
	// And important point to remember is that and width
	// over the portrait width is considered to be part of the
	// landscape width. This allows us to capture widths of devices
	// that might not fit the dimensions exactly. This means the break
	// MEASUREMENTS

	// Grid types to work on -- column, scale
	$grid-type: column !default
	$scale-grid-direction: rtl !default
	$scale-grid-style: incremental !default

	$base-size: 16px !default
	$line-height: 1.3em !default
	// swap the keybindings for paste and paste_and_indent
	{ "keys": ["super+v"], "command": "paste_and_indent" },
	{ "keys": ["super+shift+v"], "command": "paste" }
	@include keyframes(appear-and-roundify) {
	0% { opacity: 0; @include border-radius(2px); }
	100% { opacity: 1; @include border-radius(10px); }
	}
	/**
	* PE to use SVG as CSS background image with fallback for IE8/7/6
	*
	* Using SVG as CSS background image to display
	* resolution-independent logos or icons is pretty
	* awesome but does completely fail on IE8/7/6
	*
	* The trick:
	* All three IE versions don't support rgba color values.
	* By defining a rgba background color together with the