responder 0.0.3 → 0.1

data/README.md

@@ -45,11 +45,11 @@ Responder will do the math for you and convert your breakpoint values into ems.
 **Prefer pixel breakpoints?** Easy:
 
 	$responder-use-ems: false; // Defaults to true
-	
-**Change the default media type **
 
-	$responder-media-type: screen; // Defaults to screen
-	
+**Change the default media type**
+
+	$responder-media-type: tv; // Defaults to screen
+
 ### 2. Using the respond-to mixin
 
 Yep, that was it. Your mixin is ready to use.
@@ -106,11 +106,69 @@ Given the example breakpoint list above, `respond-to(mobile-only)` will output t
 
 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.
 
-### 3. There's no #3. Enjoy and build amazing stuff
+### 3. Mobile first & Old IE
+
+If you're designing your site "mobile first" and prefer to serve a separate CSS to browsers that don't support media queries (IE8 and below), Responder gets you covered! 
+
+_(NOTE: This step is completely optional)_
+
+#### Old IE only stylesheet
+
+Just create a new SASS stylesheet and add the following lines:
+
+old-ie.scss:
+
+	// Enable support for old IE
+	$old-ie-support: true;
+
+	// Set the breakpoint for old IE
+	$old-ie-breakpoint: desktop;
+
+	// Import the main stylesheet
+	@import "style";
+
+
+`$old-ie-support` Enables support for old-IE, the main styles and old-IE-specific styles will be compiled to your new old-IE-only stylesheet.
 
-… And contribute to make Responder even better!
+`$old-ie-breakpoint` Styles from this breakpoint will be compiled (without media queries) into the IE-only stylesheet.
 
+That's it. Three lines of code and you get a new stylesheet for browsers that don't support media queries.
+
+#### respond-to(ie)
+
+Whenever you need to add old-IE specific rules, simply use the respond-to() mixin as you would with your media queries in your main stylesheet.
+
+An example on style.scss:
+
+	.block {
+		padding: 10px;
+		
+		 // Only gets compiled on you main stylesheet (style.css)
+		@include respon-to(tablet-only) {
+			background: blue;
+		}
+
+		// Gets compiled on you main stylesheet (style.css)
+		// AND on ie-only.css (without the media query)
+		@include respond-to(desktop-and-up) {
+			background-color: yellow;
+		}
+		
+		// Only gets compiled on ie-only.css
+		@include respond-to(ie) {
+			border: solid 1px red;
+		}
+	}
+
+The resulting old-ie.css is:
+
+	.block {
+		padding: 10px;
+		background-color: yellow;
+		border: solid 1px red;
+	}
 
 ## What's next?
 
-- Support for more media features (height, device-dimensions, orientation, retina displays, …)
+- Support for more media features (height, device-dimensions, orientation, retina displays, …)
+- Combined media queries? _e.g. respond-to(mobile-only && retina)_

data/lib/responder/version.rb

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

data/scss/responder/_respond-to.scss

@@ -6,9 +6,19 @@
 
 	$breakpoint-info: getBreakpointInfo($breakpoint);
 
+	// Breakpoint info error
 	@if $breakpoint-info == 'error' {
 		@warn '[ERROR] Invalid breakpoint parameter';
+
+	// Respond to IE
+	} @else if $breakpoint-info == 'ie' {
+		// Only print content if support is true
+		@if $old-ie-support == true {
+			@content;
+		}
+
 	} @else {
+
 		$breakpoint-name: nth($breakpoint-info, 1);
 		$breakpoint-extend: nth($breakpoint-info, 2);
 		$breakpoint-group: nth($breakpoint-info, 3);
@@ -17,33 +27,40 @@
 		$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));
+		@if $old-ie-support == true {
+			@if $breakpoint-name == $old-ie-breakpoint or $breakpoint-name == $old-ie-breakpoint {
+				@content;
+			}
+		} @else {
 
-			// 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 {
-				@if $breakpoint-extend == and-below {
-					$max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name)));
+			// 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 $breakpoint-extend == and-below {
+						$max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name)));
+					} @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 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 #{$responder-media-type} and (min-width: getSize($min-width)) and (max-width: getSize($max-width - 1)) { @content; }
-		} @else if $breakpoint-extend == and-up {
-			@media #{$responder-media-type} and (min-width: getSize($min-width)) { @content; }
-		} @else if $breakpoint-extend == and-below {
-			@media #{$responder-media-type} and (max-width: getSize($max-width - 1)) { @content; }
+			@if $breakpoint-extend == only {
+				@media #{$responder-media-type} and (min-width: getSize($min-width)) and (max-width: getSize($max-width - 1)) { @content; }
+			} @else if $breakpoint-extend == and-up {
+				@media #{$responder-media-type} and (min-width: getSize($min-width)) { @content; }
+			} @else if $breakpoint-extend == and-below {
+				@media #{$responder-media-type} and (max-width: getSize($max-width - 1)) { @content; }
+			}
 		}
 	}
 }

data/scss/responder/functions.scss

