Sprite Generation and Application in Rails

application.css.scss

// etc...

@import "sprites/{sprite name}";

// etc...

.example-sprite {
  display: block;
  text-indent: -9999px;
  @extend .{sprite name}-sprite-{image name};
}

Gemfile

# etc ...

group :development do
  # etc ...
  
  # Sprites:
  gem 'sprite-factory'
  gem 'rmagick'
  gem 'piet' # image optimization
end

# etc ...

Sprite Generation and Application in Rails.md

Sprites

Rake tasks are provided to quickly compile sprites for both desktop and mobile sites, provided that conventions are followed.

A single sprite should be represented by a directory in the images directory at app/assets/images/sprites/{sprite name}. All .png images within this directory can be expected to be compiled into that sprite.

Compiling

The rake task to compile all sprites:

    rake sprites

The rake tasks compile a sprite png in the app/assets/images/sprites directory that matches the name of the folder containing the source images. It also creates an scss file defining the rules necessary to apply an individual sprite image. The scss file is generated at app/assets/stylesheets/sprites and will have to have an import line added for it in the platform's root css file. Example: @import "sprites/core";

The rake task will also automatically squeeze compiled sprite images using pngquant as well as send them to ImageOptim, an app that compresses pngs. Both of these tools must be installed manually before running the sprite task.

• pngquant
• imageoptim.com

Applying

Applying the sprites' CSS is an arbitrary matter once the sprite is generated. A sprite's rules can be inspected in its generated scss file, and the recommended method for applying a sprite to an element is to use the sass @extend directive:

    div.some-element {
        display: block;
        text-indent: -9999px;
        @extend .{sprite name}-sprite-{image name};
    }

This example will automatically set the display and text-indent mode of the element (via to the .sprite-base class) and the width, height, and background rules for the element (via to the individual sprite class)

sprites.rake

sprites_dir = ""
css_path = ""
css_image_path = ""

namespace :sprites do

  task :compile do
    sprites_dir = File.join Rails.root, "app/assets/images/sprites/*"
    css_image_path = "sprites"
    css_path = File.join Rails.root, "app/assets/stylesheets/sprites/"
    Rake::Task["sprites:_compile"].invoke
  end

  task :_compile do
    require 'sprite_factory'
    
    Dir[sprites_dir.to_s].each do |dir|
      next unless File.directory? dir
      
      puts "Compiling sprites at #{dir}"
      
      name = dir.split('/').last
      src_img_path = File.join(dir)

      FileUtils.mkdir_p css_path
      output_css_path = File.join(css_path, "_#{name}.scss")
      
      SpriteFactory.run! src_img_path, 
                         :output_style => output_css_path, 
                         :selector => ".#{name}-sprite-",
                         :csspath => css_image_path
      
      # Squeeze the sprite!
      output_file_path = "#{dir}.png"
      optimize_image output_file_path
      
    end
  end
end

# Alias for sprites
desc "Compiles all the sprite pngs and css"
task :sprites => ['sprites:compile']

# 
# Helper Methods
# 

def optimize_image(filepath)
  filepath = "'#{filepath}'"
  begin
    # `pngquant #{filepath}`
    Piet.pngquant filepath
    puts " > pngquant squeeze: #{filepath}"
  rescue Exception => e
    puts " > unable to pngquant squeeze #{filepath}"
  ensure
    `open -a ImageOptim.app #{filepath}`
    puts " > ImageOptim squeeze: #{filepath}"
  end
end

Spriteicorn, SpriteFairy, SuperSprite, Squirts