compass-responsive 0.1.0

data/README.md

@@ -0,0 +1,57 @@
+#Compass responsive
+
+**A responsive compass extension to simplify configuring
+responsive breakpoints and sizing, that allows you to think in
+pixels but compile in ems or rems.**
+
+See [my compass-responsive blog post](http://blog.colinmeinke.com/a-responsive-extension-for-compass) for a full usage tutorial.
+
+##What can I use it for?
+
+1. `-responsive-unit($size: 50px)`: a function that converts
+pixels to ems/rems.
+2. `@include -responsive-breakpoint(500px) { }`: a mixin that
+generates min-width media queries in ems.
+3. `@include -font-size($size: 20px, $breakpoints: (500px, 960px), $scale: (2, 4));`: 
+a mixin that allows you to define a font-size suitable for
+small screens, and then scale the font-size up at defined
+breakpoints relative to the original definition.
+
+##How do I use it?
+
+###-responsive-unit()
+
+Takes the following params:
+
+* $base (string): base font-size in pixels
+* $unit (string): unit to convert to [em, rem]
+* $size (string): pixel value to convert
+
+###-responsive-breakpoint()
+
+Takes the following params:
+
+* $size (string): size in pixels
+
+###-responsive-font-size()
+
+Takes the following params:
+
+* $base (string): base font-size in pixels
+* $unit (string): unit to convert font-size to [em, rem]
+* $size (string): font-size in pixels
+* $breakpoints (list): list of breakpoints in pixels
+* $scale (list): list of font-size scale values for 
+corresponding breakpoints
+
+### Installation
+
+To install compass-responsive:
+
+1. Install the gem with bundler `gem 'compass-responsive'`.
+2. Initialise a new compass project with `compass install . 
+-r responsive --using responsive`.
+
+##License
+
+Licensed under MIT by Colin Meinke, 2012.

data/lib/responsive.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("responsive", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_responsive.scss

@@ -0,0 +1,3 @@
+@import 'responsive/unit';
+@import 'responsive/breakpoint';
+@import 'responsive/font-size';

data/stylesheets/responsive/_breakpoint.scss

@@ -0,0 +1,11 @@
+// Generate a min-width media query defined
+// in pixels but output in ems.
+// 
+// $size (string): size in pixels
+@mixin -responsive-breakpoint($size) {
+    @media screen and (min-width: -responsive-unit(
+        $unit: em, 
+        $size: $size)) {
+        @content;
+    }
+}

data/stylesheets/responsive/_font-size.scss

@@ -0,0 +1,38 @@
+// Define a font-size suitable for small screens, and
+// then scale the font-size up at defined breakpoints
+// relative to the original definition.
+// 
+// $base (string):      base font-size in pixels
+// $unit (string):      unit to convert font-size to [em, rem]
+// $size (string):      font-size in pixels
+// $breakpoints (list): list of breakpoints in pixels
+// $scale (list):       list of font-size scale values 
+//                      for corresponding breakpoints
+@mixin -responsive-font-size(
+    $base: $-responsive-default-base,
+    $unit: $-responsive-default-unit,
+    $size: 16px,
+    $breakpoints: (500px, 960px),
+    $scale:       (1.2,   1.4)
+) {
+    // Define base font-size for small screens
+    font-size: -responsive-unit(
+        $base: $base,
+        $unit: $unit,
+        $size: $size
+    );
+
+    // Iterate up through breakpoints and calculate
+    // font-size for each 
+    $i: 1;
+    @each $breakpoint in $breakpoints {
+        @include -responsive-breakpoint($breakpoint) {
+            font-size: -responsive-unit(
+                $base: $base,
+                $unit: $unit,
+                $size: $size * nth($scale, $i)
+            );
+        }
+        $i: $i + 1;
+    }
+}

data/stylesheets/responsive/_unit.scss

@@ -0,0 +1,12 @@
+// Convert pixel value to em/rem value.
+// 
+// $base (string): base font-size in pixels
+// $unit (string): unit to convert to [em, rem]
+// $size (string): pixel value to convert
+@function -responsive-unit(
+    $base: $-responsive-default-base,
+    $unit: $-responsive-default-unit,
+    $size: 16px
+) {
+    @return #{$size / $base}#{$unit};
+}

data/templates/project/manifest.rb

@@ -0,0 +1,11 @@
+discover :all
+
+description "A responsive compass extension."
+
+help %Q{
+See http://blog.colinmeinke.com/a-responsive-extension-for-compass for a full usage tutorial.
+}
+
+welcome_message %Q{
+See http://blog.colinmeinke.com/a-responsive-extension-for-compass for a full usage tutorial.
+}

data/templates/project/screen.scss

@@ -0,0 +1,4 @@
+$-responsive-default-base: 16px;
+$-responsive-default-unit: em;
+
+@import 'responsive';

metadata

@@ -0,0 +1,53 @@
+--- !ruby/object:Gem::Specification
+name: compass-responsive
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Colin Meinke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-12-11 00:00:00.000000000 Z
+dependencies: []
+description: A responsive compass extension to simplify configuring responsive breakpoints
+  and sizing, that allows you to think in pixels but compile in ems or rems.
+email: hello@colinmeinke.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/responsive.rb
+- stylesheets/_responsive.scss
+- stylesheets/responsive/_font-size.scss
+- stylesheets/responsive/_breakpoint.scss
+- stylesheets/responsive/_unit.scss
+- templates/project/manifest.rb
+- templates/project/screen.scss
+homepage: http://rubygems.org/gems/compass-responsive
+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.23
+signing_key: 
+specification_version: 3
+summary: A responsive compass extension
+test_files: []