breakpoint 1.1.1 → 1.2

data/CHANGELOG.markdown

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.2 - August 16th, 2012
+* Added ability to force the 'all' media type to be written by setting `$breakpoint-force-media-all: true;`. Defaults to `false`.
+* Added ability to generate no query fallback code. See the README for full documentaiton.
+
 ## 1.1.1 - July 30, 2012
 * Added (forgot to include the first time) the ability to query the media type using `breakpoint-get-context('media')`
 

data/README.markdown

@@ -14,15 +14,30 @@ Breakpoint also allows you to get the [context of your media queries](https://gi
 
 If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, check out [Respond-To](https://github.com/snugug/respond-to); a string based naming API for Breakpoint.
 
+**It is important to note** that due to limitations within the Sass language itself, which themselve stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoiadable. That being said, once [Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet](https://github.com/nex3/sass/issues/241) hits, be sure we're going to take full advantage of it.
+
+## Table of Contents
+
+1. [Requirements](#requirements)
+2. [Installation](#installation)
+3. [Setup](#setup)
+    * [Breakpoint Options](#breakpoint-options)
+    * [Using Breakpoint](#using-breakpoint)
+4. [Media Query Context](#media-query-context)
+5. [No Query Fallback](#no-query-fallback)
+    * [Wrapping Selector, Same Stylesheet](#wrapping-selector-same-stylesheet)
+    * [No Wrapping Selector, Separate Stylesheet](#no-wrapping-selector-separate-stylesheet)
+    * [Wrapping Selector, Separate Stylesheet](#wrapping-selector-separate-stylesheet)
+
 ## Requirements
 
 Breakpoint is a Compass extension, so make sure you have [Sass and Compass Installed](http://compass-style.org/install/) in order to use its awesomeness!
 
-Breakpoint also requires Sass 3.2, which is currently in pre-release. Breakpoint should install Sass 3.2 for you when you install it, but in case you are getting errors, open up your terminal and type the following in:
+Breakpoint also requires Sass 3.2. Breakpoint should install Sass 3.2 for you when you install it, but in case you are getting errors, open up your terminal and type the following in:
 
-`gem install sass --pre`
+`gem install sass`
 
-This will install Sass 3.2. If you are compiling with CodeKit, [Chris Coyier has an awesome writeup](http://css-tricks.com/media-queries-sass-3-2-and-codekit/) on how to get CodeKit playing nice with Sass 3.2.
+This will install Sass 3.2. If you are compiling with CodeKit, [Chris Coyier has an awesome writeup](http://css-tricks.com/media-queries-sass-3-2-and-codekit/) on how to get CodeKit playing nice with Sass 3.2, at least until it is updated to 3.2.
 
 ## Installation
 
@@ -297,6 +312,129 @@ Caviats with Media Query context:
 * If you have `$breakpoint-to-ems` set to true, you will get returns in base ems. You can run non-em based values through `breakpoint-to-base-em($value)` to convert them to base ems.
 * If you are testing for a prefixed feature (such as `device-pixel-ratio`), you need to test for the prefixed value (`-webkit-device-pixel-ratio`, `min--moz-device-pixel-ratio`, etc…).
 
+## No Query Fallback
+
+Breakpoint provides a way to generate fallback CSS for if you would like the CSS to apply even if media queries aren't available. There are three methidologies we discovered cover most, if not all, of the stylistic options a user could have in a system like this: a wrapping selector within the same stylesheet, a seperate stylesheet with no wrapping selector, and a seperate stylesheet with a wrapping selector. For both of these, bare in mind that Sass cannot create separate stylesheets automatically ([yet](https://github.com/nex3/sass/issues/241)), so you're going to need to do it by hand, but the tools we've provided are very powerful, so we think you'll like.
+
+There are now two new breakpoint flags to set that control no query support, `$breakpoint-no-queries` for specifying that only no query output should be output by Breakpoint and `$breakpoint-no-query-wrappers` for specifying that you want no query wrappers to be printed. Both of the new flags, `$breakpoint-no-queries` and `$breakpoint-no-query-wrappers` default to `false`, toggling them to `true` activates them. For the purposes of clarity in the following code samples, I'm including both flags even though the `false` flags are not explicitly needed. When passing in a wrapper, you must write the whole wrapper and may include a compound wrapper, *i.e.* `'.no-mqs'` or `'#print'` or `'.high-dpi.no-mqs'`. Variables may also be passed in, but they still require the whole wrapper.
+
+### Wrapping Selector, Same Stylesheet
+```scss
+// style.scss
+$breakpoint-no-queries: false;
+$breakpoint-no-query-wrappers: true;
+
+#foo {
+  background: red;
+  @include breakpoint(567px, $no-query: '.no-mqs') {
+    background: green;
+  }
+}
+```
+```css
+/* style.css */
+#foo {
+  background: red;
+}
+
+.no-mqs #foo {
+  background: green;
+}
+
+@media (min-width: 567px) {
+  #foo {
+    background: green;
+  }
+}
+```
+
+### No Wrapping Selector, Separate Stylesheet
+```scss
+// _layout.scss
+#foo {
+  background: red;
+  @include breakpoint(567px, $no-query: true) {
+    background: green;
+  }
+}
+```
+```scss
+// style.scss
+$breakpoint-no-queries: false;
+$breakpoint-no-query-wrappers: false;
+
+@import 'layout';
+```
+```scss
+// no-mq.scss
+$breakpoint-no-queries: true;
+$breakpoint-no-query-wrappers: false;
+
+@import 'layout';
+```
+```css
+/* style.css */
+#foo {
+  background: red;
+}
+
+@media (min-width: 567px) {
+  #foo {
+    background: green;
+  }
+}
+```
+```css
+/* no-mq.css */
+#foo {
+  background: red;
+  background: green;
+}
+```
+
+### Wrapping Selector, Separate Stylesheet
+```scss
+// _layout.scss
+#foo {
+  background: red;
+  @include breakpoint(567px, $no-query: '.no-mq') {
+    background: green;
+  }
+}
+```
+```scss
+// style.scss
+$breakpoint-no-queries: false;
+$breakpoint-no-query-wrappers: false;
+
+@import 'layout';
+```
+```scss
+// no-mq.scss
+$breakpoint-no-queries: true;
+$breakpoint-no-query-wrappers: true;
+
+@import 'layout';
+```
+```css
+/* style.css */
+#foo {
+  background: red;
+}
+
+@media (min-width: 567px) {
+  #foo {
+    background: green;
+  }
+}
+```
+```css
+/* no-mq.css */
+.no-mq #foo {
+  background: red;
+  background: green;
+}
+```
 
 ## License
 

data/lib/breakpoint.rb

@@ -3,8 +3,8 @@ require 'compass'
 Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
 
 module Breakpoint
-  VERSION = "1.1.1"
-  DATE = "2012-07-29"
+  VERSION = "1.2"
+  DATE = "2012-08-16"
 end
 
 module Sass::Script::Functions

data/stylesheets/_breakpoint.scss

@@ -3,11 +3,15 @@
 //////////////////////////////
 $breakpoint-default-feature:  'min-width'     !default;
 $breakpoint-default-media:    'all'           !default;
+$breakpoint-force-media-all:  false           !default;
 $breakpoint-default-pair:     'width'         !default;
 $breakpoint-to-ems:           false           !default;
 $breakpoint-prefixes:         'webkit' 'moz'  !default;
 $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max-device-pixel-ratio'                      !default;
 
+$breakpoint-no-queries:       false           !default;
+$breakpoint-no-query-wrappers: false           !default;
+
 //////////////////////////////
 // Import Breakpoint Helpers
 //////////////////////////////
@@ -17,7 +21,7 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
 //////////////////////////////
 // Breakpoint Mixin
 //////////////////////////////
-@mixin breakpoint($breakpoint, $media: $breakpoint-default-media) {
+@mixin breakpoint($breakpoint, $media: $breakpoint-default-media, $no-query: false) {
   // Query and Media String Defaults
   $query:         false !default;
   $query-holder:  false !default;
@@ -38,12 +42,12 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
 
   // Reset Context
   @include TXkgcmVzZXQhIEdvIGF3YXkh;
-  
+
   // Set Media Context
   $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('media', $media);
 
   // Initialize Query String
-  @if $media != 'all' {
+  @if $media != 'all' or $breakpoint-force-media-all {
     $media-string: "#{$media} ";
   }
   @else {
@@ -146,29 +150,42 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
     }
   }
 
-  @if not $webkit and not $moz and not $o and not $ms {
-    @media #{$query} {
-      @content;
+  @if $breakpoint-no-queries {
+    @if $no-query {
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no queries', true);
+      @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
+        #{$no-query} & {
+          @content;
+          $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
+        }
+      }
+      @else {
+        @content;
+      }
     }
   }
   @else {
-    @if $webkit {
-      @media #{$webkit} {
+    @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
+      #{$no-query} & {
         @content;
+        $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
       }
     }
-    @if $moz {
-      @media #{$moz} {
+    @if $query {
+      @media #{$query} {
         @content;
       }
     }
-    @if $o {
-      @media #{$o} {
-        @content;
+    @else {
+      $pf-queries: $webkit, $moz, $o, $ms;
+      $pf-query: ();
+
+      @each $pfq in $pf-queries {
+        @if $pfq {
+          $pf-query: append($pf-query, $pfq, comma);
+        }
       }
-    }
-    @if $ms {
-      @media #{$ms} {
+      @media #{$pf-query} {
         @content;
       }
     }

metadata

@@ -4,9 +4,8 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 1
-  - 1
-  - 1
-  version: 1.1.1
+  - 2
+  version: "1.2"
 platform: ruby
 authors: 
 - Mason Wendell
@@ -15,13 +14,27 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-07-29 00:00:00 -04:00
+date: 2012-08-16 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
-  name: compass
+  name: sass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 3
+        - 2
+        - 0
+        version: 3.2.0
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
@@ -31,7 +44,7 @@ dependencies:
         - 1
         version: 0.12.1
   type: :runtime
-  version_requirements: *id001
+  version_requirements: *id002
 description: Really simple media queries in Sass
 email: 
 - mason@zivtech.com