CODEWITHSUNDEEP
cssbackground-imagecss-sprites
Bram Vanroy
Bram Vanroy

Reputation: 28554

CSS sprites management

I am wondering if there is any good way to manage CSS sprites. For instance, take a look at a sprite that's used by Google in its Play environment:

Woah, sprites

It would seem impossible to me that the devs over at Google don't have a 'system', or even a tool to keep track of the right background-position's to use this sprite. However, I have no idea how one would easily and possibly automated keep track of the sprite and its images? What is a recommended way to do this? Start from the top left and add images from the left to right, keep the position values in a separate file or are there any other, better ways?

Upvotes: 2

Views: 347

Answers (2)

Alex Shesterov
Alex Shesterov

Reputation: 27585

The idea is to maintain different named images and to "stitch them together" as an optimization. Either as a part of automatic build procedure, or manually. Just like CSS or JS minification. The pictures are placed on the final image, and background positions are calculated automatically.

It's pretty simple to create such a tool, and hence there are lots of tools of this kind out there.

My personal preference for manual sprites creation is Stitches, it's an online tool and doesn't require installation. It runs on current versions of Chrome (not sure of other browsers).

There are also solutions for automatic builds. For example, SmartSprites Maven plugin: 

<plugin>
  <groupId>net.jangaroo</groupId>
  <artifactId>smartsprites-maven-plugin</artifactId>
  <version>1.8</version>
</plugin>

Upvotes: 2

Kev
Kev

Reputation: 5462

I have done this kind of sprites with this module:

https://www.npmjs.com/package/grunt-dr-svg-sprites

Fully automatic, generates, the css and classes with the files name. Very easy. This is the kind of tool you are looking for.

Edit: the module I mention works with grunt, but the tool itself is this one: https://github.com/drdk/dr-svg-sprites

Upvotes: 0

Related Questions