@@ -102,39 +102,44 @@
 
 @function getBreakpointInfo($breakpoint) {
 
-	// capture the extension (only, and-up or and-below)
-	$extension: regex($breakpoint, '((and-)?[a-z]+)$');
+	@if $breakpoint == ie {
+		@return ie;
+	} @else {
 
-	// capture the breakpoint name
-	$root: regex($breakpoint, '(.*?)-'+ $extension + '$');
+		// capture the extension (only, and-up or and-below)
+		$extension: regex($breakpoint, '((and-)?[a-z]+)$');
 
-	// Check if it's a normal breakpoint
-	@for $i from 1 through length($breakpoint-names) {
+		// capture the breakpoint name
+		$root: regex($breakpoint, '(.*?)-'+ $extension + '$');
 
-		@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;
+		// 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;
+			}
 		}
-	}
 
-	// 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, $extension, 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, $extension, 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';
+		@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/responder.scss

@@ -31,6 +31,8 @@ $breakpoint-groups: ();
 $responder-use-ems: true !default;
 $responder-ems-context: $base-font-size !default;
 $responder-media-type: screen !default;
+$old-ie-support: false !default;
+$old-ie-breakpoint: false !default;
 
 // =============================================================================
 // 2. Initialization

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

@@ -0,0 +1,82 @@
+/* line 17, ../scss/style.scss */
+body {
+  font: 16px/21px "Helvetica Neue", Arial, sans-serif;
+}
+
+/* line 24, ../scss/style.scss */
+.wrapper {
+  margin: 0 auto;
+  padding: 0 1em;
+  max-width: 1000px;
+}
+
+/* line 30, ../scss/style.scss */
+tr > td:first-child {
+  width: 80%;
+}
+
+/* line 45, ../scss/style.scss */
+.mq-mixins-test {
+  width: 100%;
+}
+/* line 51, ../scss/style.scss */
+.mq-mixins-test tbody .response-example {
+  text-align: center;
+  color: #ccc;
+}
+/* line 54, ../scss/style.scss */
+.mq-mixins-test tbody .response-example .isResponding {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-only {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-only .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-only .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-up {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
+  display: none;
+}
+/* line 63, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-below {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-below .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-desktop-and-below .isInactive {
+  display: none;
+}
+/* line 71, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-ie {
+  background: #a7e040;
+  color: white;
+}
+/* line 41, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-ie .isResponding {
+  display: inline;
+}
+/* line 42, ../scss/style.scss */
+.mq-mixins-test tbody .respond-to-ie .isInactive {
+  display: none;
+}

data/test/index.html

@@ -4,7 +4,12 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Responder testing</title>
+	<!--[if lte IE 8]>
+	<link href="/css/style-old-ie.css" rel="stylesheet">
+	<![endif]-->
+	<!--[if gt IE 8]><!-->
 	<link href="/css/style.css" rel="stylesheet">
+	<!--<![endif]-->
 </head>
 <body>
 	<div class="wrapper">
@@ -22,6 +27,9 @@
 			<li>desktop 992px</li>
 		</ul>
 
+		<h2>Support for old-IE</h2>
+		<pre><code>$old-ie-breakpoint: desktop</code></pre>
+
 		<h2>Respond-to mixin</h2>
 		<p>Resize your browser!</p>
 
@@ -148,6 +156,26 @@
 				</tr>
 			</tbody>
 		</table>
+
+		<hr>
+
+		<h3>Old IE</h3>
+
+		<table class="mq-mixins-test">
+			<thead>
+				<tr>
+					<th>Mixin</th>
+					<th>Response</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code class="language-css">respond-to(ie)</code></td>
+					<td class="response-example respond-to-ie"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
+				</tr>
+			</tbody>
+		</table>
+
 	</div> <!-- /wrapper -->
 
 </body>

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

@@ -0,0 +1,13 @@
+// =============================================================================
+// Respond-to IE Test Bed
+//
+// =============================================================================
+
+// Enable support for old IE
+$old-ie-support: true;
+
+// Set the breakpoint for old IE
+$old-ie-breakpoint: desktop;
+
+// Import the main stylesheet
+@import "style";

data/test/scss/style.scss

@@ -67,5 +67,11 @@ tr > td:first-child { width: 80%;  }
 				}
 			}
 		}
+
+		.respond-to-ie {
+			@include respond-to(ie) {
+				@include is-responding;
+			}
+		}
 	}
 }

metadata

@@ -1,13 +1,12 @@
 --- !ruby/object:Gem::Specification 
 name: responder
 version: !ruby/object:Gem::Version 
-  hash: 25
+  hash: 9
   prerelease: 
   segments: 
   - 0
-  - 0
-  - 3
-  version: 0.0.3
+  - 1
+  version: "0.1"
 platform: ruby
 authors: 
 - Daniel Guillan
@@ -15,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-10-22 00:00:00 Z
+date: 2012-10-24 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -85,8 +84,10 @@ files:
 - scss/responder/_respond-to.scss
 - scss/responder/functions.scss
 - test/config.rb
+- test/css/style-old-ie.css
 - test/css/style.css
 - test/index.html
+- test/scss/style-old-ie.scss
 - test/scss/style.scss
 homepage: http://github.com/danielguillan/responder
 licenses: []
@@ -123,6 +124,8 @@ specification_version: 3
 summary: Magic media queries for your Compass project
 test_files: 
 - test/config.rb
+- test/css/style-old-ie.css
 - test/css/style.css
 - test/index.html
+- test/scss/style-old-ie.scss
 - test/scss/style.scss