compass-spriter 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2d4829a20248267871b5d6173503fff65648c074
+  data.tar.gz: 281af62e6abba37e3e2fe5e0ee80fcc8d86ef76f
+SHA512:
+  metadata.gz: 18b4345ed87fd052d989045965c7850fe41a347ccc2f68b6508b3f99a951752b387fdabf52620257d75162003ead40ccfb0fb2f5b327eceb316360aa5cd62e2f
+  data.tar.gz: 21ad8c16f6389bba9bffae19d1b680fbfb559628aa5856e48b7d069bcc9fe089dc726aeb9f5e0bed1204045b06e81c57382ec8900de1f5415c8968404fd6ce2f

data/README.md

@@ -0,0 +1,59 @@
+# Compass Spriter
+
+A *responsive* [sprite sheet](http://css-tricks.com/css-sprites/) generator plugin for [Compass](http://compass-style.org/).
+
+There are many sprite generators out there, and even one [built in to compass](http://compass-style.org/reference/compass/helpers/sprites/#sprite-map). However, none of these sprite sheet generators can be applied to responsively sized elements.
+If you have an element with a percentage width or height, you will need a percentage background-position, which this plugin provides.
+
+##Installation
+
+```
+$ gem install compass-spriter
+```
+
+##Usage
+
+When creating a new project for Compass
+
+```
+$ compass create <my_project> -r compass-spriter --using compass-spriter
+```
+
+If using an existing project, edit your config.rb and add this line:
+
+```ruby
+require 'compass-spriter'
+```
+
+To use the responsive sprite mixin
+
+```scss
+@import "spriter";
+
+div#menu-icon{
+	@include spriter(menu-icon);
+}
+
+```
+
+##Options
+
+You can configure Spriter's settings (defaults shown below).
+
+If you want to override these settings, you _must_ set the variables before the first use of `@include spriter();`
+
+```scss
+//glob of images to use in the sprite sheet
+$spriter-images: "sprites/*.png";
+
+//number of pixels of space between sprites
+$spriter-spacing: 2px;
+```
+
+##Browser support
+
+Browser support very generally good. Any browser that supports percentage-positioned background images should be fine.
+
+##Contributions
+
+Pull requests or the opening of issues are always welcome

data/lib/compass-spriter.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass-spriter', :path => extension_path)

data/stylesheets/_spriter.scss

@@ -0,0 +1,32 @@
+$spriter-images: "sprites/*.png" !default;
+$spriter-spacing: 2px !default;
+
+$_spriter-icons: false;
+
+@mixin responsive-sprite($name){
+	@if $_spriter-icons{
+		//$_spriter-icons is already set
+	}@else{
+		$_spriter-icons : sprite-map($spriter-images, $spacing:$spriter-spacing) !global;
+	}
+	background-image:$_spriter-icons;
+	$totalHeight : image-height(sprite-path($_spriter-icons));
+	$totalWidth  : image-width(sprite-path($_spriter-icons));
+	$spriteHeight : image-height(sprite-file($_spriter-icons, $name));
+	$spriteWidth  : image-width(sprite-file($_spriter-icons, $name));
+	$spritePosX : nth(sprite-position($_spriter-icons, $name), 1) + 0px;
+	$spritePosY : nth(sprite-position($_spriter-icons, $name), 2) + 0px;
+
+	$background-position-x:0;
+	$background-position-y:0;
+
+	background-size:100% * ($totalWidth / $spriteWidth) 100% * ($totalHeight / $spriteHeight);
+	@if ($totalHeight - $spriteHeight > 0){
+		$background-position-y:100% * ((-$spritePosY / ($totalHeight - $spriteHeight)));
+	}
+	@if ($totalWidth - $spriteWidth > 0){
+		$background-position-x:100% * ((-$spritePosX / ($totalWidth - $spriteWidth)));
+	}
+	background-position:$background-position-x $background-position-y;
+	background-repeat:no-repeat;
+}

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: compass-spriter
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Mike Monteith
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-12-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.1
+description: Sprite generator for compass, using percentages for responsively sized
+  sprites
+email: mike@mikemonteith.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/compass-spriter.rb
+- stylesheets/_spriter.scss
+homepage: http://mikemonteith.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Responsive sprite generator for compass
+test_files: []
+has_rdoc: