Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
andris9
committed
May 10, 2011
0 parents
commit 3c51eec
Showing
10 changed files
with
759 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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); | |||
}); | |||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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.