responder 0.0.1.alpha.2 → 0.0.1.alpha.3

data/README.md

@@ -14,10 +14,6 @@ In your project's config.rb file add:
 
 	require "responder"
 
-Install the Compass extension:
-
-	$ compass install responder
-
 Finally import responder into your sass code
 
 	@import "responder";
@@ -103,5 +99,4 @@ min-width value is the first breakpoint of the group and max-width is the last o
 
 ## What's next?
 
-- Support for groups with more than 2 breakpoints
 - Support for more media features (height, device-dimensions, orientation, retina displays, …)

data/lib/responder/version.rb

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

data/scss/responder/functions.scss

@@ -46,29 +46,42 @@
 // =============================================================================
 
 @function createBreakpointGroups($breakpoint-names, $breakpoint-values) {
+	$captured-groups: ();
+	$new-group: ();
 	$groups: ();
-	$total-groups: 0;
-	$last: 0;
 
+	// Create a list with all the captured groups breakpoint names and indexes
 	@for $i from 1 through length($breakpoint-names) {
 		$group: regex(nth($breakpoint-names,$i), '([a-z]+)?\-');
-		$repeated: false;
-
 		@if $group != '' {
+			$group: join($group, $i, space);
+			$captured-groups: append($captured-groups, $group, comma);
+		}
+	}
 
-			// 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;
-			}
+	// Save a list of groups with min and max values
+	// eg: foo 100px 200px, bar 200px 300px;
+	@for $i from 1 through length($captured-groups) {
+
+		$current-group: nth($captured-groups, $i);
+		$current-group-name: nth($current-group,1);
+		$current-group-index: nth($current-group,2);
+
+		// Initial group
+		@if $i == 1 {
+			$new-group: $current-group-name;
+			$new-group: append($new-group, nth($breakpoint-values, $current-group-index), space);
+		// New and last groups
+		} @else if $current-group-name != nth($new-group, 1) or $i == length($captured-groups) {
+			// Find the previous breakpoint value (max-width for the group)
+			$previous-breakpoint-value: nth($breakpoint-values, ($current-group-index));
+			// The current group is ready
+			$new-group: append($new-group, $previous-breakpoint-value, space);
+			// Save the final group in the groups list
+			$groups: append($groups, $new-group, comma);
+			// Start a new group adding its name and min value
+			$new-group: $current-group-name;
+			$new-group: append($new-group, nth($breakpoint-values, $current-group-index), space);
 		}
 	}
 

data/test/css/style.css

@@ -79,7 +79,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (min-width: 600px) and (max-width: 992px) {
+@media (min-width: 600px) and (max-width: 768px) {
   /* line 76, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet {
     background: #a7e040;
@@ -289,7 +289,7 @@ tr > td:first-child {
     display: none;
   }
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   /* line 162, ../scss/style.scss */
   .mq-mixins-test tbody .respond-to-tablet-and-below {
     background: #a7e040;

metadata

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