handysass 0.1.0

data/README.md

@@ -0,0 +1,41 @@
+Compass HandySass
+=================
+
+HandySass is a little utility kit with some extra mixins (as well as classes)
+for use with Compass.
+
+
+Installation
+============
+
+From the command line:
+
+    (sudo) gem install handysass
+
+Add to a project:
+
+    // rails: compass.config, other: config.rb
+    require "handysass"
+
+    // command line
+    compass install handysass
+
+Or create a new project:
+
+    compass -r handysass -f handysass project_directory
+
+
+Usage
+=====
+
+You can include as much or as little of HandySASS' features as you want:
+
+* `/mixins`
+  * `/responsive`: Breakpoint mixins (e.g. `xs-screen`, `sm-screen-min`, `md-screen-max`)
+  * `/sizing`: Quick little utilites for specifying width/height
+  * `/sprite`: A sprite positioning mixin for consistent-width srites
+* `/classes`
+  * `/align`: Text alignment classes, including RTL alternatives
+  * `/float`: Float classes, including RTL alternatives
+  * `/layout`: Alias classes for `clearfix` and `inline-block`
+  * `/text`: Alias classes for `ellipsis` and `hide-text`

data/lib/handysass.rb

@@ -0,0 +1,9 @@
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('handysass', :path => extension_path)
+
+module HandySASS
+  VERSION = "0.1.0"
+  DATE = "2014-01-27"
+end

data/stylesheets/_handysass.scss

@@ -0,0 +1,6 @@
+// Handysass is a basic utility kit that covers mixins that Compass doesn"t yet include
+
+// Define as true for RTL alternative support
+$handysass-enable-rtl: false !default;
+@import "handysass/mixins";
+@import "handysass/classes";

data/stylesheets/handysass/_classes.scss

@@ -0,0 +1,4 @@
+@import "classes/align";
+@import "classes/float";
+@import "classes/layout";
+@import "classes/text";

data/stylesheets/handysass/_mixins.scss

@@ -0,0 +1,3 @@
+@import "mixins/responsive";
+@import "mixins/sizing";
+@import "mixins/sprite";

data/stylesheets/handysass/classes/_align.scss

@@ -0,0 +1,38 @@
+.text-left {
+	text-align: left;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-justify {
+	text-align: justify;
+}
+
+// For mutli-directional stylesheets
+@if ($handysass-enable-rtl) {
+	.text-norm {
+		.ltr & {
+			@extend .text-left;
+		}
+
+		.rtl & {
+			@extend .text-right;
+		}
+	}
+
+	.text-alt {
+		.ltr & {
+			@extend .text-right;
+		}
+
+		.rtl & {
+			@extend .text-left;
+		}
+	}
+}

data/stylesheets/handysass/classes/_float.scss

@@ -0,0 +1,30 @@
+.pull-left {
+	float: left;
+}
+
+.pull-right {
+	float: right;
+}
+
+// For mutli-directional stylesheets
+@if ($handysass-enable-rtl) {
+	.pull {
+		.ltr & {
+			@extend .pull-left;
+		}
+
+		.rtl & {
+			@extend .pull-right;
+		}
+	}
+
+	.pull-alt {
+		.ltr & {
+			@extend .pull-right;
+		}
+
+		.rtl & {
+			@extend .pull-left;
+		}
+	}
+}

data/stylesheets/handysass/classes/_layout.scss

@@ -0,0 +1,11 @@
+// Load needed Compass mixins
+@import "compass/utilities/general/clearfix";
+@import "compass/css3/inline-block";
+
+.clearfix{
+	@include pie-clearfix();
+}
+
+.inline-block{
+	@include inline-block();
+}

data/stylesheets/handysass/classes/_text.scss

@@ -0,0 +1,11 @@
+// Load needed HandySASS mixins
+@import "compass/typography/text/ellipsis";
+@import "compass/typography/text/replacement";
+
+.ellipsis{
+	@include ellipsis();
+}
+
+.hide-text{
+	@include hide-text();
+}

data/stylesheets/handysass/mixins/_responsive.scss

@@ -0,0 +1,85 @@
+$sm-screen: 768px !default;
+$md-screen: 990px !default;
+$lg-screen: 1200px !default;
+
+// Add a screen @media rule for the specified min/max widths.
+//
+// Recommended use: keywork argument syntax, for consistency
+// and for when specifying just the $max argument.
+//
+// @param mixed $min The min width of the screen (false to ignore).
+// @param mixed $max The max width of the screen (false to ignore).
+
+@mixin screen-size($min:false, $max:false){
+	$rule: "screen";
+
+	@if $min and $max {
+		$rule: "screen and (min-width: " + $min + ") and (max-width: " + $max + ")";
+	}
+	@else if $min {
+		$rule: "screen and (min-width: " + $min + ")";
+	}
+	@else if $max {
+		$rule: "screen and (max-width: " + $max + ")";
+	}
+
+	@media #{$rule} {
+		@content;
+	}
+}
+
+// Extra-Small (Mobile) only
+@mixin xs-screen{
+	@include screen-size($max: $sm-screen - 1){
+		@content;
+	}
+}
+
+// Small (Tablet) and up
+@mixin sm-screen-min{
+	@include screen-size($min: $sm-screen){
+		@content;
+	}
+}
+
+// Small (Tablet) and down
+@mixin sm-screen-max{
+	@include screen-size($max: $md-screen - 1){
+		@content;
+	}
+}
+
+// Small (Tablet) only
+@mixin sm-screen{
+	@include screen-size($min: $sm-screen, $max: $md-screen - 1){
+		@content;
+	}
+}
+
+// Medium (Desktop) and up
+@mixin md-screen-min{
+	@include screen-size($min: $md-screen){
+		@content;
+	}
+}
+
+// Medium (Desktop) and down
+@mixin md-screen-max{
+	@include screen-size($max: $lg-screen - 1){
+		@content;
+	}
+}
+
+// Medium (Desktop) only
+@mixin md-screen{
+	@include screen-size($min: $md-screen, $max: $lg-screen - 1){
+		@content;
+	}
+}
+
+// Large (Widescreen) and up
+@mixin lg-screen{
+	@include screen-size($min: $lg-screen){
+		@content;
+	}
+}

