Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A rails plugin to generate css sprite image automatically

branch: master

This branch is 0 commits ahead and 0 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.textile

css_sprite

A rails plugin/gem to generate css sprite images automatically.
Supports Transparency in PNGs/GIFs


Install

install rmagick gem first:


sudo gem install rmagick

install it as a gem:


sudo gem sources -a http://gemcutter.org
sudo gem install css_sprite

or install it as a plugin:


script/plugin install git@github.com:flyerhzm/css_sprite.git

Configuration

Add files with the pattern “css_sprite*.css” (e.g. css_sprite.css, css_sprite_stars.css) to
the config directory.
All files starting with css_sprite and ending with .css will be processed.
This enables you to group your sprites together.

The following configuration parameter are possible:


config:
  base_directory: public/images              # Base directory for source and target images (defaults to "public/images")
  css_output: tmp/css_sprite_stars.css             # Where to put the CSS File (defaults to tmp/css_sprite.css)

images:
– description: Stars with transparency # description (will not be processed)
sources: # List of files to convert to a single sprite
– sc-mcstars0.png
– sc-mcstars1.png
target: stars_png_with_transparency.png # Where to put the resulting sprite ()
align: horizontal # Align the Sprites “horizontal” or “vertical” (default)
spaced_by: 50 # Empty pixel between each image (defaults to 0)

- description: Second Sprite … # Second Sprite definition …


Usage

if you use it as a gem, add a task lib/tasks/css_sprite.rake first:


require 'css_sprite'

if you use it as a plugin, ignore the step above.

then just run rake task:


rake css_sprite:build

the result css is generated as defined in the corresponding css_output parameter:


.good_topic
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px
    width: 20px
    height: 19px
.mid_topic
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
    width: 20px
    height: 19px
.unread_topic
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px
    width: 19px
    height: 18px
.sticky_topic
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px
    width: 19px
    height: 18px

Copyright © 2009 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license

Something went wrong with that request. Please try again.