responder 0.0.1.alpha.1

data/.gitignore

@@ -0,0 +1,18 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+test/.sass-cache/*
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in responder.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Daniel Guillan
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,104 @@
+# Responder
+
+Magic media queries for your Compass project. You define the breakpoints, Responder takes care of the rest.
+
+Forget about multiple variable declarations, long lists of unmanageable, inextensible and unreusable mixins. Responder is the only media queries mixin you'll ever need. And it's always ready to use.
+
+## Installation
+
+Install the respond-to gem:
+
+    $ gem install responder
+
+In your project's config.rb file add:
+
+	require "responder"
+
+Finally install the Compass extension:
+
+	$ compass install responder
+
+## Usage
+
+### 1. Define your own breakpoints
+
+Include the `respond-to-breakpoints()` mixin in your stylesheet and pass a list of desired breakpoints. Define as many as you need and give each one of them a name and a min-width value.
+
+*An example:*
+
+	@include respond-to-breakpoints( mobile-portrait 320px,
+									 mobile-landscape 480px,
+									 tablet-portrait 600px,
+									 tablet-landscape 768px,
+							 		 desktop 990px);
+
+**Important:** Your list of breakpoints must always start with the smallest breakpoint and end with the bigger one.
+
+### 2. Using the respond-to mixin
+
+Yep, that was it. Your mixin is ready to use.
+
+This is how you use respond-to in your SASS stylesheet:
+
+	selector {
+		@include respond-to(breakpointName-extend) {
+			// rules…
+		}
+	}
+For each breakpoint you've defined you now have 3 available parameters for the respond-to mixin:
+
+- *breakpointName***-only**
+- *breakpointName***-and-up**
+- *breakpointName***-and-below**
+
+*An example:*
+
+	body {
+		background-color: #fff;
+
+		// Targets tablet-landscape only
+		@include respond-to(tablet-landscape-only) {
+			background-color: #0f0;
+		}
+
+		// Targets tablet-portrait and up
+		@include respond-to(tablet-portrait-and-up) {
+			background-color: #ff0;
+		}
+
+		// Targets mobile-landscape and below
+		@include respond-to(mobile-landscape-and-below) {
+			background-color: #0ff;
+		}
+
+		// (Bonus!) Targets mobile only
+		@include respond-to(mobile-only) {
+			background: #f0f;
+		}
+	}
+
+
+#### Breakpoint Groups
+
+You might have noticed from the example above that we where able to `respond-to(mobile-only)`, but how? We didn't define any mobile (only) breakpoint in our list. Well, that's some of the magic behind Responder. It automatically creates breakpoint groups based on your breakpoint names.
+
+Groups are sets of breakpoints whose names share the same root followed by a dash (-). For example `mobile` is the group Responder creates for the `mobile-portrait` and `mobile-landscape` breakpoints.
+
+Given the example breakpoint list above, `respond-to(mobile-only)` will output the following css:
+
+	@media screen and (min-width: 320px) and (max-width: 480px) { … }
+
+min-width value is the first breakpoint of the group and max-width is the last one. It's that simple.
+
+**NOTE:** You can define more than two breakpoints per group, Responder will pick the smallest breakpoint and the bigger breakpoint to create the group.
+
+### 3. There's no #3. Enjoy and build amazing stuff
+
+… And contribute to make Responder even better!
+
+
+## What's next?
+
+- Respond-to Retina displays
+- Support for more than just `min-width` and `max-width`
+- Suggestions?

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/responder/version.rb

@@ -0,0 +1,3 @@
+module Responder
+  VERSION = "0.0.1.alpha.1"
+end

data/lib/responder.rb

@@ -0,0 +1,19 @@
+root = File.join(File.dirname(__FILE__), "..")
+
+require "responder/version"
+require "compass"
+
+module Sass::Script::Functions
+  def regex(string,regex)
+    assert_type string, :String
+    assert_type regex, :String
+    /#{regex.value}/.match string.value
+    $1 ? match = $1 : match = ''
+    Sass::Script::String.new(match)
+  end
+  declare :regex, :args => [:string, :string]
+end
+
+Compass::Frameworks.register("responder",
+  :stylesheets_directory => File.join(root,"scss")
+)

data/responder.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'responder/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "responder"
+  gem.version       = Responder::VERSION
+  gem.authors       = ["Daniel Guillan"]
+  gem.email         = ["daniel.guillan@gmail.com"]
+  gem.description   = %q{Magic media queries for your Compass project}
+  gem.summary       = %q{Magic media queries for your Compass project}
+  gem.homepage      = "http://github.com/danielguillan/responder"
+
+  gem.files         = `git ls-files`.split($/)
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+
+  gem.add_dependency "sass", [">= 3.2.0"]
+  gem.add_dependency "compass", [">= 0.12.2"]
+  gem.add_dependency "rake"
+
+end

data/scss/functions.scss

@@ -0,0 +1,117 @@
+// =============================================================================
+// Functions
+//
+// Table of contents:
+// 1. Get breakpoint Names list
+// 2. Get breakpoint Values list
+// 3. Get breakpoint Groups list with min and max values
+// 4. Get the Respond-to breakpoint
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Get breakpoint Names list
+// =============================================================================
+
+@function getBreakpointNames($breakpoints) {
+	$names: ();
+	@for $i from 1 through length($breakpoints) {
+		@if type-of(nth(nth($breakpoints,$i),1)) == string {
+			$names: join($names, nth(nth($breakpoints,$i),1));
+		} @else {
+			@warn '[ERROR] "' + nth(nth($breakpoints,$i),1) + '" is not a valid breakipoint name';
+		}
+	}
+	@return $names;
+}
+
+// =============================================================================
+// 2. Get breakpoint Values list
+// =============================================================================
+
+@function getBreakpointValues($breakpoints) {
+	$values: ();
+	@for $i from 1 through length($breakpoints) {
+		@if type-of(nth(nth($breakpoints,$i),2)) == number {
+			$values: join($values, nth(nth($breakpoints,$i),2));
+		} @else {
+			@warn '[ERROR] "' + nth(nth($breakpoints,$i),2) + '" is not a valid breakipoint value';
+		}
+	}
+	@return $values;
+}
+
+// =============================================================================
+// 3. Get breakpoint Groups list with min and max values
+// =============================================================================
+
+@function createBreakpointGroups($breakpoint-names, $breakpoint-values) {
+	$groups: ();
+	$total-groups: 0;
+	$last: 0;
+
+	@for $i from 1 through length($breakpoint-names) {
+		$group: regex(nth($breakpoint-names,$i), '([a-z]+)?\-');
+		$repeated: false;
+
+		@if $group != '' {
+
+			// Check if we already found this group
+			@each $saved-group in $groups {
+				@if $group == nth($saved-group, 1) {
+					$repeated: true;
+				}
+			}
+
+			// If this is a new group add it to the list
+			@if $repeated != true {
+				$group: join($group, nth($breakpoint-values, $i) nth($breakpoint-values, ($i + 2)), space);
+				$groups: append($groups, $group , comma );
+				$total-groups: $total-groups + 1;
+			}
+		}
+	}
+
+	@return $groups;
+}
+
+// =============================================================================
+// 4. Get the Respond-to breakpoint
+// =============================================================================
+
+@function getBreakpointInfo($breakpoint) {
+
+	// capture the extend (only, and-up or and-below)
+	$extend: regex($breakpoint, '((and-)?[a-z]+)$');
+
+	// capture the breakpoint name
+	$root: regex($breakpoint, '(.*?)-'+ $extend + '$');
+
+	// Check if it's a normal breakpoint
+	@for $i from 1 through length($breakpoint-names) {
+
+		@if $root == nth($breakpoint-names, $i) {
+			$group: false;
+			$groupid: false;
+			$br: join($root, $extend, space);
+			$br: join($br, $group, space);
+			$br: join($br, $groupid, space);
+			@return $br;
+		}
+	}
+
+	// Check if it's a group
+	@for $i from 1 through length($breakpoint-groups) {
+		@if $root == nth(nth($breakpoint-groups, $i),1) {
+			$group: true;
+			$groupid: $i;
+			$br: join($root, $extend, space);
+			$br: join($br, $group, space);
+			$br: join($br, $groupid, space);
+			@return $br;
+		}
+	}
+
+	@warn '[ERROR] "' + $breakpoint + '"" is not a valid parameter. Please, check the breakpoint name and also make sure you used -only, -and-up, or -and-below]';
+	@return 'error';
+}

data/scss/respond-to.scss

@@ -0,0 +1,87 @@
+// =============================================================================
+// Media Queries
+//
+// Magic media queries for your Compass project. You define the breakpoints,
+// Respond-to takes care of the rest.
+//
+// More info, installation and usage:
+// https://github.com/danielguillan/respond-to
+//
+// Table of contents:
+// 1. Variables
+// 2. Initialization
+// 3. Breakpoint Groups
+// 4. Respond-to mixin
+//
+// =============================================================================
+
+@import 'functions';
+
+// =============================================================================
+// 1. Variables
+// =============================================================================
+
+$breakpoint-names: ();
+$breakpoint-values: ();
+$breakpoint-groups: ();
+
+// =============================================================================
+// 2. Initialization
+// =============================================================================
+
+@mixin respond-to-breakpoints($breakpoints...) {
+
+	@if length($breakpoints) > 1 {
+		$breakpoint-names: getBreakpointNames($breakpoints);
+		$breakpoint-values: getBreakpointValues($breakpoints);
+		$breakpoint-groups: createBreakpointGroups($breakpoint-names,$breakpoint-values);
+	}@else {
+		@warn 'respond-to-breakpoints requires at least 2 breakpoints';
+	}
+}
+
+// =============================================================================
+// 3. Respond-to mixin
+// =============================================================================
+
+@mixin respond-to($breakpoint) {
+
+	$breakpoint-info: getBreakpointInfo($breakpoint);
+
+	@if $breakpoint-info == 'error' {
+		@warn '[ERROR] Invalid breakpoint paramenter';
+	} @else {
+		$breakpoint-name: nth($breakpoint-info, 1);
+		$breakpoint-extend: nth($breakpoint-info, 2);
+		$breakpoint-group: nth($breakpoint-info, 3);
+		$breakpoint-group-id: nth($breakpoint-info, 4);
+
+		$min-width: 0;
+		$max-width: 0;
+
+		// If it's a regular breakpoint
+		@if $breakpoint-group == false {
+			$min-width: nth($breakpoint-values, index($breakpoint-names, $breakpoint-name));
+
+			// Only set a max-width if it's not the last breakpoint
+			@if (index($breakpoint-names, $breakpoint-name) + 1) <= length($breakpoint-values) {
+				$max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name) + 1));
+			} @else {
+				$breakpoint-extend: and-up;
+			}
+
+		// If it's a breakpoint group
+		}@else {
+			$min-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 2);
+			$max-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 3);
+		}
+
+		@if $breakpoint-extend == only {
+			@media (min-width: $min-width) and (max-width: $max-width) { @content; }
+		} @else if $breakpoint-extend == and-up {
+			@media (min-width: $min-width) { @content; }
+		} @else if $breakpoint-extend == and-below {
+			@media (max-width: $max-width) { @content; }
+		}
+	}
+}

data/test/config.rb

@@ -0,0 +1,10 @@
+require File.join(File.dirname(__FILE__),"../lib/responder")
+
+project_type = :stand_alone
+http_path = "/"
+sass_dir = "scss"
+css_dir = "css"
+images_dir = "img"
+
+preferred_syntax = :scss
+relative_assets = true

data/test/css/style.css

@@ -0,0 +1,340 @@
+/* line 17, ../scss/style.scss */
+body {
+  font: 16px/21px "Helvetica Neue", Arial, sans-serif;
+}
+
+/* line 21, ../scss/style.scss */
+.wrapper {
+  margin: 0 auto;
+  padding: 0 1em;
+  max-width: 1000px;
+}
+
+/* line 40, ../scss/style.scss */
+.mq-mixins-test {
+  width: 100%;
+}
+/* line 46, ../scss/style.scss */
+.mq-mixins-test tbody .response-example {
+  text-align: center;
+  color: #ccc;
+}
+/* line 49, ../scss/style.scss */
+.mq-mixins-test tbody .response-example .isResponding {
+  display: none;
+}
+@media (min-width: 320px) and (max-width: 600px) {
+  /* line 55, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 320px) and (max-width: 480px) {
+  /* line 60, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 480px) and (max-width: 600px) {
+  /* line 65, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 600px) and (max-width: 992px) {
+  /* line 71, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 600px) and (max-width: 768px) {
+  /* line 77, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+  /* line 83, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  /* line 89, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 320px) {
+  /* line 98, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 320px) {
+  /* line 103, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 480px) {
+  /* line 108, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 600px) {
+  /* line 114, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 600px) {
+  /* line 120, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  /* line 126, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  /* line 132, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-up {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 600px) {
+  /* line 141, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-and-below .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 480px) {
+  /* line 146, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 600px) {
+  /* line 151, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 992px) {
+  /* line 157, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 768px) {
+  /* line 163, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
+    display: none;
+  }
+}
+@media (max-width: 992px) {
+  /* line 169, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  /* line 175, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-below {
+    background: #a7e040;
+    color: white;
+  }
+  /* line 36, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-below .isResponding {
+    display: inline;
+  }
+  /* line 37, ../scss/style.scss */
+  .mq-mixins-test tbody .respond-to-desktop-and-below .isInactive {
+    display: none;
+  }
+}

