Permalink
Browse files

Refactoring Plugin

  • Loading branch information...
1 parent 07f80b3 commit ddcad0ead8808a26b7cdff735ba40d93734bca0e @merbjedi merbjedi committed Nov 13, 2009
Showing with 139 additions and 120 deletions.
  1. +104 −62 README.md
  2. +0 −24 config/css_sprite_example_config.yml
  3. +0 −5 lib/sprite.rb
  4. +12 −6 lib/sprite/sprite.rb
  5. +2 −0 rails/init.rb
  6. +20 −21 sprite.gemspec
  7. +1 −2 tasks/sprite_tasks.rake
View
166 README.md
@@ -1,14 +1,16 @@
+WORK IN PROGRESS. This README describes stuff yet to be implemented. Please read it though and msg me feedback if you think things should work differently!
+
# sprite #
-`sprite` is a gem that helps generate css sprite images automagically. It's aim is to support all web frameworks (Merb/Rails/Sinatra)
+`sprite` is a gem that helps generate css sprite images automagically. It's aim is to support all web frameworks (Merb/Rails/Sinatra), and have extensible output generator. By default, it supports CSS and SASS output (via mixins).
-it's a fork an extension of Richard Huang's excellent Rails plugin `css_sprite` (github.com/flyerhzm/css_sprite)
+it's a fork and extension on Richard Huang's excellent Rails specific plugin [`css_sprite`](http://github.com/flyerhzm/css_sprite)
-****
+## Install ##
-## Install ##
+### Install the `rmagick` gem ###
-install rmagick gem first:
+sprite currently requires the rmagick gem. to install it, use
gem install rmagick
@@ -19,91 +21,131 @@ if you have any problems with the rmagick gem, install imagemagick via macports
or via installer: http://github.com/maddox/magick-installer/tree/master
-install it as a gem:
+### Install the `sprite` gem ###
+
+Install the sprite gem from gemcutter
gem sources -a http://gemcutter.org
- gem install sass_sprite
+ gem install sprite
-### if using merb ###
-
- gem "sprite"
-
-### if using rails ###
+### if using Merb ###
- script/plugin install git://github.com/merbjedi/sprite.git
+With Merb 1.1 and Bundler, just add the line `gem 'sprite'` your ./Gemfile and then run `gem bundle`
+
+### if using Rails ###
-or add to environment.rb
+add to environment.rb
config.gem "sprite"
-***
+or install as a plugin
-## Configuration ##
-
-add `config/sprite.yml`, define about compositing what images.
-
- forum_icon_vertical.gif: # destination image file
- sources: # source image file list
- - good_topic.gif
- - mid_topic.gif
- - unread_topic.gif
- - sticky_topic.gif
- orient: vertical # composite gravity, vertical or horizontal
- span: 5 # span of space between two images
+ script/plugin install git://github.com/merbjedi/sprite.git
-first line defines the destination image filename.
-`sources` is a list of source image filenames what want to composite. They are parsed by <code>Dir.glob</code>.
-`orient` defines the composite gravity type, horizontal or vertical. Default is 'vertical'.
-`span` defines the span between two images. Default is 0.
+## Usage ##
-you can define any number of destination image files.
+if installed as a gem, at your root project folder you can just run
+
+ sprite
-***
+if you would rather not install the gem, you can also use it with rake
-## Usage ##
+ rake sprite:build
-if you use it as a gem, add a task `lib/tasks/sprites.rake` first:
+## Configuration ##
- require 'sprites'
+add `config/sprite.yml` to set sprite configuration options and define what sprites get generated where
+
+* `config:` section defines all the global properties for sprite generation. Such as how it generates the styles, where it looks for images, where it writes it output file to, and what image file format it uses by default
+ - `style:` defines how the style rules are outputted. built in options are `css`, `sass`, and `sass_mixin`. (defaults to `css`)
+ - `output_path:` defines the file path where your style settings get written. the file extension not needed as it will be determined by the style setting above (defaults to `public/stylesheets/sprite`)
+ - `image_output_path:` defines the folder path where the combined sprite images files are written (defaults to `public/images/sprite/`)
+ - `source_path:` defines the folder where source image files are read from (defaults to `public/images/`)
+ - `default_format:` defines the default file image format of the generated files. (defaults to `png`)
+ - `class_separator:` used within the generated class names between the image name and sprite name (defaults to `_`)
+
+* `images:` section provides an array of configurations which define which image files are built, and where they get their sprites from. each image setup provides the following config options:
+ - `name:` name of image (required)
+ - `sources:` defines a list of source image filenames to build the target image from (required). They are parsed by <code>Dir.glob</code>
+ - `align:` defines the composite gravity type, horizontal or vertical. (defaults to `vertical`)
+ - `spaced_by:` spacing (in pixels) between the combined images. (defaults to `0`)
+ - `format:` define what image file format gets created (optional, uses `default_format` setting if not set)
-if you use it as a plugin, ignore the step above.
+you can define any number of destination image files.
-then just run rake task:
-
- rake sprites:build
+## Sample Configuration `config/sprite.yml` ##
-the result css is generated at `public/stylesheets/sprite.css`
+ # defines the base configuration options (file paths, etc, default style, etc)
- .good_topic {
- background: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px;
- width: 20px;
- height: 19px;
+ config:
+ style: css
+ output_path: public/sass/mixins/sprites.sass
+ image_output_path: public/images/sprite/
+ source_path: public/images/
+ class_separator: '_'
+ default_format: png
+
+ # defines what sprite collections get created
+ images:
+
+ # creates a public/images/sprite/blue_stars.png image with 4 sprites in it
+ - name: blue_stars
+ format: png
+ align: horizontal
+ spaced_by: 50
+ sources:
+ - icons/blue_stars/small.png
+ - icons/blue_stars/medium.png
+ - icons/blue_stars/large.png
+ - icons/blue_stars/xlarge.png
+
+ # creates a public/images/sprite/green_stars.jpg image with
+ # all the jpg files contained within /images/icons/green_stars/
+ - name: green_stars
+ format: jpg
+ align: vertical
+ spaced_by: 50
+ sources:
+ - icons/green_stars/*.jpg
+
+## Style Settings ##
+
+By default, it will use with `style: css` and generate the file at `public/stylesheets/sprite.css`
+
+ .sprite.blue_stars_small {
+ background: url('/images/icons/blue_stars/small.png') no-repeat 0px 0px;
+ width: 12px;
+ height: 6px;
}
- .mid_topic {
- background: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
- width: 20px;
- height: 19px;
+ .sprite.blue_stars_medium {
+ background: url('/images/icons/blue_stars/medium.png') no-repeat 0px 6px;
+ width: 30px;
+ height: 15px;
}
- .unread_topic {
- background: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px;
- width: 19px;
- height: 18px;
+ .sprite.blue_stars_large {
+ background: url('/images/icons/blue_stars/large.png') no-repeat 0px 21px;
+ width: 60px;
+ height: 30px;
}
- .sticky_topic {
- background: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px;
- width: 19px;
- height: 18px;
+ .sprite.blue_stars_xlarge {
+ background: url('/images/icons/blue_stars/xlarge.png') no-repeat 0px 96px;
+ width: 100px;
+ height: 75px;
}
+We also support mixin syntax via `style: sass_mixin`. If set, sprite will only generate a yml with your specific sprite configurations. It then provides a SASS mixin which you can use in order to mix in these sprites anywhere within your SASS stylesheets.
-***
+ // you can then use your sprite like this
+ .largebluestar
+ +sprite("blue_stars", "large")
-## Contributors ##
+ .mysmallbluestar
+ +sprite("blue_stars", "small")
-merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra/
-josedelcorral - fix the style of generated css
+## Contributors ##
-***
+merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra
+josedelcorral - fix the style of generated css
Copyright (c) 2009 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license
View
24 config/css_sprite_example_config.yml
@@ -1,24 +0,0 @@
-config:
- base_directory: public/images
- css_output: tmp/css_sprite.css
-
-images:
- - description: Stars with transparency
- sources:
- - sc-mcstars0.png
- - sc-mcstars1.png
- - sc-mcstars2.png
- - sc-mcstars3.png
- target: stars_png_with_transparency.png
- align: horizontal
- spaced_by: 50
-
- - description: Stars as JPEG
- sources:
- - sc-0.jpg
- - sc-1.jpg
- - sc-2.jpg
- - sc-3.jpg
- target: stars_as_jpg.jpg
- align: vertical
- spaced_by: 50
View
5 lib/sprite.rb
@@ -1,6 +1 @@
-require 'rake'
require 'sprite/sprite'
-unless Rake::Task.task_defined? "sprite:build"
- load File.join(File.dirname(__FILE__), '..', 'tasks', 'sprite_tasks.rake')
-end
-
View
18 lib/sprite/sprite.rb
@@ -3,22 +3,28 @@
class Sprite
CONFIG_PATH = RAILS_ROOT + '/config/'
DEFAULT_IMAGE_PATH = RAILS_ROOT + '/public/images/'
- CSS_OUTPUT = RAILS_ROOT + '/tmp/css_sprite.css'
+ DEFAULT_FILE_PATH = RAILS_ROOT + '/tmp/sprite.css'
def initialize
@image_path = DEFAULT_IMAGE_PATH
- @config_files = Dir.glob("#{CONFIG_PATH}/css_sprite*.yml")
+ @config_files = Dir.glob("#{CONFIG_PATH}/sprite.yml")
end
def build
@config_files.each do |config_file|
@output = {}
+
+ # build up settings
sprite_config = File.open(config_file) {|f| YAML::load(f)}
- @image_path = (sprite_config['config']['base_directory'])?RAILS_ROOT+"/"+sprite_config['config']['base_directory']+"/":DEFAULT_IMAGE_PATH
- @css_output = (sprite_config['config']['css_output'])?RAILS_ROOT+"/"+sprite_config['config']['css_output']:CSS_OUTPUT
+ @image_path = sprite_config['config']['base_image_path'] ? RAILS_ROOT+"/"+sprite_config['config']['base_image_path']+"/" : DEFAULT_IMAGE_PATH
+ @file_path = sprite_config['config']['output_file'] ? RAILS_ROOT+"/"+sprite_config['config']['output_file'] : DEFAULT_FILE_PATH
+
+ # create images
sprite_config['images'].each do |configuration|
output_image(configuration)
end
+
+ # write css
output_css(sprite_config)
end
end
@@ -48,8 +54,8 @@ def output_image(configuration)
dest_image.write(@image_path + dest)
end
- def output_css(configuration)
- File.open(@css_output, 'w') do |f|
+ def output_file(configuration)
+ File.open(@file_path, 'w') do |f|
@output.each do |dest, results|
results.each do |result|
f.puts ".#{result[:name]}"
View
2 rails/init.rb
@@ -0,0 +1,2 @@
+require 'sprite'
+
View
41 sprite.gemspec
@@ -1,46 +1,44 @@
# Generated by jeweler
-# DO NOT EDIT THIS FILE
-# Instead, edit Jeweler::Tasks in Rakefile, and run `rake gemspec`
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Jeweler::Tasks in Rakefile, and run the gemspec command
# -*- encoding: utf-8 -*-
Gem::Specification.new do |s|
s.name = %q{sprite}
- s.version = "1.0.1"
+ s.version = "0.1.0"
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
- s.authors = ["Richard Huang"]
- s.date = %q{2009-10-16}
- s.description = %q{sprite is a rails plugin/gem to generate css sprite image automatically.}
- s.email = %q{flyerhzm@gmail.com}
+ s.authors = ["Jacques Crocker", "Richard Huang"]
+ s.date = %q{2009-11-13}
+ s.description = %q{sprite is a rails/merb plugin that generates sprites for css, sass}
+ s.email = %q{merbjedi@gmail.com}
s.extra_rdoc_files = [
- "README.textile"
+ "README.md"
]
s.files = [
"MIT-LICENSE",
- "README.textile",
+ "README.md",
"Rakefile",
"VERSION",
- "css_sprite.gemspec",
- "init.rb",
- "install.rb",
- "lib/css_sprite.rb",
- "lib/css_sprite/sprite.rb",
- "spec/css_sprite_spec.rb",
+ "config/css_sprite_example_config.yml",
+ "lib/sprite.rb",
+ "lib/sprite/sprite.rb",
"spec/resources/good_topic.gif",
"spec/resources/mid_topic.gif",
"spec/spec.opts",
"spec/spec_helper.rb",
- "tasks/css_sprite_tasks.rake",
- "uninstall.rb"
+ "spec/sprite_spec.rb",
+ "sprite.gemspec",
+ "tasks/sprite_tasks.rake"
]
- s.homepage = %q{}
+ s.homepage = %q{http://github.com/merbjedi/sprite}
s.rdoc_options = ["--charset=UTF-8"]
s.require_paths = ["lib"]
s.rubygems_version = %q{1.3.5}
- s.summary = %q{css_sprite is a rails plugin/gem to generate css sprite image automatically.}
+ s.summary = %q{generate your css sprites automagically}
s.test_files = [
- "spec/css_sprite_spec.rb",
- "spec/spec_helper.rb"
+ "spec/spec_helper.rb",
+ "spec/sprite_spec.rb"
]
if s.respond_to? :specification_version then
@@ -53,3 +51,4 @@ Gem::Specification.new do |s|
else
end
end
+
View
3 tasks/sprite_tasks.rake
@@ -1,6 +1,5 @@
-
namespace :sprite do
- desc "buid css sprite image"
+ desc "build sprite images based on config/sprite.yml"
task :build do
require File.join(File.dirname(__FILE__), '../lib/sprite/sprite.rb')
Sprite.new.build

0 comments on commit ddcad0e

Please sign in to comment.