Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Generates sprites on the fly by using `background: sprite-image("sprites/logo.png")`.
Ruby
Tag: v0.3.1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
spec
.document
.gitignore
CHANGELOG.md
MIT-LICENSE
README.md
Rakefile
TODO.md
VERSION
lemonade.gemspec

README.md

Lemonade—On the fly sprite generator for Sass/Compass

Usage (SCSS or Sass):

.fanta {
  background: sprite-image("bottles/fanta.png");
}
.seven-up {
  background: sprite-image("bottles/seven-up.png");
}
.coke {
  background: sprite-image("cans/coke.png") no-repeat;
}

Output (CSS):

.fanta {
  background: url('/images/bottles.png');
}
.seven-up {
  background: url('/images/bottles.png') 0 -50px;
}
.coke {
  background: url('/images/cans.png') no-repeat;
}

Background

  • Generates a sprite image for each folder (e. g. “bottles” and “cans”)
  • Sets the background position (unless “0 0”)
  • It uses the images_dir defined by Compass (just like image-url())
  • No Rake task needed
  • No additional classes
  • No configuration
  • No RMagick required (but full support for PNG)

Installation

gem install lemonade

Current State

  • Compass standalone finished
  • Rails Sass integration finished
  • Staticmatic integration finished
  • Haml integration (with “:sass” filter): work in progress

Options

You can pass an additional background position. It will be added to the calculated position:

.seven-up {
  background: sprite-image("bottles/seven-up.png", 12px, 3px);
}

Output (assuming the calculated position would be “0 -50px” as shown above):

.seven-up {
  background: url('/images/bottles.png') 12px -47px;
}

If you need empty space around the current image, this will add 20px transparent space above and below.

.seven-up {
  background: sprite-image("bottles/seven-up.png", 0, 0, 20px);
}

This one adds 20px above, 30px below:

.seven-up {
  background: sprite-image("bottles/seven-up.png", 0, 0, 20px, 30px);
}

Right aligned images are possible:

.seven-up {
  background: sprite-image("bottles/seven-up.png", 100%, 4px);
}

The original image will be placed on the right side of the sprite image. Use this, if you have a link with an arrow on the right side (like Apple).

Note on Patches/Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Add tests for it. This is important so I don't break it in a future version unintentionally.
  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
  • Send me a pull request. Bonus points for topic branches.

Copyright

Copyright (c) 2010 Nico Hagenburger. See MIT-LICENSE for details. Follow me on twitter.

Something went wrong with that request. Please try again.