data/test/index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Responder testing</title>
+	<link href="/css/style.css" rel="stylesheet">
+</head>
+<body>
+	<div class="wrapper">
+
+		<header>
+			<h1>Responder mixin testing</h1>
+		</header>
+
+		<h2>Only</h2>
+		<table class="mq-mixins-test">
+			<thead>
+				<tr>
+					<th>Mixin</th>
+					<th>Response</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-only)</code></td>
+					<td class="response-example respond-to-mobile"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-portrait-only)</code></td>
+					<td class="response-example respond-to-mobile-portrait"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-landscape-only)</code></td>
+					<td class="response-example respond-to-mobile-landscape"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-only)</code></td>
+					<td class="response-example respond-to-tablet"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-portrait-only)</code></td>
+					<td class="response-example respond-to-tablet-portrait"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-landscape-only)</code></td>
+					<td class="response-example respond-to-tablet-landscape"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(desktop-only)</code></td>
+					<td class="response-example respond-to-desktop"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+			</tbody>
+		</table>
+
+		<hr>
+
+		<h2>And-Up</h2>
+		<table class="mq-mixins-test">
+			<thead>
+				<tr>
+					<th>Mixin</th>
+					<th>Response</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-and-up)</code></td>
+					<td class="response-example respond-to-mobile-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-portrait-and-up)</code></td>
+					<td class="response-example respond-to-mobile-portrait-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-landscape-and-up)</code></td>
+					<td class="response-example respond-to-mobile-landscape-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-and-up)</code></td>
+					<td class="response-example respond-to-tablet-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-portrait-and-up)</code></td>
+					<td class="response-example respond-to-tablet-portrait-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-landscape-and-up)</code></td>
+					<td class="response-example respond-to-tablet-landscape-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(desktop-and-up)</code></td>
+					<td class="response-example respond-to-desktop-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+			</tbody>
+		</table>
+
+		<hr>
+
+		<h2>And-Below</h2>
+		<table class="mq-mixins-test">
+			<thead>
+				<tr>
+					<th>Mixin</th>
+					<th>Response</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-and-below)</code></td>
+					<td class="response-example respond-to-mobile-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-portrait-and-below)</code></td>
+					<td class="response-example respond-to-mobile-portrait-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(mobile-landscape-and-below)</code></td>
+					<td class="response-example respond-to-mobile-landscape-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-and-below)</code></td>
+					<td class="response-example respond-to-tablet-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-portrait-and-below)</code></td>
+					<td class="response-example respond-to-tablet-portrait-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(tablet-landscape-and-below)</code></td>
+					<td class="response-example respond-to-tablet-landscape-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+				<tr>
+					<td><code class="language-css">respond-to(desktop-and-below)</code></td>
+					<td class="response-example respond-to-desktop-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+			</tbody>
+		</table>
+	</div> <!-- /wrapper -->
+
+</body>