data/stylesheets/handysass/mixins/_sizing.scss

@@ -0,0 +1,19 @@
+// Set the width and height.
+//
+// @param mixed $width The desired width.
+// @param mixed $height The desired height.
+
+@mixin size($width, $height) {
+	width: $width;
+	height: $height;
+}
+
+// Set the width/height to the same value.
+//
+// @uses size()
+//
+// @param mixed $size The desired width/height.
+
+@mixin square($size) {
+	@include size($size, $size);
+}

data/stylesheets/handysass/mixins/_sprite.scss

@@ -0,0 +1,39 @@
+// Internal helper function
+@mixin -handy-sprite($left, $top, $width, $height){
+	background-position: (-1 * ($left - 1) * $width) (-1 * ($top - 1) * $height);
+}
+
+// Sprite position builder.
+//
+// Sets the background position of your sprite,
+// based on the offset and size you provide. Also
+// handles hover position if desired.
+//
+// $left/$top are 1-indexed, meant to represent col/row coords.
+//
+// Meant for sprites where each image is the same width/height.
+//
+// @uses -handy-sprite()
+//
+// @param pixels $left       The left offset
+// @param pixels $top        The top offset
+// @param pixels $width      The width of the image
+// @param pixels $height     The height of the image
+// @param pixels $hover_left The left offset on hover
+// @param pixels $hover_top  The top offset on hover
+
+@mixin handy-sprite($left, $top, $width, $height, $hover_left:0, $hover_top:0){
+	@include -handy-sprite($left, $top, $width, $height);
+
+	@if $hover_left != 0 or $hover_top != 0 {
+		@if $hover_left == 0 {
+			$hover_left: $left;
+		}
+		@if $hover_top == 0 {
+			$hover_top: $top;
+		}
+		&:hover{
+			@include -handy-sprite($hover_left, $hover_top, $width, $height);
+		}
+	}
+}

metadata

@@ -0,0 +1,72 @@
+--- !ruby/object:Gem::Specification
+name: handysass
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Doug Wollison
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-01-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: A basic utility kit with handy mixins and classes for Compass.
+email: doug@wollison.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/handysass.rb
+- stylesheets/_handysass.scss
+- stylesheets/handysass/classes/_layout.scss
+- stylesheets/handysass/classes/_text.scss
+- stylesheets/handysass/classes/_align.scss
+- stylesheets/handysass/classes/_float.scss
+- stylesheets/handysass/mixins/_responsive.scss
+- stylesheets/handysass/mixins/_sizing.scss
+- stylesheets/handysass/mixins/_sprite.scss
+- stylesheets/handysass/_classes.scss
+- stylesheets/handysass/_mixins.scss
+homepage: http://github.com/dougwollison/handysass
+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 basic utility kit with handy mixins and classes for Compass.
+test_files: []