• Stars
    star
    242
  • Rank 167,048 (Top 4 %)
  • Language
    Ruby
  • License
    MIT License
  • Created about 15 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

automatically css sprite

css_sprite

Build Status Coverage Status Dependency Status Coderwall Endorse

automatically css sprite.

Best Practices

I have written posts “css sprite best practices” to introduce the idea that the css_sprite gem follows.

english version

chinese version

otaviofcs wrote a brazilian version to introduce the css_sprite gem, check it here and he also build a demo

What css_sprite does?

css sprite generates css_sprite image and css files automatically for you follow the conventions as follows.

images under css_sprite directoryclass name in css_sprite css
twitter_icon.png.twitter_icon
facebook_icon.png.facebook_icon
hotmail-logo.png.hotmail-logo
gmail-logo.png.gmail-logo
icons/twitter_icon.png.icons .twitter_icon
widget/icons/twitter_icon.png.widget .icons .twitter_icon
twitter_icon_hover.png.twitter_icon:hover
twitter-icon-hover.png.twitter-icon:hover
logos_hover/gmail_logo.png.logos:hover .gmail_logo
logos-hover/gmail-logo.png.logos:hover .gmail-logo
gmail_logo_active.png.gmail_logo.active
gmail-logo-active.png.gmail-logo.active
logos_active/gmail_logo.png.logos.active .gmail_logo
logos-active/gmail-logo.png.logos.active .gmail-logo

css_sprite directory is the directory whose name is "css_sprite" or "css_sprite" suffixed under app/assets/images directory.

css_sprite image is the image file automatically generated under app/assets/images directory.

css_sprite css is the css file automatically generated under app/assets/stylesheets directory.

Install

css_sprite depends on the mini_magick gem

css_sprite also depends on the optipng tool as default image optimization, but you can use any other image optimization tool, check the Configuration section.

If you use the default optipng tool, please make sure it is successfully installed on your system.

install css_sprite as a gem:

gem install css_sprite

Usage

1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under app/assets/images directory

2. if you css_sprite in rails2 projects, you should add css_sprite task in Rakefile

require 'css_sprite'

If you use rails3, you can skip this step too

3. define config/css_sprite.yml, it is not necessary by default.

4. start css_sprite server

rake css_sprite:start

5. put any images which you need to do the css sprite under the css_sprite directory, then you will see the automatically generated css sprite image and css files.

6. include the stylesheet in your view page

<%= stylesheet_link_tag 'css_sprite' %>

You can stop the css_sprite server by rake css_sprite:stop

You can restart the css_sprite server by rake css_sprite:start

Or you can just do the css sprite manually by rake css_sprite:build

Configuration

There is no need to do any configurations by default for Rails 3.1 or higher projects. If you want some customizations as follows, you need to define config/css_sprite.yml file.

Example for rails 2.x or 3.0

engine: css
image_path: public/images
stylesheet_path: public/stylesheets
css_images_path: images
source_images_path: app/sprites

Destination Image Format

css_sprite saves the css sprite image as a png file by default. You can change it to gif or any other format like

format: GIF

Use asset-url

css_sprite generate background: url('css_sprite.png') no-repeat by default, if you prefer background: asset-url('css_sprite.png') no-repeat, you can change it as follows

use_asset_url: true

Sass

css_sprite generates css.scss file by default. You can change it to pure css or sass as you like.

engine: css

engine: css.sass

Image Optimization

css_sprite allows to do optimization to generated css_sprite.png, you can use default optipng with optimization level 2.

optimization: true

Or you can change it to any image optimization command.

optimization: optipng -o 7

Customization styles

For css or scss

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.scss (default), pure css or sass file to generate.

suffix defines the customization styles for specified images.

The customization above means if your image filename is button suffixed (e.g. post_button.png), the corresponding class .post_button has the additional style with (outline: 0; border: 0; and so on), if your image filename is icon suffixed (e.g. twitter_icon.png), the correspondiing class .twitter_icon has the additional style with (text-indent: -9999px; cursor: pointer)

Customization directories

css_sprite follows the conventions that images are under app/assets/images directory and css files are under app/assets/stylesheets, but you can change them.

image_path: public/images
stylesheet_path: public/stylesheets
source_images_path: app/sprites

By default, source_images_path and image_path are app/assets/images and stylesheet_path is app/assets/stylesheets.

Example

I built an example

images are under app/assets/images/css_sprite/

generated css sprite image is at app/assets/images/css_sprite.png

genereated css file is at app/assets/stylesheets/css_sprite.css

$ cd example
$ rake css_sprite:build
$ open index.html

Copyright (c) 2009 - 2013 [Richard Huang] [email protected], released under the MIT license

More Repositories

1

bullet

