scss_helpers 0.0.1 → 0.0.2

data/README.md

@@ -1,12 +1,12 @@
 # Scss Helpers
 
-TODO: Write a gem description
+This gem includes various SCSS mixins to help a web developer write CSS faster. While most are cross-browser this is not an attempt at being a polyfill but rather an effort to use CSS3 to its full potential. I've tried to keep the mixins as close to the actual CSS declaration as possible but in some cases it could not be done.
 
 ## Installation
 
 Add this line to your application's Gemfile:
 
-    gem 'scss-helpers'
+    gem 'scss_helpers'
 
 And then execute:
 
@@ -14,11 +14,35 @@ And then execute:
 
 Or install it yourself as:
 
-    $ gem install scss-helpers
+    $ gem install scss_helpers
 
 ## Usage
+To use the various mixins, you will need to add the helpers.scss file to your application.css.scss:
 
-TODO: Write usage instructions here
+	@import 'helpers';
+
+All the mixins are standard SCSS mixins and are included as such.
+
+  	@include border-radius(5px);
+
+## Heplers
+Helpers with great usefulness:
+
+* border-radius
+* box-shadow
+* lin-gradient
+* circle
+* transition
+
+Helpers with questionable helpfulness:
+
+* clear
+* text-shadow
+* text-gradient
+* font
+
+## Known Issues
+* Old webkit browsers only use the "left top, left bottom" linear-gradient.
 
 ## Contributing
 

data/lib/assets/stylesheets/helpers.scss

@@ -1,16 +1,11 @@
-/* @mixin css3pie {
-   // Turn this on and include if you want to use PIE
-   behavior: url(PIE.htc);
-}
-*/
-@mixin border-radius($r) {
+@mixin border-radius( $r ) {
   // $r: radius, can use 5px 10px 10px 5px
   -moz-border-radius: $r;
   -webkit-border-radius: $r;
   border-radius: $r;
 }
 
-@mixin box-shadow($args) {
+@mixin box-shadow( $args ) {
   // $args: standard CSS including inset
   -webkit-box-shadow: $args;
   -o-box-shadow: $args;
@@ -23,7 +18,6 @@
   // $start: hex of the start
   // $stop:  hex of the stop
   // $point: top? 
-  // TODO: figure out how to make old webkit use $point
   background: $color;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $start), color-stop(100%, $stop)); /* Safari 4+, old Chrome */
   background: -webkit-linear-gradient($point, $start, $stop); /* Safari 5.1+, Chrome */
@@ -35,25 +29,50 @@
   background: linear-gradient($point, $start, $stop);
 }
 
-@mixin font( $font-name, $font-url ) {
-  // $font-name: The name of the font to use
-  // $font-url:  The url to given font sans the ext.
-  @font-face {
-    font-family: '#{$font-name}';
-    src: url('#{$font-url}.eot?#iefix') format('embedded-opentype'), 
-         url('#{$font-url}.woff') format('woff'), 
-         url('#{$font-url}.ttf')  format('truetype'),
-         url('#{$font-url}.svg#svg#{$font-name}') format('svg');
-  }
-}
-
-@mixin circle($r) {
+@mixin circle( $r ) {
   // $r: radius
   @include border-radius($r);
   height: ($r * 2);
   width: ($r * 2);
 }
 
+@mixin transition( $args: all .6s linear ) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin opacity($opacity: 0.5) {
+  -moz-opacity: $opacity;
+  -khtml-opacity: $opacity;
+  -webkit-opacity: $opacity;
+  opacity: $opacity;
+}
+@mixin transition-duration( $duration: 0.6s ) {
+  -moz-transition-duration: $duration;
+  -webkit-transition-duration: $duration;
+  transition-duration: $duration;
+}
+@mixin rotation( $deg: 90deg ) {
+  -webkit-transform: rotate( $deg );
+  -moz-transform: rotate( $deg );
+  transform: rotate( $deg );
+}
+@mixin scale( $ratio: 1.5 ) {
+  -webkit-transform: scale( $ratio );
+  -moz-transform: scale( $ratio );
+  transform: scale( $ratio );
+}
+@mixin translate( $x: 0, $y: 0 ) {
+  -moz-transform: translate( $x, $y );
+  -webkit-transform: translate( $x, $y );
+  -o-transform: translate( $x, $y );
+  -ms-transform: translate( $x, $y );
+  transform: translate( $x, $y );
+}
+
 @mixin clear() {
   clear: both;
   display: block;
@@ -77,11 +96,14 @@
   //-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#{$color}', offx='#{$x}', offy='#{$y}')";
   text-shadow: $x+px $y+px $b+px $color;
 }
-@mixin transition($args: all .6s linear) {
-  -webkit-transition: $args;
-  -moz-transition: $args;
-  -ms-transition: $args;
-  -o-transition: $args;
-  transition: $args;
+@mixin font( $font-name, $font-url ) {
+  // $font-name: The name of the font to use
+  // $font-url:  The url to given font sans the ext.
+  @font-face {
+    font-family: '#{$font-name}';
+    src: url('#{$font-url}.eot?#iefix') format('embedded-opentype'),
+         url('#{$font-url}.woff') format('woff'),
+         url('#{$font-url}.ttf')  format('truetype'),
+         url('#{$font-url}.svg#svg#{$font-name}') format('svg');
+  }
 }
-

data/lib/scss_helpers/version.rb

@@ -1,3 +1,3 @@
 module ScssHelpers
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/lib/scss_helpers.rb

@@ -1,7 +1,19 @@
 require "scss_helpers/version"
 
 module ScssHelpers
-  # Your code goes here...
+
+  def self.assets_path
+    Pathname.new(File.expand_path("../assets", __FILE__))
+  end
+
+  module Sprockets
+
+    def self.add_paths(environment)
+      environment.append_path(ScssHelpers.assets_path.join("stylesheets"))
+    end
+
+  end
+
 end
 
 require 'scss_helpers/engine' if defined?(Rails)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: scss_helpers
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-15 00:00:00.000000000 Z
+date: 2012-06-18 00:00:00.000000000 Z
 dependencies: []
 description: Cross-broswer css mixins
 email: