responder 0.1 → 0.1.1

data/README.md

@@ -63,9 +63,9 @@ This is how you use respond-to in your SASS stylesheet:
 	}
 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**
+- breakpointName**-only**
+- breakpointName**-and-up**
+- breakpointName**-and-below**
 
 *An example:*
 
@@ -102,9 +102,9 @@ Groups are sets of breakpoints whose names share the same root followed by a das
 
 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) { … }
+	@media screen and (min-width: 320px) and (max-width: 599px) { … }
 
-min-width value is the first breakpoint of the group and max-width is the last one. You can create as many breakpoints as you need for each group. It's that simple.
+You can create as many breakpoints as you need for each group. It's that simple.
 
 ### 3. Mobile first & Old IE
 
@@ -144,7 +144,7 @@ An example on style.scss:
 		padding: 10px;
 		
 		 // Only gets compiled on you main stylesheet (style.css)
-		@include respon-to(tablet-only) {
+		@include respond-to(tablet-only) {
 			background: blue;
 		}
 

data/lib/responder/version.rb

@@ -1,3 +1,3 @@
 module Responder
-  VERSION = "0.1"
+  VERSION = "0.1.1"
 end

data/scss/responder/_respond-to.scss

@@ -28,9 +28,36 @@
 		$max-width: 0;
 
 		@if $old-ie-support == true {
-			@if $breakpoint-name == $old-ie-breakpoint or $breakpoint-name == $old-ie-breakpoint {
-				@content;
+
+			@if yepnope($breakpoint-names, $old-ie-breakpoint) {
+
+				// Get the value of the old-ie breakpoint
+				$old-ie-breakpoint-value: nth($breakpoint-values, index($breakpoint-names, $old-ie-breakpoint));
+
+				$breakpoint-value: null;
+
+				@if $breakpoint-group == true {
+					// Get the group min-width
+					$breakpoint-value: nth( nth($breakpoint-groups, $breakpoint-group-id), 2);
+				} @else {
+					// Get the breakpoint value
+					$breakpoint-value: nth($breakpoint-values, index($breakpoint-names, $breakpoint-name));
+				}
+
+				// Check if the media query should respond
+				@if $breakpoint-extend == 'only' and $breakpoint-value == $old-ie-breakpoint-value {
+					@content;
+				} @else if $breakpoint-extend == 'and-up' and $old-ie-breakpoint-value >= $breakpoint-value{
+					@content;
+				} @else if $breakpoint-extend == 'and-below' and $old-ie-breakpoint-value <= $breakpoint-value {
+					@content;
+				}
+			} @else {
+				// Invlaid $old-ie-breakpoint value
+				@warn "[ERROR] "+ $old-ie-breakpoint +" is not a valid breakpoint name for $old-ie-breakpoint. Valid breakpoint names are: "+ $breakpoint-names
 			}
+
+
 		} @else {
 
 			// If it's a regular breakpoint

data/scss/responder/functions.scss

@@ -6,7 +6,8 @@
 // 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)
+// 5. Get size (px or em)
+// 6. Yepnope
 //
 // =============================================================================
 
@@ -113,16 +114,13 @@
 		$root: regex($breakpoint, '(.*?)-'+ $extension + '$');
 
 		// 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, $extension, space);
-				$br: join($br, $group, space);
-				$br: join($br, $groupid, space);
-				@return $br;
-			}
+		@if yepnope($breakpoint-names, $root) {
+			$group: false;
+			$groupid: false;
+			$br: join($root, $extension, space);
+			$br: join($br, $group, space);
+			$br: join($br, $groupid, space);
+			@return $br;
 		}
 
 		// Check if it's a group
@@ -153,4 +151,18 @@
 	} @else {
 		@return $value;
 	}
+}
+
+// =============================================================================
+// 6. Yepnope
+// Take a $list, return true if any $args are present.
+// =============================================================================
+
+@function yepnope($list, $args) {
+  $list: compact($list);
+  $check: false;
+  @each $arg in $args {
+    $check: if(index($list,$arg), true, $check);
+  }
+  @return $check;
 }

data/test/css/style-old-ie.css

@@ -29,29 +29,133 @@ tr > td:first-child {
   display: none;
 }
 /* line 63, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-only {
+.mq-mixins-test tbody .respond-to-mobile-and-up {
   background: #a7e040;
   color: white;
 }
 /* line 41, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-only .isResponding {
+.mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
   display: inline;
 }
 /* line 42, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-only .isInactive {
+.mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
   display: none;
 }
 /* line 63, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-and-up {
+.mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
   background: #a7e040;
   color: white;
 }
 /* line 41, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
+.mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
   display: inline;
 }
 /* line 42, ../scss/style.scss */
-.mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
+.mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-only {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-only .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-only .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-up {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-up .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-up .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-below {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-only {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-only .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-only .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
   display: none;
 }
 /* line 63, ../scss/style.scss */

data/test/index.html

@@ -28,7 +28,7 @@
 		</ul>
 
 		<h2>Support for old-IE</h2>
-		<pre><code>$old-ie-breakpoint: desktop</code></pre>
+		<pre><code>$old-ie-breakpoint: tablet-portrait</code></pre>
 
 		<h2>Respond-to mixin</h2>
 		<p>Resize your browser!</p>

data/test/scss/style-old-ie.scss

@@ -7,7 +7,7 @@
 $old-ie-support: true;
 
 // Set the breakpoint for old IE
-$old-ie-breakpoint: desktop;
+$old-ie-breakpoint: tablet-portrait;
 
 // Import the main stylesheet
 @import "style";

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: responder
 version: !ruby/object:Gem::Version 
-  hash: 9
+  hash: 25
   prerelease: 
   segments: 
   - 0
   - 1
-  version: "0.1"
+  - 1
+  version: 0.1.1
 platform: ruby
 authors: 
 - Daniel Guillan
@@ -14,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-10-24 00:00:00 Z
+date: 2012-11-21 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass