Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Command-line CSS spriting (phpied.com)
55 points by Uncle_Sam on Feb 19, 2011 | hide | past | favorite | 12 comments


The basic idea works, but note that

    cmd `ls`
    cmd `ls *png`
should be written as

    cmd *
    cmd *.png


I’d been passively hoping for a command-line image spriting tool for a while, so this is great.

But I don’t need it anymore. I’ve discovered @chriseppstein’s fabulous Compass. Now you don’t even need a command line — you can sprite directly in your (s)css!

http://beta.compass-style.org/reference/compass/helpers/spri...

(This version isn’t stable yet, so install with `gem install compass --pre`. Actually, not sure if this feature is stable yet or not, but the beta version of Compass rocks.)


Also worth checking out:

- for flexibility, the CSS Sprite gem (https://github.com/flyerhzm/css_sprite)

- for ease of use, the Lemonade gem (https://github.com/hagenburger/lemonade)


Lemonade has actually been rolled into compass in the beta. It is highly recommended to use the compass beta over the lemonade gem now.


I keep beating the Compass drum too. This approach seems like so much work and rather primitive in comparison. Compass will manage all this automatically, on the fly.


If you're going to use a tool to do your spriting, you might as well go all the way and data-uri inline your images. Spriting is a leaky abstraction that only exists today because the recipe for getting them working in old IE is complex enough that it needs to be automated.



I just made one of these in Python: https://github.com/bradjasper/sprite/blob/master/sprite

Currently it only does fixed-width sprites, but handles the generation of CSS for you.


What browsers do support this? Do it break when the user changes font size, as I've read somewhere?


You may not have too much control over the positioning of the sprite parts, but that's minor.

Can't wait to use this!


Sure you do. Imagemagick can do almost anything.





Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: