Sprite Cow – Generate CSS for sprite sheets | Hacker News Reader

Sprite Cow – Generate CSS for sprite sheets

spritecow.com

131 pointswiradikusuma27 comments

I get very tired of all the complaints about the age of a site or an article that makes it to the front page.

Please keep in mind, that not everyone starts reading HN when you did. Useful links remain so, and only take up one line on the list of links. Please don't detract from others discovering helpful links/articles.

Thanks for posting this wiradikusuma. 8)

Thanks for your kind words. Sometimes I find interesting link and just submit it to HN, because if it's already submitted, I can read what HNers think about it, and if it hasn't been submitted (or expired), I can hope HNers to comment (and I can read what they think about it). It's the discussion that I'm after :)

For those of you who want a more developer friendly way of working with sprites, I would like to introduce you to Compass (http://compass-style.org/help/tutorials/spriting/) Spriting. Along with using SASS, it will make creating and maintaining sprites a lot easier.

This is awesome. I can see myself having a sprites.scss file specifically for these and just copy pasting the rules.

If you really want to blow your mind, you should look at the automated spriting in Compass: http://compass-style.org/help/tutorials/spriting/

Or look at Glue : )

https://glue.readthedocs.org/en/latest/

There's also http://csssprites.org/ (SmartSprites). The web based tools aren't really in the same category as Compass, Glue and SmartSprites - they can't be part of an automated build, so someone is going to have a repetitive manual task to do. Ok for a one-off, but annoying in the long term.

Is there a solution for automated sprites with Sass when you can't use Compass?

+1 for compass, but one problem with it is that (AFAIK) you can only do png sprites, so you can't do them for animated gif (for spinners and the likes).

HN frontpage? This is at least 5yrs old - that guy

Well, 2.5 years.

I still prefer Texture Packer (http://www.codeandweb.com/texturepacker) - it has a free mode, but the best sprites will be made with the paid version. While it seems to be targeted towards mobile and games, but works very well for CSS sprites also. Does a nice job generating both the CSS and the Sprite image. Really simplifies the ability to have multiple developers working on a single sprite.

Been a useful tool for long while now. People looking to create texture atlases/sprites might find a tool like Texture Packer (http://www.codeandweb.com/texturepacker) handy.

Out of interest, does anyone use a web-based sprite/atlas generator exclusively when working?

http://pineapple.io/resources/tagged/sprites

So cool and useful, I will use this all the time now!

I can't wait for the sprite era to end.

I haven't used a sprite in quite a while. Gzipped svgs do the job quite well, are very light, and you don't ever have to worry about resolution. The only downside is if/when you have to support IE8.

Correct me if I'm wrong, but until all widely used modern browsers support SPDY or HTTP2, the number of requests is still a problem only solvable with sprites.

You stand corrected. You can embed the assets as base64 'data-uri' hrefs. Which IMO is the correct approach; sprites smack of the sort of suboptimal overoptimization that complicates workflow and exerts an invisible, mammoth drag on development, by slightly elongating each code-test-debug cycle. You have to get your raster assets -- which, let's face it, are probably being stored in .xcf or .psd format -- into a single .psd (or .xcf; hereinafter implied) so that a proper .png payload can be generated. Then you have to have either logic or CSS mess (or yes, SASS, or ...) to unpack that payload. The whole process is just so obnoxious. Why not just generate base64 strings and apply them to the site with jade (or grunt + jade, or grunt + ...0. SO MUCH EASIER. No scripting Photoshop (ew, COM+). No Guile, so you don't have to be up on your lambdas. Just use the tools you already use.

And, oh, IE8 does data URIs. Why aren't we all doing this again? Oh yeah, I forgot to write the blog post. :/

Me too. I've been waiting for Media Fragments URIs to be implemented since forever: http://css-tricks.com/media-fragments-uri-spatial-dimension/

Does SPDY reduce/remove the need for sprites?

Much simpler: http://spriteme.org/

This seems to be the other side of the issue: Sprite Me creates a sprite for you from different images while Sprite Cow takes an existing sprite and allows you to get the coordinates and dimensions of any element in that sprite.

Basically the output of the former could be the input of the latter.

Creating a single image file with all your images in it and referencing them in this way lets you use a single HTTP request to load all your images. It's a way of optimizing sites. This is a tool to make generating the CSS needed for this pattern easier.

Thanks! I like sites that have a small but helpful "about" section. :)

Reply on news.ycombinator.com