data/test/scss/style.scss

@@ -0,0 +1,181 @@
+// =============================================================================
+// Respond-to Test Bed
+//
+// =============================================================================
+
+@import "respond-to";
+
+@include respond-to-breakpoints( mobile-portrait 320px,
+								 mobile-landscape 480px,
+								 tablet-portrait 600px,
+								 tablet-landscape 768px,
+								 desktop 992px);
+
+
+$green: #a7e040;
+
+body {
+	font: 16px/21px 'Helvetica Neue', Arial, sans-serif;
+}
+
+.wrapper {
+	margin: 0 auto;
+	padding: 0 1em;
+	max-width: 1000px;
+}
+
+// =============================================================================
+// Respond-to Media Queries
+// =============================================================================
+
+@mixin is-responding {
+	// Make it green!
+	background: $green;
+	color: white;
+	// Show isResponding and hide is Inactive
+	.isResponding 	{ display: inline; }
+	.isInactive 	{ display: none; }
+}
+
+.mq-mixins-test {
+
+	width: 100%;
+
+	tbody {
+
+		.response-example {
+			text-align: center;
+			color: #ccc;
+			.isResponding { display: none; }
+		}
+
+		// Only
+		// =============================================================================
+
+		.respond-to-mobile {
+			@include respond-to(mobile-only) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-portrait {
+			@include respond-to(mobile-portrait-only) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-landscape {
+			@include respond-to(mobile-landscape-only) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet {
+			@include respond-to(tablet-only) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-portrait {
+			@include respond-to(tablet-portrait-only) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-landscape {
+			@include respond-to(tablet-landscape-only) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-desktop {
+			@include respond-to(desktop-only) {
+				@include is-responding;
+			}
+		}
+
+		// And Up
+		// =============================================================================
+
+		.respond-to-mobile-and-up {
+			@include respond-to(mobile-and-up) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-portrait-and-up {
+			@include respond-to(mobile-portrait-and-up) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-landscape-and-up {
+			@include respond-to(mobile-landscape-and-up) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-and-up {
+			@include respond-to(tablet-and-up) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-portrait-and-up {
+			@include respond-to(tablet-portrait-and-up) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-landscape-and-up {
+			@include respond-to(tablet-landscape-and-up) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-desktop-and-up {
+			@include respond-to(desktop-and-up) {
+				@include is-responding;
+			}
+		}
+
+		// And Below
+		// =============================================================================
+
+		.respond-to-mobile-and-below {
+			@include respond-to(mobile-and-below) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-portrait-and-below {
+			@include respond-to(mobile-portrait-and-below) {
+				@include is-responding;
+			}
+		}
+		.respond-to-mobile-landscape-and-below {
+			@include respond-to(mobile-landscape-and-below) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-and-below {
+			@include respond-to(tablet-and-below) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-portrait-and-below {
+			@include respond-to(tablet-portrait-and-below) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-tablet-landscape-and-below {
+			@include respond-to(tablet-landscape-and-below) {
+				@include is-responding;
+			}
+		}
+
+		.respond-to-desktop-and-below {
+			@include respond-to(desktop-and-below) {
+				@include is-responding;
+			}
+		}
+	}
+}

metadata

@@ -0,0 +1,114 @@
+--- !ruby/object:Gem::Specification
+name: responder
+version: !ruby/object:Gem::Version
+  version: 0.0.1.alpha.1
+  prerelease: 6
+platform: ruby
+authors:
+- Daniel Guillan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-09-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Magic media queries for your Compass project
+email:
+- daniel.guillan@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/responder.rb
+- lib/responder/version.rb
+- responder.gemspec
+- scss/functions.scss
+- scss/respond-to.scss
+- test/config.rb
+- test/css/style.css
+- test/index.html
+- test/scss/style.scss
+homepage: http://github.com/danielguillan/responder
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: 4469443832490834780
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>'
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Magic media queries for your Compass project
+test_files:
+- test/config.rb
+- test/css/style.css
+- test/index.html
+- test/scss/style.scss