help to kill N+1 queries and unused eager loading
Ruby
7,081
star
2

rails_best_practices

a code metric tool for rails projects
Ruby
4,163
star
3

switch_user

Easily switch current user
Ruby
732
star
4

chinese_pinyin

translate chinese hanzi to pinyin
Ruby
430
star
5

activemerchant_patch_for_china

A rails plugin to add an active_merchant patch for china online payment platform including alipay (支付宝), 99bill (快钱) and tenpay (财付通)
Ruby
305
star
6

uniform_notifier

uniform notifier for rails logger, customized logger, javascript alert, javascript console, growl and xmpp
Ruby
235
star
7

rails-bestpractices.com

HTML
200
star
8

redis-sentinel

another redis automatic master/slave failover solution for ruby by using built-in redis sentinel (deprecated)
Ruby
188
star
9

eager_group

fix n+1 aggregate sql functions for rails
Ruby
122
star
10

seo_checker

check your website if it is seo.
Ruby
117
star
11

simple_cacheable

a simple cache implementation for rails
Ruby
91
star
12

code_analyzer

code analyzer tool which is extracted from rails_best_practices
Ruby
86
star
13

resque-restriction

resque-restriction is an extension to resque queue system that restricts the execution number of certain jobs in a period time.
Ruby
86
star
14

rfetion

rfetion is a ruby gem for China Mobile fetion service that you can send SMS free.
Ruby
61
star
15

chinese_regions

provides all chinese regions, cities and districts
Ruby
60
star
16

mongoid-eager-loading

eager loading for mongoid (DEPRECATED)
Ruby
54
star
17

rails-brakeman.com

online security check for rails projects
Ruby
52
star
18

contactlist

java api to retrieve contact list of email(hotmail, gmail, yahoo, sohu, sina, 163, 126, tom, yeah, 189 and 139) and im(msn)
Java
49
star
19

regexp_crawler

A crawler which uses regular expression to catch data from website.
Ruby
45
star
20

chinese_permalink

This plugin adds a capability for AR model to create a seo permalink with your chinese text. It will translate your chinese text to english url based on google translate.
Ruby
41
star
21

apis-bench

Ruby
34
star
22

sitemap

This plugin will generate a sitemap.xml from sitemap.rb whose format is very similar to routes.rb
Ruby
32
star
23

twitter_connect

facebook connect style twitter oauth
Ruby
30
star
24

taobao

Ruby Client Library for Taobao Open Platform
Ruby
27
star
25

huangzhimin.com

my homepage
HTML
24
star
26

railsbp.com

railsbp.com
JavaScript
23
star
27

multiple_mailers

extend actionmailer to allow one smtp account per mailer class.
Ruby
23
star
28

contactlist-client

The contactlist-client gem is a ruby client to contactlist service which retrieves contact list of email(hotmail, gmail, yahoo, sohu, sina, 163, 126, tom, yeah, 189 and 139) and im(msn)
Ruby
20
star
29

donatecn

demo for activemerchant_patch_for_china
Ruby
17
star
30

monitor

Monitor gem can display ruby methods call stack on browser based on unroller
JavaScript
17
star
31

authlogic_renren_connect

Extension of the Authlogic library to add Renren Connect support built upon the renren plugin
Ruby
5
star
32

rails3-template

rails3 template includes a lot of useful plugins/gems
Ruby
5
star
33

nodeslide

node.js related slideshows [deprecated], move to nodeslide.heroku.com
JavaScript
4
star
34

rubyslide.com

collect ruby rails related presentations [deprecated], moved to rubyslide.heroku.com
Ruby
4
star
35

visual_partial

This plugin provides a way that you can see all the partial pages rendered. So it can prevent you from using partial page too much, which hurts the performance.
Ruby
4
star
36

codelinestatistics

The code line statistics takes files and directories from GUI, counts the total files, total sizes of files, total lines, lines of codes, lines of comments and lines of blanks in the files, displays the results and can also export results to html file.
Ruby
4
star
37

clock_chrome_extension

google chrome extension to display multiple clock analogs for multiple timezones
2
star
38

dotfiles

Vim Script
2
star
39

showoff-understanding-mongoid

My understanding mongoid showoff presentation
Ruby
2
star
40

enough_fields

only select specified fields used
Ruby
2
star
41

skype_archive

company hackathon
Ruby
1
star
42

bullet_test

Ruby
1
star
43

play_skype

JavaScript
1
star
44

test_code_analyzer

test code for code_analyzer gem
Ruby
1
star
45

blog.huangzhimin.com

HTML
1
star
46

test_error

raise an error to test if exception_notification really works.
Ruby
1
star
47

try-ripper

code mirror of try-ripper.heroku.com
CSS
1
star