css_sprite 2.1.0 → 2.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 6df41d04aaa6354a28cddeaa23925065cc5284cb
4
+ data.tar.gz: bebb3f2a9996e960500e91a509ef05b728b67eaf
5
+ SHA512:
6
+ metadata.gz: 922145bb24514d2228cb3f278b3ccf36b4c2d1e5666c7768c495f439676ef7a86e3961dd21be5e95697f3c5528ca2604d7f40230f01d0dc6959d6f73aa3c2540
7
+ data.tar.gz: 7707f22462b2fd284501df2ff01a5ffbc465f713b4600e4d6fb58ac42d7ddaa9f6c52bf072e66b16d251497b35afcb79bc98443216b597426019dfebd2244b19
data/.gitignore CHANGED
@@ -3,7 +3,6 @@
3
3
  .bundle
4
4
  .config
5
5
  .yardoc
6
- Gemfile.lock
7
6
  InstalledFiles
8
7
  _yardoc
9
8
  coverage
data/.ruby-gemset ADDED
@@ -0,0 +1 @@
1
+ css_sprite
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ ruby-2.0.0
data/.travis.yml ADDED
@@ -0,0 +1,4 @@
1
+ language: ruby
2
+ rvm:
3
+ - 1.9.3
4
+ - 2.0.0
data/Gemfile CHANGED
@@ -2,3 +2,5 @@ source 'https://rubygems.org'
2
2
 
3
3
  # Specify your gem's dependencies in css_sprite.gemspec
4
4
  gemspec
