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 +7 -0
- data/.gitignore +0 -1
- data/.ruby-gemset +1 -0
- data/.ruby-version +1 -0
- data/.travis.yml +4 -0
- data/Gemfile +2 -0
- data/Gemfile.lock +51 -0
- data/README.md +202 -0
- data/Rakefile +17 -0
- data/css_sprite.gemspec +1 -0
- data/lib/css_sprite/sprite.rb +11 -9
- data/lib/css_sprite/version.rb +1 -1
- data/spec/css_sprite/sprite_spec.rb +3 -3
- data/spec/spec_helper.rb +3 -0
- data/tasks/css_sprite_tasks.rake +2 -2
- metadata +32 -23
- data/.rvmrc +0 -2
- data/README.textile +0 -195
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
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
data/Gemfile
CHANGED
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
data/lib/css_sprite/sprite.rb
CHANGED
@@ -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
|
111
|
+
command.push source
|
103
112
|
end
|
104
|
-
command.push(
|
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
|
data/lib/css_sprite/version.rb
CHANGED
@@ -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
|
-
|
45
|
-
|
46
|
-
@sprite.css_sprite_directories.should
|
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
data/tasks/css_sprite_tasks.rake
CHANGED
@@ -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
|
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
|
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.
|
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
|
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
|
-
- .
|
78
|
+
- .ruby-gemset
|
79
|
+
- .ruby-version
|
80
|
+
- .travis.yml
|
72
81
|
- Gemfile
|
82
|
+
- Gemfile.lock
|
73
83
|
- LICENSE
|
74
84
|
- MIT-LICENSE
|
75
|
-
- README.
|
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:
|
140
|
+
rubygems_version: 2.0.3
|
132
141
|
signing_key:
|
133
|
-
specification_version:
|
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
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
|