compass-respond 0.0.1

data/README.md

@@ -0,0 +1,93 @@
+sass-respond
+===============
+
+There are two parts to this...
+
+  + +respond-to($device)
+
+  + +respond-above($screen-size)
+
++respond-to example
+-------------------
+
+SASS:
+
+    @import "respond-to"
+    .content
+      width: 100%
+      margin-right: auto
+      margin-left: auto
+      +respond-to(handhelds)
+        .content-title
+          display: none
+      +respond-to(wide-handhelds)
+        width: 90%
+      +respond-to(tablets)
+        width: 80%
+      +respond-to(desktops)
+        width: 70%
+        max-width: 1150px
+
+CSS:
+
+    .content { width: 100%; margin-right: auto; margin-left: auto; }
+    @media only screen and (max-width: 479px) { .content .content-title { display: none; } }
+    @media only screen and (min-width: 480px) and (max-width: 767px) { .content { width: 90%; } }
+    @media only screen and (min-width: 768px) and (max-width: 959px) { .content { width: 80%; } }
+    @media only screen and (min-width: 960px) { .content { width: 70%; max-width: 1150px; } }
+
++respond-above example
+----------------------
+
+SASS:
+
+    @import "respond-above"
+    .charts
+      column-count: 1
+      +respond-above(xs)
+        column-count: 2
+      +respond-above(s)
+        column-count: 3
+      +respond-above(m)
+        column-count: 4
+      +respond-above(l)
+        column-count: 5
+      +respond-above(xl)
+        column-count: 6
+
+CSS:
+
+    .charts { column-count: 1; }
+    @media only screen and (min-width: 480px) { .charts { column-count: 2; } }
+    @media only screen and (min-width: 600px) { .charts { column-count: 3; } }
+    @media only screen and (min-width: 768px) { .charts { column-count: 4; } }
+    @media only screen and (min-width: 992px) { .charts { column-count: 5; } }
+    @media only screen and (min-width: 1382px) { .charts { column-count: 6; } }
+
+
+Usage
+------
+
+First add compass-respond to your Gemfile:
+
+    gem "compass-respond"
+
+And require compass-respond-to in your compass.rb or config.rb:
+
+    require "compass-respond"
+
+Then you can import the mixin you want into your .sass file:
+
+    @import "respond-to"
+    @import "respond-above"
+
+Credit
+------
+
+respond-to() is a convenience plugin for [Chris Eppstein's Gist](https://gist.github.com/1215856#file_7_media_queries.sass) demonstrating Sass 3.2's block passing to mixins.
+
+respond-above() is a simple mixin based on Malarkey's [320andup](https://github.com/malarkey/320andup/) responsive steps.
+
+I'm fully expecting Compass to add something like this in the near future.
+
+Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.

data/Rakefile

@@ -0,0 +1,2 @@
+require 'rubygems'
+require 'rake'

data/VERSION.yml

@@ -0,0 +1,6 @@
+---
+:major: 0
+:minor: 0
+:patch: 1
+:state:
+:build:

data/lib/compass-respond.rb

@@ -0,0 +1,2 @@
+require "compass"
+Compass::Frameworks.register("compass-respond", :path => File.join(File.dirname(__FILE__)))

data/lib/stylesheets/_respond-above.sass

@@ -0,0 +1,24 @@
+// https://github.com/malarkey/320andup/
+
+$respond-above-xs: 480px !default
+$respond-above-s:  600px !default
+$respond-above-m:  768px !default
+$respond-above-l:  992px !default
+$respond-above-xl: 1382px !default
+
+=respond-above($screen-size)
+  @if $screen-size == xs
+    @media only screen and (min-width: $respond-above-xs)
+      @content
+  @else if $screen-size == s
+    @media only screen and (min-width: $respond-above-s)
+      @content
+  @else if $screen-size == m
+    @media only screen and (min-width: $respond-above-m)
+      @content
+  @else if $screen-size == l
+    @media only screen and (min-width: $respond-above-l)
+      @content
+  @else if $screen-size == xl
+    @media only screen and (min-width: $respond-above-xl)
+      @content

data/lib/stylesheets/_respond-to.sass

@@ -0,0 +1,25 @@
+// https://gist.github.com/1215856#file_7_media_queries.sass
+
+$respond-to-handhelds-max: 479px !default
+
+$respond-to-wide-handhelds-min: ($respond-to-handhelds-max + 1px) !default
+$respond-to-wide-handhelds-max: 767px !default
+
+$respond-to-tablets-min: ($respond-to-wide-handhelds-max + 1) !default
+$respond-to-tablets-max: 959px !default
+
+$respond-to-desktops-min: ($respond-to-tablets-max + 1) !default
+
+=respond-to($device)
+  @if $device == handhelds
+    @media only screen and (max-width: $respond-to-handhelds-max)
+      @content
+  @else if $device == wide-handhelds
+    @media only screen and (min-width: $respond-to-wide-handhelds-min) and (max-width: $respond-to-wide-handhelds-max)
+      @content
+  @else if $device == tablets
+    @media only screen and (min-width: $respond-to-tablets-min) and (max-width: $respond-to-tablets-max)
+      @content
+  @else if $device == desktops
+    @media only screen and (min-width: $respond-to-desktops-min)
+      @content

data/lib/version.rb

@@ -0,0 +1,60 @@
+module RespondTo
+  module Version
+    # Returns a hash representing the version.
+    # The :major, :minor, and :teeny keys have their respective numbers.
+    # The :string key contains a human-readable string representation of the version.
+    # The :rev key will have the current revision hash.
+    #
+    # This method swiped from Fancy Buttons by Brandon Mathis who swiped it from Compass by Chris Eppstein who swiped it from Haml and then modified it, so some credit goes to Nathan Weizenbaum too.
+    def version
+      if defined?(@version)
+        @version
+      else
+        read_version
+      end
+    end
+
+    protected
+
+    def scope(file) # :nodoc:
+      File.join(File.dirname(__FILE__), '..', file)
+    end
+
+    def read_version
+      require 'yaml'
+      @version = YAML::load(File.read(scope('VERSION.yml')))
+      @version[:teeny] = @version[:patch]
+      @version[:string] = "#{@version[:major]}.#{@version[:minor]}"
+      @version[:string] << ".#{@version[:patch]}" if @version[:patch]
+      @version[:string] << ".#{@version[:state]}" if @version[:state]
+      @version[:string] << ".#{@version[:build]}" if @version[:build]
+      #if !ENV['OFFICIAL'] && r = revision
+      #  @version[:string] << ".#{r[0..6]}"
+      #end
+      @version
+    end
+
+    def revision
+      revision_from_git
+    end
+
+    def revision_from_git
+      if File.exists?(scope('.git/HEAD'))
+        rev = File.read(scope('.git/HEAD')).strip
+        if rev =~ /^ref: (.*)$/
+          rev = File.read(scope(".git/#{$1}")).strip
+        end
+      end
+    end
+  end
+  extend RespondTo::Version
+  def self.const_missing(const)
+    # This avoid reading from disk unless the VERSION is requested.
+    if const == :VERSION
+      version[:string]
+    else
+      super
+    end
+  end
+end
+

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: compass-respond
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Mike Stenhouse
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-05-18 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70335765962920 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.0.alpha
+  type: :runtime
+  prerelease: false
+  version_requirements: *70335765962920
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &70335765960700 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.11.7
+  type: :runtime
+  prerelease: false
+  version_requirements: *70335765960700
+description: Easier media queries for Compass.
+email: mike@donotremove.co.uk
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- VERSION.yml
+- Rakefile
+- lib/compass-respond.rb
+- lib/stylesheets/_respond-above.sass
+- lib/stylesheets/_respond-to.sass
+- lib/version.rb
+homepage: http://github.com/mikesten/compass-respond
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: Easier media queries for Compass.
+test_files: []