breakpoint 0.1

data/CHANGELOG.markdown

@@ -0,0 +1,4 @@
+# Changelog
+
+## 0.1 - May 22, 2012
+* extract breakpoint from ssurvival kit to this gem

data/README.markdown

@@ -0,0 +1,153 @@
+# Breakpoint #
+
+**Really simple media queries in Sass**
+
+
+## Setup
+
+```sass
+// create $breakpoint variables like so
+// assume $breakpoint-default-feature if only a number
+$breakpoint1: 500px
+$breakpoint2: 30em
+// set min-width/max-width if both values are numbers
+$breakpoint3: 500px 700px
+// if one value is a string, assume a feature/value pair
+$breakpoint4: min-width 700px
+$breakpoint5: max-width 700px
+// for multidimensional lists, assume each item is a feature value pair
+$breakpoint6: max-width 700px, orientation portrait
+// handle one-sided features (ie. monochrome)
+$breakpoint7: max-width 700px, orientation portrait, monochrome
+$breakpoint8: monochrome
+```
+
+
+## Using Breakpoint
+
+Call the mixin and pass one of your breakpoint variables. You can also call it with a la carte arguments.
+
+```sass
+.foo
+  +breakpoint($breakpoint1)
+    content: 'foo'
+.bar
+  +breakpoint($breakpoint2)
+    content: 'bar'
+.baz
+  +breakpoint($breakpoint3)
+    content: 'baz'
+.omg
+  +breakpoint($breakpoint4)
+    content: 'omg'
+.wtf
+  +breakpoint($breakpoint5)
+    content: 'wtf'
+.bbq
+  +breakpoint($breakpoint6)
+    content: 'bbq'
+.zztop
+  +breakpoint($breakpoint7)
+    content: 'zztop'
+.elp
+  +breakpoint($breakpoint1, print)
+    content: 'elp'
+.csny
+  +breakpoint($breakpoint8)
+    content: 'csny'
+.rhcp
+  +breakpoint(30em 40em)
+    content: 'rhcp'
+```
+
+Example generated CSS
+
+```css
+@media screen and (min-width:  500px) {
+  .foo {
+    content: "foo";
+  }
+}
+
+@media screen and (min-width:  30em) {
+  .bar {
+    content: "bar";
+  }
+}
+
+@media screen and (min-width:  500px) and (max-width:  700px) {
+  .baz {
+    content: "baz";
+  }
+}
+
+@media screen and (min-width:  700px) {
+  .omg {
+    content: "omg";
+  }
+}
+
+@media screen and (max-width:  700px) {
+  .wtf {
+    content: "wtf";
+  }
+}
+
+@media screen and (max-width:  700px) and (orientation:  portrait) {
+  .bbq {
+    content: "bbq";
+  }
+}
+
+@media screen and (max-width:  700px) and (orientation:  portrait) and (monochrome) {
+  .zztop {
+    content: "zztop";
+  }
+}
+
+@media print and (min-width:  500px) {
+  .elp {
+    content: "elp";
+  }
+}
+
+@media screen and (monochrome) {
+  .csny {
+    content: "csny";
+  }
+}
+
+@media screen and (min-width:  30em) and (max-width:  40em) {
+  .rhcp {
+    content: "rhcp";
+  }
+}
+```
+
+### Installation
+
+  0. [Install Sass and Compass](http://compass-style.org/install/), if you haven't already.
+  1. **Terminal**: `gem install breakpoint`
+  2. Add `require 'breakpoint'` in Compass's config.rb file
+
+
+
+
+## Requirements
+
+- [Sass](http://sass-lang.com/)
+- [Compass](http://compass-style.org/)
+
+
+
+
+## License
+
+Licensed under MIT/GPL.
+
+GPL license:
+http://www.gnu.org/licenses/gpl.html
+
+MIT license:
+http://www.opensource.org/licenses/mit-license.php
+

data/lib/breakpoint.rb

@@ -0,0 +1,9 @@
+require 'compass'
+Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
+
+module Breakpoint
+
+  VERSION = "0.1"
+  DATE = "2012-05-22"
+
+end

data/stylesheets/_breakpoint.sass

@@ -0,0 +1,68 @@
+// experimental - depends on Sass 3.2 or higher
+  define your own breakpoints
+  styles nested in the mixin will pass thru in @content
+  resist the urge to settle on common device sizes
+  http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
+
+
+////////////////////////////
+// BREAKPOINT
+// breakpoint($breakpoint, $media: 'screen')
+//
+// // create $breakpoint variables like so
+// // assume $breakpoint-default-feature if only a number
+// $breakpoint1: 500px
+// $breakpoint2: 30em
+// // set min-width/max-width if both values are numbers
+// $breakpoint3: 500px 700px
+// // if one value is a string, assume a feature/value pair
+// $breakpoint4: min-width 700px
+// $breakpoint5: max-width 700px
+// // for multidimensional lists, assume each item is a feature/value pair
+// $breakpoint6: max-width 700px, orientation portrait
+// // handle one-sided features (ie. monochrome)
+// $breakpoint7: max-width 700px, orientation portrait, monochrome
+// $breakpoint8: monochrome
+////////////////////////////
+
+$breakpoint-default-feature: min-width !default
+
+@function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature)
+  $new-string: ''
+  @if $feature != false
+    $new-string: #{$query-string}unquote("and (#{$feature}:  #{$new-value}) ")
+  @else
+    $new-string: #{$query-string}unquote("and (#{$new-value}) ")
+  @return $new-string
+
+=breakpoint($breakpoint, $media: 'screen')
+  // initialize string
+  $query-string: '#{$media} '
+  @if type-of($breakpoint) == number
+    // assume max-width if only a number
+    $query-string: breakpoint-concatenate($query-string, $breakpoint)
+  @if type-of($breakpoint) == string
+    // handle one-sided features (ie. monochrome)
+    $query-string: breakpoint-concatenate($query-string, $breakpoint, false)
+  @else if type-of($breakpoint) == list
+    @if (type-of(nth($breakpoint, 1)) == number) and (type-of(nth($breakpoint, 2)) == number)
+      // set min/max if both values are numbers
+      // @if $modular-scale-loaded == true
+      //   $breakpoint: sort-list($breakpoint)
+      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), 'min-width')
+      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), 'max-width')
+    @else if (type-of(nth($breakpoint, 1)) == string)
+      // if one value is a string, assume a feature/value pair
+      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), nth($breakpoint, 1))
+    @else if (type-of(nth($breakpoint, 1)) == list)
+      // for multidimensional lists, assume each item is a feature value pair
+      @each $item in $breakpoint
+        @if type-of($item) == list
+          // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}:  #{nth($item, 2)}) ")
+          $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1))
+        @else
+          // handle one-sided features (ie. monochrome)
+          $query-string: breakpoint-concatenate($query-string, $item, false)
+  // write out the media query
+  @media #{$query-string}
+    @content

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification 
+name: breakpoint
+version: !ruby/object:Gem::Version 
+  hash: 9
+  prerelease: 
+  segments: 
+  - 0
+  - 1
+  version: "0.1"
+platform: ruby
+authors: 
+- Mason Wendell
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-05-22 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 45
+        segments: 
+        - 0
+        - 12
+        - 1
+        version: 0.12.1
+  type: :runtime
+  version_requirements: *id001
+description: Really simple media queries in Sass
+email: 
+- mason@zivtech.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.markdown
+- CHANGELOG.markdown
+- lib/breakpoint.rb
+- stylesheets/_breakpoint.sass
+homepage: http://thecodingdesigner.com
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.17
+signing_key: 
+specification_version: 3
+summary: An easy to use system for writing and managing media queries.
+test_files: []
+