I came across another article on CSS Sprites today and it got me thinking of a better way to generate CSS sprites. CSS sprites to me have always been difficult and un-yielding. As a developer I love flexibility; and bundling all of my images into one, then mapping pixel boxes to different CSS backgrounds doesn’t sound flexible at all.
I can see it being very useful after I’ve had the site up for a while, and I’m dead set on images, but during the infancy of a website they’ve always seemed too clunky and time consuming to produce.
- Point ruby at a website, and grab all of the images.
- Take those images into Rmagic and determine optimal size of compiled image
- Individually add each image to the compiled image keeping track of the pixel locations
- For each image added, create a CSS entry with the pixel locations provided and a class name based on the name of the image
- Wash rinse and repeat till you have a fully compiled image, and CSS ready to use
- Bonus: generate .html.erb file that replaces the images currently in use