Please note: this blog has been migrated to a new location at https://jakesgordon.com. All new writing will be published over there, existing content has been left here for reference, but will no longer be updated (as of Nov 2023)

Sprite Factory 1.5.0

Fri, May 11, 2012

I have released a minor update to the sprite-factory ruby gem.

This version adds 3 small features:

Margins and Padding

For any of the layout options, including :packed, you can now add:

The :margin option is most useful to avoid the bleeding that might occur when the browser scales to support increased text size or zooming (e.g ctrl+/ctrl-). Depending on the scale factor, the browser may decide to use an extra pixel of your source image leading to the next image bleeding through.

This can now be avoided using the :margin => 1 option to ensure a gap is included around the source image to take into account any bleeding that might occur (usually a value of 1 or 2 pixels is adequate)

This resolves github issue #15

Thanks to @halida for getting this started with github pull request #17

Support for :hover pseudo classes

If you want to specify a pseudo class such as :hover for some of your images, the library will now map -- (double dash) to a colon : in any source image filename. For example, with the following files:

  images/icons/alert.png
  images/icons/alert--hover.png

… the library will generate:

  img.alert       { ... first file  ... }
  img.alert:hover { ... second file ... }

This resolves github issue #14 - ‘handling hover states’

Support for per-image custom selector

If you want to specify a custom selector for each individual image, you can simply name the image files accordingly - the library will map __ (double underscore) to a single space in any source image filename. For example, with the following files:

  images/icons/div.foo__span.icon_alert.png
  images/icons/div.bar__span.icon_alert.png

… when run without any selector:

  SpriteFactory.run!('images/icons', :selector => '')

… will generate:

  div.foo span.icon_alert { ... first file   ... }
  div.bar span.icon_alert { ... second file  ... }

This resolves github issue #12 - ‘automatic selectors’

Installation

As usual, installation is just a gem away:

$ gem install sprite-factory

And detailed instructions can be found in the README.

Let me know if you have any problems/feedback.

Enjoy!