responder 0.0.1.alpha.6 → 0.0.1.alpha.7

data/README.md

@@ -2,7 +2,7 @@
 
 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.
+Forget about variables and long lists of unmanageable and unreusable mixins. Responder is the only media queries mixin you'll ever need. And it's always ready to use.
 
 ## Installation
 
@@ -22,11 +22,11 @@ Finally import responder into your sass code
 
 ### 1. Define your own breakpoints
 
-Include the `respond-to-breakpoints()` mixin in your stylesheet and pass your list of custom breakpoints. Define as many as you need and give each one of them a name and a min-width value.
+Include the `responder-breakpoints()` mixin in your stylesheet and pass your list of custom breakpoints. Define as many as you need and give each one of them a name and a min-width value in pixels.
 
 *An example:*
 
-	@include respond-to-breakpoints( mobile-portrait 320px,
+	@include responder-breakpoints( mobile-portrait 320px,
 									 mobile-landscape 480px,
 									 tablet-portrait 600px,
 									 tablet-landscape 768px,
@@ -34,6 +34,19 @@ Include the `respond-to-breakpoints()` mixin in your stylesheet and pass your li
 
 **Important:** Start with the smallest breakpoint and grow your list from there up to the bigger one.
 
+#### Ems by default
+
+Responder will do the math for you and convert your breakpoint values into ems. By default Responder uses the Compass $base-font-size configurable variable as the context.
+
+**Need to change the context?**
+
+	$responder-ems-context: $my-own-context;
+
+**I Prefer pixel breakpoints!** Easy:
+
+	$responder-use-ems: false;
+	
+
 ### 2. Using the respond-to mixin
 
 Yep, that was it. Your mixin is ready to use.

data/lib/responder/version.rb

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

data/scss/responder/_respond-to.scss

@@ -39,12 +39,11 @@
 		}
 
 		@if $breakpoint-extend == only {
-			@media (min-width: $min-width) and (max-width: ($max-width - 1)) { @content; }
+			@media (min-width: getSize($min-width)) and (max-width: getSize($max-width - 1)) { @content; }
 		} @else if $breakpoint-extend == and-up {
-			@media (min-width: $min-width) { @content; }
+			@media (min-width: getSize($min-width)) { @content; }
 		} @else if $breakpoint-extend == and-below {
-			$max-width: $max-width - 1;
-			@media (max-width: ($max-width - 1)) { @content; }
+			@media (max-width: getSize($max-width - 1)) { @content; }
 		}
 	}
 }

data/scss/responder/functions.scss

@@ -6,6 +6,7 @@
 // 2. Get breakpoint Values list
 // 3. Get breakpoint Groups list with min and max values
 // 4. Get the Respond-to breakpoint
+// 4. Get size (px or em)
 //
 // =============================================================================
 
@@ -134,4 +135,17 @@
 
 	@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';
+}
+
+// =============================================================================
+// 5. Get size
+// Returns the breakpoint value in pixels or ems.
+// =============================================================================
+
+@function getSize($value, $context: $responder-ems-context) {
+	@if $responder-use-ems == true {
+		@return $value / $context +em;
+	} @else {
+		@return $value;
+	}
 }

data/scss/responder.scss

@@ -1,8 +1,8 @@
 // =============================================================================
 // Responder
 //
-// Magic media queries for your Compass project. You define the breakpoints,
-// Respond-to takes care of the rest.
+// Magic media queries for your Compass project. You define the breakpoints, 
+// Responder takes care of the rest.
 //
 // More info, installation and usage:
 // https://github.com/danielguillan/respond-to
@@ -13,6 +13,7 @@
 //
 // =============================================================================
 
+@import 'compass';
 @import 'responder/respond-to';
 @import 'responder/functions';
 
@@ -24,11 +25,17 @@ $breakpoint-names: ();
 $breakpoint-values: ();
 $breakpoint-groups: ();
 
+// Configurable variables
+// =============================================================================
+
+$responder-use-ems: true !default;
+$responder-ems-context: $base-font-size !default;
+
 // =============================================================================
 // 2. Initialization
 // =============================================================================
 
