Skip to content

Commit

Permalink
initial import
Browse files Browse the repository at this point in the history
  • Loading branch information
andris9 committed May 10, 2011
0 parents commit 3c51eec
Show file tree
Hide file tree
Showing 10 changed files with 759 additions and 0 deletions.
16 changes: 16 additions & 0 deletions LICENSE
@@ -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.
60 changes: 60 additions & 0 deletions README.md
@@ -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);
});
});
30 changes: 30 additions & 0 deletions package.json
@@ -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"]
}

0 comments on commit 3c51eec

Please sign in to comment.