5
+
6
+ gem 'coveralls', require: false
data/Gemfile.lock ADDED
@@ -0,0 +1,51 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ css_sprite (2.2.0)
5
+ mini_magick
6
+ mocha
7
+ rake
8
+ rspec
9
+
10
+ GEM
11
+ remote: https://rubygems.org/
12
+ specs:
13
+ colorize (0.5.8)
14
+ coveralls (0.6.7)
15
+ colorize
16
+ multi_json (~> 1.3)
17
+ rest-client
18
+ simplecov (>= 0.7)
19
+ thor
20
+ diff-lcs (1.2.1)
21
+ metaclass (0.0.1)
22
+ mime-types (1.23)
23
+ mini_magick (3.5.0)
24
+ subexec (~> 0.2.1)
25
+ mocha (0.13.3)
26
+ metaclass (~> 0.0.1)
27
+ multi_json (1.7.7)
28
+ rake (0.9.6)
29
+ rest-client (1.6.7)
30
+ mime-types (>= 1.16)
31
+ rspec (2.13.0)
32
+ rspec-core (~> 2.13.0)
33
+ rspec-expectations (~> 2.13.0)
34
+ rspec-mocks (~> 2.13.0)
35
+ rspec-core (2.13.1)
36
+ rspec-expectations (2.13.0)
37
+ diff-lcs (>= 1.1.3, < 2.0)
38
+ rspec-mocks (2.13.0)
39
+ simplecov (0.7.1)
40
+ multi_json (~> 1.0)
41
+ simplecov-html (~> 0.7.1)
42
+ simplecov-html (0.7.1)
43
+ subexec (0.2.2)
44
+ thor (0.18.1)
45
+
46
+ PLATFORMS
47
+ ruby
48
+
49
+ DEPENDENCIES
50
+ coveralls
51
+ css_sprite!
data/README.md ADDED
@@ -0,0 +1,202 @@
1
+ # css_sprite
2
+
3
+ [![Build Status](https://secure.travis-ci.org/flyerhzm/css_sprite.png)](http://travis-ci.org/flyerhzm/css_sprite)
4
+ [![Coverage Status](https://coveralls.io/repos/flyerhzm/css_sprite/badge.png?branch=master)](https://coveralls.io/r/flyerhzm/css_sprite)
5
+ [![Dependency Status](https://gemnasium.com/flyerhzm/css_sprite.png)](https://gemnasium.com/flyerhzm/css_sprite)
6
+ [![Coderwall Endorse](http://api.coderwall.com/flyerhzm/endorsecount.png)](http://coderwall.com/flyerhzm)
7
+
8
+ automatically css sprite.
9
+
10
+ ## Best Practices
11
+
12
+ I have written posts “css sprite best practices” to introduce the idea that the css_sprite gem follows.
13
+
14
+ [english version](http://huangzhimin.com/2010/04/03/css-sprite-best-practices-english-version)
15
+
16
+ [chinese version](http://huangzhimin.com/2010/04/02/css-sprite-best-practices-chinese-version)
17
+
18
+ otaviofcs wrote a brazilian version to introduce the css_sprite gem,
19
+ check it [here](http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/)
20
+ and he also build a [demo](http://github.com/riopro/css_sprite_demo)
21
+
22
+ ## What css_sprite does?
23
+
24
+ css sprite generates css_sprite image and css files automatically for you follow the conventions as follows.
25
+
26
+ <table>
27
+ <tr><th>images under css_sprite directory</th><th>class name in css_sprite css</th></tr>
28
+ <tr><td>twitter_icon.png</td><td>.twitter_icon</td></tr>
29
+ <tr><td>facebook_icon.png</td><td>.facebook_icon</td></tr>
30
+ <tr><td>hotmail-logo.png</td><td>.hotmail-logo</td></tr>
31
+ <tr><td>gmail-logo.png</td><td>.gmail-logo</td></tr>
32
+ <tr><td>icons/twitter_icon.png</td><td>.icons .twitter_icon</td></tr>
33
+ <tr><td>widget/icons/twitter_icon.png</td><td>.widget .icons .twitter_icon</td></tr>
34
+ <tr><td>twitter_icon_hover.png</td><td>.twitter_icon:hover</td></tr>
35
+ <tr><td>twitter-icon-hover.png</td><td>.twitter-icon:hover</td></tr>
36
+ <tr><td>logos_hover/gmail_logo.png</td><td>.logos:hover .gmail_logo</td></tr>
37
+ <tr><td>logos-hover/gmail-logo.png</td><td>.logos:hover .gmail-logo</td></tr>
38
+ <tr><td>gmail_logo_active.png</td><td>.gmail_logo.active</td></tr>
39
+ <tr><td>gmail-logo-active.png</td><td>.gmail-logo.active</td></tr>
40
+ <tr><td>logos_active/gmail_logo.png</td><td>.logos.active .gmail_logo</td></tr>
41
+ <tr><td>logos-active/gmail-logo.png</td><td>.logos.active .gmail-logo</td></tr>
42
+ </table>
43
+
44
+ css_sprite directory is the directory whose name is "css_sprite" or
45
+ "css_sprite" suffixed under `app/assets/images` directory.
46
+
47
+ css_sprite image is the image file automatically generated under
48
+ `app/assets/images` directory.
49
+
50
+ css_sprite css is the css file automatically generated under
51
+ `app/assets/stylesheets` directory.
52
+
53
+
54
+ ## Install
55
+
56
+ css_sprite depends on the `mini_magick` gem
57
+
58
+ 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.
59
+
60
+ If you use the default optipng tool, please make sure it is successfully installed on your system.
61
+
62
+ install css_sprite as a gem:
63
+
64
+ gem install css_sprite
65
+
66
+ ## Usage
67
+
68
+ 1\. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under `app/assets/images` directory
69
+
70
+ 2\. if you css_sprite in rails2 projects, you should add css_sprite task in Rakefile
71
+
72
+ require 'css_sprite'
73
+
74
+ If you use rails3, you can skip this step too
75
+
76
+ 3\. define `config/css_sprite.yml`, it is not necessary by default.
77
+
78
+ 4\. start css_sprite server
79
+
80
+ rake css_sprite:start
81
+
82
+ 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.
83
+
84
+ 6\. include the stylesheet in your view page
85
+
86
+ <%= stylesheet_link_tag 'css_sprite' %>
87
+
88
+ You can stop the css_sprite server by `rake css_sprite:stop`
89
+
90
+ You can restart the css_sprite server by `rake css_sprite:start`
91
+
92
+ Or you can just do the css sprite manually by `rake css_sprite:build`
93
+
94
+ ## Configuration
95
+
96
+ 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.
97
+
98
+ ### Example for rails 2.x or 3.0
99
+
100
+ engine: css
101
+ image_path: public/images
102
+ stylesheet_path: public/stylesheets
103
+ css_images_path: images
104
+
105
+ ### Destination Image Format
106
+
107
+ css_sprite saves the css sprite image as a png file by default. You can change it to gif or any other format like
108
+
109
+ format: GIF
110
+
111
+ ### Use asset-url
112
+
113
+ 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
114
+
115
+ use_asset_url: true
116
+
117
+ ### Sass
118
+
119
+ css_sprite generates css.scss file by default. You can change it to pure css or sass as you like.
120
+
121
+ engine: css
122
+
123
+ engine: css.sass
124
+
125
+ ### Image Optimization
126
+
127
+ css_sprite allows to do optimization to generated css_sprite.png, you can use default **optipng** with optimization level 2.
128
+
129
+ optimization: true
130
+
131
+ Or you can change it to any image optimization command.
132
+
133
+ optimization: optipng -o 7
134
+
135
+ ### Customization styles
136
+
137
+ For css or scss
138
+
139
+ suffix:
140
+ button: |
141
+ text-indent: -9999px;
142
+ display: block;
143
+ cursor: pointer;
144
+ font-size: 0;
145
+ line-height: 15px;
146
+ border: 0;
147
+ outline: 0;
148
+ icon: |
149
+ text-indent: -9999px;
150
+ cursor: pointer;
151
+
152
+ For sass
153
+
154
+ engine: sass
155
+ suffix:
156
+ button: |
157
+ text-indent: -9999px
158
+ display: block
159
+ cursor: pointer
160
+ font-size: 0
161
+ line-height: 15px
162
+ border: 0
163
+ outline: 0
164
+ icon: |
165
+ text-indent: -9999px
166
+ cursor: pointer
167
+
168
+ `engine` defines css.scss (default), pure css or sass file to generate.
169
+
170
+ `suffix` defines the customization styles for specified images.
171
+
172
+ 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),
173
+ 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)
174
+
175
+ ### Customization directories
176
+
177
+ css_sprite follows the conventions that images are under
178
+ `app/assets/images` directory and css files are under
179
+ `app/assets/stylesheets`, but you can change them.
180
+
181
+ image_path: public/images
182
+ stylesheet_path: public/stylesheets
183
+
184
+ By default, image_path is `app/assets/images` and stylesheet_path is
185
+ `app/assets/stylesheets`.
186
+
187
+ ## Example
188
+
189
+ I built an example
190
+
191
+ images are under `app/assets/images/css_sprite/`
192
+
193
+ generated css sprite image is at `app/assets/images/css_sprite.png`
194
+
195
+ genereated css file is at `app/assets/stylesheets/css_sprite.css`
196
+
197
+ $ cd example
198
+ $ rake css_sprite:build
199
+ $ open index.html
200
+
201
+
202
+ Copyright (c) 2009 - 2013 [Richard Huang] flyerhzm@gmail.com, released under the MIT license
data/Rakefile CHANGED
@@ -1,2 +1,19 @@
1
1
  #!/usr/bin/env rake
2
2
  require "bundler/gem_tasks"
3
+
4
+ require "rake"
5
+ require "rdoc/task"
6
+ require "rspec"
7
+ require "rspec/core/rake_task"
8
+
9
+
10
+ RSpec::Core::RakeTask.new(:spec) do |spec|
11
+ spec.pattern = "spec/**/*_spec.rb"
12
+ end
13
+
14
+ RSpec::Core::RakeTask.new('spec:progress') do |spec|
15
+ spec.rspec_opts = %w(--format progress)
16
+ spec.pattern = "spec/**/*_spec.rb"
17
+ end
18
+
19
+ task :default => :spec
data/css_sprite.gemspec CHANGED
@@ -16,6 +16,7 @@ Gem::Specification.new do |gem|
16
16
  gem.version = CssSprite::VERSION
17
17
 
18
18
  gem.add_dependency("mini_magick")
19
+ gem.add_runtime_dependency("rake")
19
20
  gem.add_runtime_dependency("rspec")
20
21
  gem.add_runtime_dependency("mocha")
21
22
  end
@@ -98,17 +98,19 @@ class Sprite
98
98
  end
99
99
 
100
100
  command = MiniMagick::CommandBuilder.new('montage')
101
+ {
102
+ 'tile' => '1x',
103
+ 'geometry' => '+0+0',
104
+ 'background' => 'None',
105
+ 'gravity' => 'West',
106
+ 'format' => @config['format'] || 'PNG'
107
+ }.each do |cmd, opt|
108
+ command.add_command cmd, opt
109
+ end
101
110
  sources.each do |source|
102
- command.push command.escape_string source
111
+ command.push source
103
112
  end
104
- command.push('-tile 1x')
105
- command.push("-geometry +0+0")
106
- command.push('-background None')
107
- command.push('-gravity West')
108
- command.push('-format')
109
- format = @config['format'] || "PNG"
110
- command.push(command.escape_string(format))
111
- command.push(command.escape_string(dest_image_path))
113
+ command.push(dest_image_path)
112
114
  MiniMagick::Image.new(nil).run(command)
113
115
  results
114
116
  end
@@ -1,3 +1,3 @@
1
1
  module CssSprite
2
- VERSION = "2.1.0"
2
+ VERSION = "2.2.0"
3
3
  end
@@ -41,9 +41,9 @@ describe Sprite do
41
41
 
42
42
  describe "css_sprite_directories" do
43
43
  it "should read two direcoties" do
44
- expected_directories = [File.join(IMAGE_PATH, 'another_css_sprite'),
45
- File.join(IMAGE_PATH, 'css_sprite')]
46
- @sprite.css_sprite_directories.should == expected_directories
44
+ @sprite.css_sprite_directories.should have(2).items
45
+ @sprite.css_sprite_directories.should be_include File.join(IMAGE_PATH, 'another_css_sprite')
46
+ @sprite.css_sprite_directories.should be_include File.join(IMAGE_PATH, 'css_sprite')
47
47
  end
48
48
  end
49
49
 
data/spec/spec_helper.rb CHANGED
@@ -3,6 +3,9 @@ require 'rspec/autorun'
3
3
  require 'date'
4
4
  require 'mocha/api'
5
5
 
6
+ require 'coveralls'
7
+ Coveralls.wear!
8
+
6
9
  class Dir
7
10
  def self.pwd
8
11
  File.dirname(__FILE__)
@@ -13,7 +13,7 @@ namespace :css_sprite do
13
13
  desc "start css sprite server"
14
14
  task :start do
15
15
  automatic_script = File.join(File.dirname(__FILE__), '..', 'lib', 'automatic.rb')
16
- if Config::CONFIG['host_os'] =~ /mswin|mingw/
16
+ if RbConfig::CONFIG['host_os'] =~ /mswin|mingw/
17
17
  exec "start \"css_sprite\" ruby.exe #{automatic_script}"
18
18
  puts "css_sprite server started sucessfully."
19
19
  else
@@ -34,7 +34,7 @@ namespace :css_sprite do
34
34
 
35
35
  desc "stop css sprite server"
36
36
  task :stop do
37
- if Config::CONFIG['host_os'] =~ /mswin|mingw/
37
+ if RbConfig::CONFIG['host_os'] =~ /mswin|mingw/
38
38
  exec "taskkill /im ruby.exe /fi \"Windowtitle eq css_sprite\""
39
39
  puts "css_sprite server shutdown sucessfully."
40
40
  else
metadata CHANGED
@@ -1,62 +1,69 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css_sprite
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.0
5
- prerelease:
4
+ version: 2.2.0
6
5
  platform: ruby
7
6
  authors:
8
7
  - Richard Huang
9
8
  autorequire:
10
9
  bindir: bin
11
10
  cert_chain: []
12
- date: 2013-02-04 00:00:00.000000000 Z
11
+ date: 2013-07-02 00:00:00.000000000 Z
13
12
  dependencies:
14
13
  - !ruby/object:Gem::Dependency
15
14
  name: mini_magick
16
15
  requirement: !ruby/object:Gem::Requirement
17
- none: false
18
16
  requirements:
19
- - - ! '>='
17
+ - - '>='
20
18
  - !ruby/object:Gem::Version
21
19
  version: '0'
22
20
  type: :runtime
23
21
  prerelease: false
24
22
  version_requirements: !ruby/object:Gem::Requirement
25
- none: false
26
23
  requirements:
27
- - - ! '>='
24
+ - - '>='
25
+ - !ruby/object:Gem::Version
26
+ version: '0'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
28
39
  - !ruby/object:Gem::Version
29
40
  version: '0'
30
41
  - !ruby/object:Gem::Dependency
31
42
  name: rspec
32
43
  requirement: !ruby/object:Gem::Requirement
33
- none: false
34
44
  requirements:
35
- - - ! '>='
45
+ - - '>='
36
46
  - !ruby/object:Gem::Version
37
47
  version: '0'
38
48
  type: :runtime
39
49
  prerelease: false
40
50
  version_requirements: !ruby/object:Gem::Requirement
41
- none: false
42
51
  requirements:
43
- - - ! '>='
52
+ - - '>='
44
53
  - !ruby/object:Gem::Version
45
54
  version: '0'
46
55
  - !ruby/object:Gem::Dependency
47
56
  name: mocha
48
57
  requirement: !ruby/object:Gem::Requirement
49
- none: false
50
58
  requirements:
51
- - - ! '>='
59
+ - - '>='
52
60
  - !ruby/object:Gem::Version
53
61
  version: '0'
54
62
  type: :runtime
55
63
  prerelease: false
56
64
  version_requirements: !ruby/object:Gem::Requirement
57
- none: false
58
65
  requirements:
59
- - - ! '>='
66
+ - - '>='
60
67
  - !ruby/object:Gem::Version
61
68
  version: '0'
62
69
  description: css_sprite is a rails plugin/gem to generate css sprite image automatically.
@@ -68,11 +75,14 @@ extra_rdoc_files: []
68
75
  files:
69
76
  - .gitignore
70
77
  - .rspec
71
- - .rvmrc
78
+ - .ruby-gemset
79
+ - .ruby-version
80
+ - .travis.yml
72
81
  - Gemfile
82
+ - Gemfile.lock
73
83
  - LICENSE
74
84
  - MIT-LICENSE
75
- - README.textile
85
+ - README.md
76
86
  - Rakefile
77
87
  - VERSION
78
88
  - css_sprite.gemspec
@@ -110,27 +120,26 @@ files:
110
120
  - tasks/css_sprite_tasks.rake
111
121
  homepage: https://github.com/flyerhzm/css_sprite
112
122
  licenses: []
123
+ metadata: {}
113
124
  post_install_message:
114
125
  rdoc_options: []
115
126
  require_paths:
116
127
  - lib
117
128
  required_ruby_version: !ruby/object:Gem::Requirement
118
- none: false
119
129
  requirements:
120
- - - ! '>='
130
+ - - '>='
121
131
  - !ruby/object:Gem::Version
122
132
  version: '0'
123
133
  required_rubygems_version: !ruby/object:Gem::Requirement
124
- none: false
125
134
  requirements:
126
- - - ! '>='
135
+ - - '>='
127
136
  - !ruby/object:Gem::Version
128
137
  version: '0'
129
138
  requirements: []
130
139
  rubyforge_project:
131
- rubygems_version: 1.8.24
140
+ rubygems_version: 2.0.3
132
141
  signing_key:
133
- specification_version: 3
142
+ specification_version: 4
134
143
  summary: css_sprite is a rails plugin/gem to generate css sprite image automatically.
135
144
  test_files:
136
145
  - spec/app/assets/images/another_css_sprite/no_image
data/.rvmrc DELETED
@@ -1,2 +0,0 @@
1
- rvm_gemset_create_on_use_flag=1
2
- rvm gemset use css_sprite
data/README.textile DELETED
@@ -1,195 +0,0 @@
1
- h1. css_sprite
2
-
3
- automatically css sprite.
4
-
5
- *************************************************************************
6
-
7
- h2. Best Practices
8
-
9
- I have written posts "css sprite best practices" to introduce the idea that the css_sprite gem follows.
10
- "english version":http://huangzhimin.com/2010/04/03/css-sprite-best-practices-english-version
11
- "chinese version":http://huangzhimin.com/2010/04/02/css-sprite-best-practices-chinese-version
12
-
13
- otaviofcs wrote a brazilian version to introduce the css_sprite gem, check it here: "http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/":http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/
14
- and he also build a demo, "http://github.com/riopro/css_sprite_demo":http://github.com/riopro/css_sprite_demo
15
-
16
- **************************************************************************
17
-
18
- h2. What css_sprite does?
19
-
20
- css sprite generates css_sprite image and css files automatically for you follow the conventions as follows.
21
-
22
- | images under css_sprite directory | class name in css_sprite css |
23
- | twitter_icon.png | .twitter_icon |
24
- | facebook_icon.png | .facebook_icon |
25
- | hotmail-logo.png | .hotmail-logo |
26
- | gmail-logo.png | .gmail-logo |
27
- | icons/twitter_icon.png | .icons .twitter_icon |
28
- | widget/icons/twitter_icon.png | .widget .icons .twitter_icon |
29
- | twitter_icon_hover.png | .twitter_icon:hover |
30
- | twitter-icon-hover.png | .twitter-icon:hover |
31
- | logos_hover/gmail_logo.png | .logos:hover .gmail_logo |
32
- | logos-hover/gmail-logo.png | .logos:hover .gmail-logo |
33
- | gmail_logo_active.png | .gmail_logo.active |
34
- | gmail-logo-active.png | .gmail-logo.active |
35
- | logos_active/gmail_logo.png | .logos.active .gmail_logo |
36
- | logos-active/gmail-logo.png | .logos.active .gmail-logo |
37
-
38
- css_sprite directory is the directory whose name is "css_sprite" or "css_sprite" suffixed under public/images directory.
39
- css_sprite image is the image file automatically generated under public/images directory.
40
- css_sprite css is the css file automatically generated under public/stylesheets directory.
41
-
42
- **************************************************************************
43
-
44
- h2. Install
45
-
46
- css_sprite depends on the <code>mini_magick</code> gem
47
- css_sprite also depends on the <code>optipng</code> 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.
48
-
49
- install css_sprite as a gem:
50
- <pre><code>gem install css_sprite</code></pre>
51
-
52
- **************************************************************************
53
-
54
- h2. Usage
55
-
56
- 1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under <code>app/assets/images</code> directory
57
-
58
- 2. if you css_sprite in rails2 projects, you should add css_sprite task in Rakefile
59
- <pre><code>require 'css_sprite'</code></pre>
60
- If you use rails3, you can skip this step too
61
-
62
- 2. define <code>config/css_sprite.yml</code>, it is not necessary by default.
63
-
64
- 3. start css_sprite server
65
- <pre><code>rake css_sprite:start</code></pre>
66
-
67
- 4. 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.
68
-
69
- 5. include the stylesheet in your view page
70
- <pre><code><%= stylesheet_link_tag 'css_sprite' %></code></pre>
71
-
72
- You can stop the css_sprite server by <code>rake css_sprite:stop</code>
73
-
74
- You can restart the css_sprite server by <code>rake css_sprite:start</code>
75
-
76
- Or you can just do the css sprite manually by <code>rake css_sprite:build</code>
77
-
78
- **************************************************************************
79
-
80
- h2. Configuration
81
-
82
- 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 <code>config/css_sprite.yml</code> file.
83
-
84
- h3. Example for rails 2.x or 3.0
85
-
86
- <pre><code>
87
- engine: css
88
- image_path: public/images
89
- stylesheet_path: public/stylesheets
90
- css_images_path: images
91
- </code></pre>
92
-
93
- h3. Destination Image Format
94
-
95
- css_sprite saves the css sprite image as a png file by default. You can change it to gif or any other format like
96
-
97
- <pre><code>
98
- format: GIF
99
- </code></pre>
100
-
101
- h3. Use asset-url
102
-
103
- css_sprite generate <code>background: url('css_sprite.png') no-repeat</code> by default, if you prefer <code>background: asset-url('css_sprite.png') no-repeat</code>, you can change it as follows
104
-
105
- <pre><code>
106
- use_asset_url: true
107
- </code></pre>
108
-
109
- h3. Sass
110
-
111
- css_sprite generates css.scss file by default. You can change it to pure css or sass as you like.
112
-
113
- <pre><code>engine: css</code></pre>
114
-
115
- <pre><code>engine: css.sass</code></pre>
116
-
117
- h3. Image Optimization
118
-
119
- css_sprite allows to do optimization to generated css_sprite.png, you can use default *optipng* with optimization level 2.
120
-
121
- <pre><code>optimization: true</code></pre>
122
-
123
- Or you can change it to any image optimization command.
124
-
125
- <pre><code>optimization: optipng -o 7</code></pre>
126
-
127
- h3. Customization styles
128
-
129
- * For css or scss
130
- <pre><code>
131
- suffix:
132
- button: |
133
- text-indent: -9999px;
134
- display: block;
135
- cursor: pointer;
136
- font-size: 0;
137
- line-height: 15px;
138
- border: 0;
139
- outline: 0;
140
- icon: |
141
- text-indent: -9999px;
142
- cursor: pointer;
143
- </code></pre>
144
-
145
- * For sass
146
- <pre><code>
147
- engine: sass
148
- suffix:
149
- button: |
150
- text-indent: -9999px
151
- display: block
152
- cursor: pointer
153
- font-size: 0
154
- line-height: 15px
155
- border: 0
156
- outline: 0
157
- icon: |
158
- text-indent: -9999px
159
- cursor: pointer
160
- </code></pre>
161
-
162
- <code>engine</code> defines css.scss (default), pure css or sass file to generate.
163
- <code>suffix</code> defines the customization styles for specified images.
164
- 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),
165
- 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)
166
-
167
- h3. Customization directories
168
-
169
- css_sprite follows the conventions that images are under <code>app/assets/images</code> directory and css files are under <code>app/assets/stylesheets</code>, but you can change them.
170
-
171
- <pre><code>
172
- image_path: public/images
173
- stylesheet_path: public/stylesheets
174
- </code></pre>
175
-
176
- By default, image_path is app/assets/images and stylesheet_path is app/assets/stylesheets.
177
-
178
- h2. Example
179
-
180
- I built an example
181
-
182
- images are under <code>app/assets/images/css_sprite/</code>
183
- generated css sprite image is at <code>app/assets/images/css_sprite.png</code>
184
- genereated css file is at <code>app/assets/stylesheets/css_sprite.css</code>
185
-
186
- <pre><code>
187
- $ cd example
188
- $ rake css_sprite:build
189
- $ open index.html
190
- </code></pre>
191
-
192
-
193
- **************************************************************************
194
-
195
- Copyright (c) 2009 - 2013 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license