Release version 0.1.0

CHANGELOG.mkdn

@@ -1,6 +1,16 @@
 # Responsive Sass Changelog
 
+## 0.1.0
+- Mixins are now using em's
+- Added normalize.css a alternative for reset.
+- Added Frameless Grid to gem [FRAMELESS] (http://framelessgrid.com.)
+- Added the option to hide elements using display:none.
+- Added the option to change your font-size using $font-size.
+- Added the option to change your margins using $margin
+- Added em function to easy convert your pixels to ems [TheSassWay] (http://thesassway.com/intermediate/responsive-web-design-part-1)
+- Height on backgrounds can now be accessed using $height
+
 ## 0.0.2
 - Added ability to change your background image depending on size or devise resolution.
-- fixed issue with height being required.
+- Fixed issue with height being required.
 - Added mixin to kill webkit link highlighting

README.mkdn

@@ -24,46 +24,112 @@ Add to a project:
 Or create a new project:
 
     compass -r responsive-sass -f responsive-sass project_directory
+
+To use with the Serve Gem
+   //compass.config
+   require 'responsive-sass'
 
 Media Query Mixins:
 ==================
 
 Note: Setting your elements height or background is not required.
 
-- Your can set your background image by passing your image url to the background variable. 
+- Your can set your background image by passing your image url to the background variable.
+- You can hide any element by passing $display: true
 
-* min-width-960
+min-width-960
 
     @include min-width-960($width, $height, "/images/high-res.png");
 
-* tablet-portrait
+tablet-portrait
 
     @include tablet-portrait($width, $height, "/images/high-res.png");
 
-* tablet-landscape
+tablet-landscape
 
     @include tablet-landscape($width, $height, "/images/high-res.png");
        
-* mobile-landscape
+mobile-landscape
 
     @include mobile-landscape($width, $height, "/images/high-res.png");
 
-* mobile-portrait
+mobile-portrait
 
     @include mobile-portrait($width, $height, "/images/high-res.png");
 
-* high-res
+high-res
 
     @include high-res($width, $height, "/images/high-res.png");
-
+
+Frameless Config
+================
+    $font-size: 16px;     // Your base font-size in pixels
+    $em: $font-size / 1em;  // Shorthand for outputting ems
+
+    $column: 48px;  // The column-width of your grid in pixels
+    $gutter: 24px;  // The gutter-width of your grid in pixels
+
+Column-widths in variables, in ems
+
+     $cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
+     $cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
+     $cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
+     $cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
+     $cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
+     $cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
+     $cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
+     $cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
+     $cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
+     $cols10: (10 * ($column + $gutter) - $gutter) / $em;
+     $cols11: (11 * ($column + $gutter) - $gutter) / $em;
+     $cols12: (12 * ($column + $gutter) - $gutter) / $em;
+     $cols13: (13 * ($column + $gutter) - $gutter) / $em;
+     $cols14: (14 * ($column + $gutter) - $gutter) / $em;
+     $cols15: (15 * ($column + $gutter) - $gutter) / $em;
+     $cols16: (16 * ($column + $gutter) - $gutter) / $em;
+
+Column-widths in a function, in ems
+
+     @mixin width ($cols:1) {
+       width: ($cols * ($column + $gutter) - $gutter) / $em;
+     }
+     
+
+ An easy way to zoom your entire layout in or out (as long as it's set in ems).
+ Just change the media queries to activate them.
+ Assuming your base font-size is 16:
+ - the first one zooms out by a factor of (16-2)/16 = 0.875
+ - the second one zooms in by a factor of (16+2)/16 = 1.125
+
+     @media screen and (max-width: 1px) {
+       body {
+         font-size: ($font-size - 2) / $em;
+       }
+     }
+
+     @media screen and (max-width: 1px) {
+       body {
+         font-size: ($font-size + 2) / $em;
+       }
+     }
+
+[More Info] (http://framelessgrid.com/)
+
+Normalize.css
+=============
+
+Simply use:
+
+    @import "normalize";
+
 Misc Mixins:
 ===========
 
-* kill-mobile-zoom
+kill-mobile-zoom
 
     @include kill-mobile-zoom;
 
-* kill-tap-highlight
+kill-tap-highlight
 
     @include kill-tap-highlight;
 

lib/responsive-sass.rb

@@ -1,4 +1,7 @@
 require "responsive-sass/version"
-Compass::Frameworks.register('responsive-sass',  :path => "#{File.dirname(__FILE__)}/..")
-
-
+module Compass
+  module Responsive
+    base_directory  = File.join(File.dirname(__FILE__), '..')
+    Compass::Frameworks.register('responsive-sass', :path => base_directory)
+  end
+end

lib/responsive-sass/version.rb

@@ -1,5 +1,5 @@
-module Responsive
-  module Sass
-    VERSION = "0.0.2"
+module Compass
+  module Responsive
+    VERSION = "0.1.0"
   end
 end

responsive-sass.gemspec

@@ -4,7 +4,7 @@ require "responsive-sass/version"
 
 Gem::Specification.new do |s|
   s.name        = "responsive-sass"
-  s.version     = Responsive::Sass::VERSION
+  s.version     = Compass::Responsive::VERSION
   s.authors     = ["Nick Treadway"]
   s.email       = ["rnt@yeti-media.com"]
   s.homepage    = "http://github.com/ntreadway/responsive-sass"