-@mixin respond-to-breakpoints($breakpoints...) {
+@mixin responder-breakpoints($breakpoints...) {
 
 	@if length($breakpoints) > 1 {
 		$breakpoint-names: getBreakpointNames($breakpoints);

data/test/css/style.css

@@ -2,7 +2,7 @@
 body {
   font: 16px/21px "Helvetica Neue", Arial, sans-serif;
 }
-@media (min-width: 320px) and (max-width: 599px) {
+@media (min-width: 20em) and (max-width: 37.4375em) {
   /* line 17, ../scss/style.scss */
   body {
     font-size: 95%;
@@ -34,7 +34,7 @@ tr > td:first-child {
 .mq-mixins-test tbody .response-example .isResponding {
   display: none;
 }
-@media (min-width: 320px) and (max-width: 599px) {
+@media (min-width: 20em) and (max-width: 37.4375em) {
   /* line 60, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile {
     background: #a7e040;
@@ -49,7 +49,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 320px) and (max-width: 479px) {
+@media (min-width: 20em) and (max-width: 29.9375em) {
   /* line 65, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-portrait {
     background: #a7e040;
@@ -64,7 +64,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 480px) and (max-width: 599px) {
+@media (min-width: 30em) and (max-width: 37.4375em) {
   /* line 70, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-landscape {
     background: #a7e040;
@@ -79,7 +79,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 600px) and (max-width: 991px) {
+@media (min-width: 37.5em) and (max-width: 61.9375em) {
   /* line 76, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet {
     background: #a7e040;
@@ -94,7 +94,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 600px) and (max-width: 767px) {
+@media (min-width: 37.5em) and (max-width: 47.9375em) {
   /* line 82, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-portrait {
     background: #a7e040;
@@ -109,7 +109,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 48em) and (max-width: 61.9375em) {
   /* line 88, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-landscape {
     background: #a7e040;
@@ -124,7 +124,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62em) {
   /* line 94, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-desktop {
     background: #a7e040;
@@ -139,7 +139,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 320px) {
+@media (min-width: 20em) {
   /* line 103, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-and-up {
     background: #a7e040;
@@ -154,7 +154,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 320px) {
+@media (min-width: 20em) {
   /* line 108, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
     background: #a7e040;
@@ -169,7 +169,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 480px) {
+@media (min-width: 30em) {
   /* line 113, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
     background: #a7e040;
@@ -184,7 +184,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 37.5em) {
   /* line 119, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-and-up {
     background: #a7e040;
@@ -199,7 +199,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 37.5em) {
   /* line 125, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
     background: #a7e040;
@@ -214,7 +214,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48em) {
   /* line 131, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
     background: #a7e040;
@@ -229,7 +229,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62em) {
   /* line 137, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-desktop-and-up {
     background: #a7e040;
@@ -244,7 +244,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 598px) {
+@media (max-width: 37.4375em) {
   /* line 146, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-and-below {
     background: #a7e040;
@@ -259,7 +259,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 478px) {
+@media (max-width: 29.9375em) {
   /* line 151, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
     background: #a7e040;
@@ -274,7 +274,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 598px) {
+@media (max-width: 37.4375em) {
   /* line 156, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
     background: #a7e040;
@@ -289,7 +289,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 990px) {
+@media (max-width: 61.9375em) {
   /* line 162, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-and-below {
     background: #a7e040;
@@ -304,7 +304,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 766px) {
+@media (max-width: 47.9375em) {
   /* line 168, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
     background: #a7e040;
@@ -319,7 +319,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 990px) {
+@media (max-width: 61.9375em) {
   /* line 174, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
     background: #a7e040;
@@ -334,7 +334,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 990px) {
+@media (max-width: 61.9375em) {
   /* line 180, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-desktop-and-below {
     background: #a7e040;

data/test/scss/style.scss

@@ -5,7 +5,7 @@
 
 @import "responder";
 
-@include respond-to-breakpoints( mobile-portrait 320px,
+@include responder-breakpoints( mobile-portrait 320px,
 								 mobile-landscape 480px,
 								 tablet-portrait 600px,
 								 tablet-landscape 768px,

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification 
 name: responder
 version: !ruby/object:Gem::Version 
-  hash: -3476678256
+  hash: -2869641776
   prerelease: 6
   segments: 
   - 0
   - 0
   - 1
   - alpha
-  - 6
-  version: 0.0.1.alpha.6
+  - 7
+  version: 0.0.1.alpha.7
 platform: ruby
 authors: 
 - Daniel Guillan
@@ -17,7 +17,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-10-08 00:00:00 Z
+date: 2012-10-10 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass