Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
automatically css sprite
Ruby CSS

This branch is 134 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
spec
tasks
.gitignore
MIT-LICENSE
README.textile
Rakefile
VERSION
css_sprite.gemspec

README.textile

css_sprite

A rails plugin/gem to generate css sprite images automatically.


Notice

I have rewritten the plugin. Please check out the gem version >= 1.2.0


Install

css_sprite is dependent on the RMagick gem, please install it first.

install it as a gem:


sudo gem install css_sprite

or install it as a plugin:


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

Configuration

There is no need to create a configuration if you do not use sass and you do not do any customization.

You can create config/css_sprite.yml to define the customization.

For css


suffix:
  button: |
    text-indent: -9999px;
    display: block;
    cursor: pointer;
    font-size: 0;
    line-height: 15px;
    border: 0;
    outline: 0;
icon: |
text-indent: -9999px;
cursor: pointer;

For sass


engine: sass
suffix:
  button: |
    text-indent: -9999px
    display: block
    cursor: pointer
    font-size: 0
    line-height: 15px
    border: 0
    outline: 0
icon: |
text-indent: -9999px
cursor: pointer

engine defines css (default) or sass to generate.
suffix defines the customization styles for specified images.
The customization above means if your image’s suffix is button (e.g. post_button.png), it contains the additional style with (outline: 0 and so on),
if your image’s suffix is icon (e.g. twitter_icon.png), it contains the additional style with (text-indent: -9999px and so on)


Usage

1. create a css_sprite directory or css_sprite suffixed directory (e.g. widget_css_sprite) under public/images

2. define config/css_sprite.yml or not

3. start css_sprite server rake css_sprite:start

4. put any images you want to do css sprite into the css_sprite directory

5. then css_sprite image will be automatically generated and css_sprite.css or css_sprite.sass are generated too.


Task


require 'css_sprite'

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

then just run rake task:
rake css_sprite:start, start css_sprite server
rake css_sprite:stop, stop css_sprite server
rake css_sprite:build, build css_sprite once


Contributor

josedelcorral – fix the style of generated css
Santino – fix transparent images and make the generated css file more graceful


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

Something went wrong with that request. Please try again.