Permalink
Browse files

initial import

  • Loading branch information...
0 parents commit 3c51eecaf878a198258a03a93ad7664fa7088f1c andris9 committed May 10, 2011
Showing with 759 additions and 0 deletions.
  1. +16 −0 LICENSE
  2. +60 −0 README.md
  3. +30 −0 package.json
  4. +448 −0 stylus-sprite.js
  5. BIN test/images/star.png
  6. +72 −0 test/out/sprite.css
  7. +20 −0 test/out/sprite.html
  8. BIN test/out/sprite.png
  9. +89 −0 test/test.css
  10. +24 −0 test/test.js
@@ -0,0 +1,16 @@
+Copyright (c) 2011 Andris Reinman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,60 @@
+Stylus-Sprite
+=============
+
+**Stylus-Sprite** is an extension for [Stylus](https://github.com/LearnBoost/stylus) which makes sprite images from Stylus tags.
+Actually it takes a image file (currently only PNG's are supported), places it to a sprite image and replaces the original
+pointer in the CSS file with position coordinates according to the sprite image.
+
+Installation
+------------
+
+ npm install stylus-sprite
+
+Usage
+-----
+
+Consider the following Stylus CSS
+
+ .block-elm
+ background: url(sprite.png) no-repeat sprite("star.png");
+ width: 25px;
+ height: 25px;
+
+After running Stylus-Sprite the resulting CSS would be something like
+
+ .block_elm{
+ background: url(sprite.png) no-repeat -25px -78px;
+ width: 25px;
+ height: 25px;
+ }
+
+And the image *sprite.png* would have *star.png* placed on position 25x78 px.
+
+See test folder for complete example.
+
+JavaScript API
+--------------
+
+Creating the sprite consists of two phases - preparation and rendering.
+
+ var stylus = require("stylus"),
+ StylusSprite = require("stylus-sprite")
+ sprite = new StylusSprite({output_file:"sprite.png"});
+
+ var css = "body.....";
+
+ stylus(css).
+ set('filename', 'test.css').
+ define('sprite', function(filename, option_val){
+ // preparation phase
+ return sprite.spritefunc(filename, option_val);
+ }).
+ render(function(err, css){
+ if (err) throw err;
+
+ // rendering phase
+ sprite.build(css, function(err, css){
+ if (err) throw err;
+ console.log(css);
+ });
+ });
@@ -0,0 +1,30 @@
+{
+ "name": "stylus-sprite",
+ "description": "Generate sprite images with Stylus",
+ "version": "0.1.0",
+ "author" : "Andris Reinman",
+ "maintainers":[
+ {
+ "name":"andris",
+ "email":"andris@node.ee"
+ }
+ ],
+ "homepage": "http://github.com/andris9/stylus-sprite",
+ "repository" : {
+ "type" : "git",
+ "url" : "http://github.com/andris9/stylus-sprite.git"
+ },
+ "main" : "./stylus-sprite",
+ "licenses" : [
+ {
+ "type": "MIT",
+ "url": "http://github.com/andris9/stylus-sprite/blob/master/LICENSE"
+ }
+ ],
+ "dependencies": {
+ "stylus":"*",
+ "node-gd":"*"
+ },
+ "engine": [ "node >=0.3.0" ],
+ "keywords": ["CSS", "sprite", "sprites", "images"]
+}
Oops, something went wrong.

0 comments on commit 3c51eec

Please sign in to comment.