sprite-factory-custom 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/Gemfile +12 -0
- data/LICENSE +20 -0
- data/README.md +351 -0
- data/RELEASE_NOTES.md +60 -0
- data/Rakefile +73 -0
- data/bin/sf +57 -0
- data/lib/sprite_factory/layout/horizontal.rb +44 -0
- data/lib/sprite_factory/layout/packed.rb +118 -0
- data/lib/sprite_factory/layout/vertical.rb +44 -0
- data/lib/sprite_factory/library/chunky_png.rb +31 -0
- data/lib/sprite_factory/library/image_magick.rb +74 -0
- data/lib/sprite_factory/library/rmagick.rb +32 -0
- data/lib/sprite_factory/runner.rb +287 -0
- data/lib/sprite_factory/style.rb +74 -0
- data/lib/sprite_factory.rb +85 -0
- data/sprite_factory.gemspec +27 -0
- data/test/images/custom/custom.css +4 -0
- data/test/images/custom/running.png +0 -0
- data/test/images/custom/stopped.png +0 -0
- data/test/images/empty/readme.txt +1 -0
- data/test/images/formats/alice.gif +0 -0
- data/test/images/formats/codeincomplete.ico +0 -0
- data/test/images/formats/github.ico +0 -0
- data/test/images/formats/monkey.gif +0 -0
- data/test/images/formats/spies.jpg +0 -0
- data/test/images/formats/stackoverflow.ico +0 -0
- data/test/images/formats/thief.png +0 -0
- data/test/images/hover/div.bar__img.icon--active.png +0 -0
- data/test/images/hover/div.bar__img.icon--focus.png +0 -0
- data/test/images/hover/div.bar__img.icon--hover.png +0 -0
- data/test/images/hover/div.bar__img.icon--link.png +0 -0
- data/test/images/hover/div.bar__img.icon--visited.png +0 -0
- data/test/images/hover/div.bar__img.icon.png +0 -0
- data/test/images/hover/div.foo__img.icon--active.png +0 -0
- data/test/images/hover/div.foo__img.icon--focus.png +0 -0
- data/test/images/hover/div.foo__img.icon--hover.png +0 -0
- data/test/images/hover/div.foo__img.icon--link.png +0 -0
- data/test/images/hover/div.foo__img.icon--visited.png +0 -0
- data/test/images/hover/div.foo__img.icon.png +0 -0
- data/test/images/irregular/irregular1.png +0 -0
- data/test/images/irregular/irregular2.png +0 -0
- data/test/images/irregular/irregular3.png +0 -0
- data/test/images/irregular/irregular4.png +0 -0
- data/test/images/irregular/irregular5.png +0 -0
- data/test/images/irregular/readme.txt +2 -0
- data/test/images/reference/custom.css +22 -0
- data/test/images/reference/custom.png +0 -0
- data/test/images/reference/formats.css +28 -0
- data/test/images/reference/formats.png +0 -0
- data/test/images/reference/hover.css +38 -0
- data/test/images/reference/hover.png +0 -0
- data/test/images/reference/index.html +182 -0
- data/test/images/reference/irregular.css +24 -0
- data/test/images/reference/irregular.fixed.css +24 -0
- data/test/images/reference/irregular.fixed.png +0 -0
- data/test/images/reference/irregular.horizontal.css +24 -0
- data/test/images/reference/irregular.horizontal.png +0 -0
- data/test/images/reference/irregular.margin.css +24 -0
- data/test/images/reference/irregular.margin.png +0 -0
- data/test/images/reference/irregular.packed.css +24 -0
- data/test/images/reference/irregular.packed.png +0 -0
- data/test/images/reference/irregular.padded.css +24 -0
- data/test/images/reference/irregular.padded.png +0 -0
- data/test/images/reference/irregular.png +0 -0
- data/test/images/reference/irregular.sassy.css +38 -0
- data/test/images/reference/irregular.sassy.png +0 -0
- data/test/images/reference/irregular.sassy.sass +40 -0
- data/test/images/reference/irregular.vertical.css +24 -0
- data/test/images/reference/irregular.vertical.png +0 -0
- data/test/images/reference/regular.css +24 -0
- data/test/images/reference/regular.custom.css +24 -0
- data/test/images/reference/regular.custom.png +0 -0
- data/test/images/reference/regular.fixed.css +24 -0
- data/test/images/reference/regular.fixed.png +0 -0
- data/test/images/reference/regular.horizontal.css +24 -0
- data/test/images/reference/regular.horizontal.png +0 -0
- data/test/images/reference/regular.margin.css +24 -0
- data/test/images/reference/regular.margin.png +0 -0
- data/test/images/reference/regular.nocomments.css +5 -0
- data/test/images/reference/regular.nocomments.png +0 -0
- data/test/images/reference/regular.packed.css +24 -0
- data/test/images/reference/regular.packed.png +0 -0
- data/test/images/reference/regular.padded.css +24 -0
- data/test/images/reference/regular.padded.png +0 -0
- data/test/images/reference/regular.png +0 -0
- data/test/images/reference/regular.sassy.css +38 -0
- data/test/images/reference/regular.sassy.png +0 -0
- data/test/images/reference/regular.sassy.sass +40 -0
- data/test/images/reference/regular.vertical.css +24 -0
- data/test/images/reference/regular.vertical.png +0 -0
- data/test/images/reference/s.gif +0 -0
- data/test/images/reference/subfolders.css +24 -0
- data/test/images/reference/subfolders.png +0 -0
- data/test/images/regular/regular1.PNG +0 -0
- data/test/images/regular/regular2.PNG +0 -0
- data/test/images/regular/regular3.PNG +0 -0
- data/test/images/regular/regular4.PNG +0 -0
- data/test/images/regular/regular5.PNG +0 -0
- data/test/images/subfolders/england/amy.png +0 -0
- data/test/images/subfolders/england/bob.png +0 -0
- data/test/images/subfolders/france/bob.png +0 -0
- data/test/images/subfolders/usa/amy.png +0 -0
- data/test/images/subfolders/usa/bob.png +0 -0
- data/test/integration_test.rb +167 -0
- data/test/layout/horizontal_test.rb +156 -0
- data/test/layout/packed_test.rb +283 -0
- data/test/layout/test_case.rb +56 -0
- data/test/layout/vertical_test.rb +156 -0
- data/test/library_test.rb +58 -0
- data/test/runner_test.rb +229 -0
- data/test/style_test.rb +72 -0
- data/test/test_case.rb +138 -0
- metadata +286 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
module SpriteFactory
|
|
2
|
+
|
|
3
|
+
#----------------------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
VERSION = "1.6.0"
|
|
6
|
+
SUMMARY = "Automatic CSS sprite generator"
|
|
7
|
+
DESCRIPTION = "[tam-vo/sprite-factory] Combines individual images from a directory into a single sprite image file and creates an appropriate CSS stylesheet"
|
|
8
|
+
LIB = File.dirname(__FILE__)
|
|
9
|
+
|
|
10
|
+
autoload :Runner, File.join(LIB, 'sprite_factory/runner') # controller that glues everything together
|
|
11
|
+
autoload :Style, File.join(LIB, 'sprite_factory/style') # style generators all live in a single module (for now)
|
|
12
|
+
|
|
13
|
+
def self.run!(input, config = {}, &block)
|
|
14
|
+
Runner.new(input, config).run!(&block)
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
#
|
|
18
|
+
# fallback defaults for some options can be set at module level to
|
|
19
|
+
# avoid having to pass them to #run! every single time
|
|
20
|
+
#
|
|
21
|
+
class << self
|
|
22
|
+
attr_accessor :report
|
|
23
|
+
attr_accessor :style
|
|
24
|
+
attr_accessor :layout
|
|
25
|
+
attr_accessor :library
|
|
26
|
+
attr_accessor :selector
|
|
27
|
+
attr_accessor :cssurl
|
|
28
|
+
attr_accessor :pngcrush
|
|
29
|
+
attr_accessor :nocomments
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
#----------------------------------------------------------------------------
|
|
33
|
+
|
|
34
|
+
module Layout # abstract module for various layout strategies
|
|
35
|
+
|
|
36
|
+
autoload :Horizontal, File.join(LIB, 'sprite_factory/layout/horizontal') # concrete module for layout in a single horizontal strip
|
|
37
|
+
autoload :Vertical, File.join(LIB, 'sprite_factory/layout/vertical') # concrete module for layout in a single vertical strip
|
|
38
|
+
autoload :Packed, File.join(LIB, 'sprite_factory/layout/packed') # concrete module for layout in a bin-packed square
|
|
39
|
+
|
|
40
|
+
def self.horizontal
|
|
41
|
+
Horizontal
|
|
42
|
+
end
|
|
43
|
+
|
|
44
|
+
def self.vertical
|
|
45
|
+
Vertical
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def self.packed
|
|
49
|
+
Packed
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
#----------------------------------------------------------------------------
|
|
55
|
+
|
|
56
|
+
module Library # abstract module for using various image libraries
|
|
57
|
+
|
|
58
|
+
autoload :RMagick, File.join(LIB, 'sprite_factory/library/rmagick') # concrete module for using RMagick (loaded on demand)
|
|
59
|
+
autoload :ChunkyPng, File.join(LIB, 'sprite_factory/library/chunky_png') # concrete module for using ChunkyPng (ditto)
|
|
60
|
+
autoload :ImageMagick, File.join(LIB, 'sprite_factory/library/image_magick') # concrete module for using ImageMagick (ditto)
|
|
61
|
+
|
|
62
|
+
def self.rmagick
|
|
63
|
+
RMagick
|
|
64
|
+
end
|
|
65
|
+
|
|
66
|
+
def self.chunkypng
|
|
67
|
+
ChunkyPng
|
|
68
|
+
end
|
|
69
|
+
|
|
70
|
+
def self.image_magick
|
|
71
|
+
ImageMagick
|
|
72
|
+
end
|
|
73
|
+
|
|
74
|
+
end
|
|
75
|
+
|
|
76
|
+
#----------------------------------------------------------------------------
|
|
77
|
+
|
|
78
|
+
def self.find_files(*args)
|
|
79
|
+
Dir.glob(args, File::FNM_CASEFOLD).sort # we always do case IN-sensitive file lookups and sort the result
|
|
80
|
+
end
|
|
81
|
+
|
|
82
|
+
#----------------------------------------------------------------------------
|
|
83
|
+
|
|
84
|
+
end
|
|
85
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$LOAD_PATH.push File.expand_path("lib", File.dirname(__FILE__))
|
|
3
|
+
require 'sprite_factory'
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
|
|
7
|
+
s.name = "sprite-factory-custom"
|
|
8
|
+
s.version = SpriteFactory::VERSION
|
|
9
|
+
s.platform = Gem::Platform::RUBY
|
|
10
|
+
s.authors = ["Jake Gordon", "Tam Vo"]
|
|
11
|
+
s.email = ["jake@codeincomplete.com", "vo.mita.ov@gmail.com"]
|
|
12
|
+
s.homepage = "https://github.com/tam-vo/sprite-factory"
|
|
13
|
+
s.summary = SpriteFactory::SUMMARY
|
|
14
|
+
s.description = SpriteFactory::DESCRIPTION
|
|
15
|
+
|
|
16
|
+
s.add_development_dependency 'rmagick'
|
|
17
|
+
s.add_development_dependency 'chunky_png'
|
|
18
|
+
|
|
19
|
+
s.has_rdoc = false
|
|
20
|
+
s.extra_rdoc_files = ["README.md"]
|
|
21
|
+
s.rdoc_options = ["--charset=UTF-8"]
|
|
22
|
+
s.files = `git ls-files `.split("\n")
|
|
23
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
24
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
|
25
|
+
s.require_paths = ["lib"]
|
|
26
|
+
|
|
27
|
+
end
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
this file is only here because git can't deal with empty directories (uck)
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/custom/running.png (46x25)
|
|
6
|
+
test/images/custom/stopped.png (46x25)
|
|
7
|
+
|
|
8
|
+
Output files:
|
|
9
|
+
test/images/custom.png
|
|
10
|
+
test/images/custom.css
|
|
11
|
+
|
|
12
|
+
Output size:
|
|
13
|
+
92x25
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
*/
|
|
17
|
+
div.running img.button { cursor: pointer; width: 46px; height: 25px; background: url(custom.png) 0px 0px no-repeat }
|
|
18
|
+
div.stopped img.button { cursor: pointer; width: 46px; height: 25px; background: url(custom.png) -46px 0px no-repeat }
|
|
19
|
+
div.running span.running { display: inline; }
|
|
20
|
+
div.running span.stopped { display: none; }
|
|
21
|
+
div.stopped span.running { display: none; }
|
|
22
|
+
div.stopped span.stopped { display: inline; }
|
|
Binary file
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/formats/alice.gif (50x50)
|
|
6
|
+
test/images/formats/codeincomplete.ico (16x16)
|
|
7
|
+
test/images/formats/github.ico (32x32)
|
|
8
|
+
test/images/formats/monkey.gif (50x50)
|
|
9
|
+
test/images/formats/spies.jpg (150x92)
|
|
10
|
+
test/images/formats/stackoverflow.ico (16x16)
|
|
11
|
+
test/images/formats/thief.png (50x50)
|
|
12
|
+
|
|
13
|
+
Output files:
|
|
14
|
+
test/images/formats.png
|
|
15
|
+
test/images/formats.css
|
|
16
|
+
|
|
17
|
+
Output size:
|
|
18
|
+
364x92
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
*/
|
|
22
|
+
img.alice { width: 50px; height: 50px; background: url(formats.png) 0px -21px no-repeat; }
|
|
23
|
+
img.codeincomplete { width: 16px; height: 16px; background: url(formats.png) -50px -38px no-repeat; }
|
|
24
|
+
img.github { width: 32px; height: 32px; background: url(formats.png) -66px -30px no-repeat; }
|
|
25
|
+
img.monkey { width: 50px; height: 50px; background: url(formats.png) -98px -21px no-repeat; }
|
|
26
|
+
img.spies { width: 150px; height: 92px; background: url(formats.png) -148px 0px no-repeat; }
|
|
27
|
+
img.stackoverflow { width: 16px; height: 16px; background: url(formats.png) -298px -38px no-repeat; }
|
|
28
|
+
img.thief { width: 50px; height: 50px; background: url(formats.png) -314px -21px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/hover/div.bar__img.icon.png (18x18)
|
|
6
|
+
test/images/hover/div.bar__img.icon--link.png (18x18)
|
|
7
|
+
test/images/hover/div.bar__img.icon--visited.png (18x18)
|
|
8
|
+
test/images/hover/div.bar__img.icon--focus.png (18x18)
|
|
9
|
+
test/images/hover/div.bar__img.icon--hover.png (18x18)
|
|
10
|
+
test/images/hover/div.bar__img.icon--active.png (18x18)
|
|
11
|
+
test/images/hover/div.foo__img.icon.png (18x18)
|
|
12
|
+
test/images/hover/div.foo__img.icon--link.png (18x18)
|
|
13
|
+
test/images/hover/div.foo__img.icon--visited.png (18x18)
|
|
14
|
+
test/images/hover/div.foo__img.icon--focus.png (18x18)
|
|
15
|
+
test/images/hover/div.foo__img.icon--hover.png (18x18)
|
|
16
|
+
test/images/hover/div.foo__img.icon--active.png (18x18)
|
|
17
|
+
|
|
18
|
+
Output files:
|
|
19
|
+
test/images/hover.png
|
|
20
|
+
test/images/hover.css
|
|
21
|
+
|
|
22
|
+
Output size:
|
|
23
|
+
216x18
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
*/
|
|
27
|
+
div.hover div.bar img.icon { width: 18px; height: 18px; background: url(hover.png) 0px 0px no-repeat; }
|
|
28
|
+
div.hover div.bar img.icon:link { width: 18px; height: 18px; background: url(hover.png) -18px 0px no-repeat; }
|
|
29
|
+
div.hover div.bar img.icon:visited { width: 18px; height: 18px; background: url(hover.png) -36px 0px no-repeat; }
|
|
30
|
+
div.hover div.bar img.icon:focus { width: 18px; height: 18px; background: url(hover.png) -54px 0px no-repeat; }
|
|
31
|
+
div.hover div.bar img.icon:hover { width: 18px; height: 18px; background: url(hover.png) -72px 0px no-repeat; }
|
|
32
|
+
div.hover div.bar img.icon:active { width: 18px; height: 18px; background: url(hover.png) -90px 0px no-repeat; }
|
|
33
|
+
div.hover div.foo img.icon { width: 18px; height: 18px; background: url(hover.png) -108px 0px no-repeat; }
|
|
34
|
+
div.hover div.foo img.icon:link { width: 18px; height: 18px; background: url(hover.png) -126px 0px no-repeat; }
|
|
35
|
+
div.hover div.foo img.icon:visited { width: 18px; height: 18px; background: url(hover.png) -144px 0px no-repeat; }
|
|
36
|
+
div.hover div.foo img.icon:focus { width: 18px; height: 18px; background: url(hover.png) -162px 0px no-repeat; }
|
|
37
|
+
div.hover div.foo img.icon:hover { width: 18px; height: 18px; background: url(hover.png) -180px 0px no-repeat; }
|
|
38
|
+
div.hover div.foo img.icon:active { width: 18px; height: 18px; background: url(hover.png) -198px 0px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset='utf-8' />
|
|
5
|
+
<title>Test page for sprite factory</title>
|
|
6
|
+
<link href='regular.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
7
|
+
<link href='regular.horizontal.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
8
|
+
<link href='regular.vertical.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
9
|
+
<link href='regular.packed.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
10
|
+
<link href='regular.padded.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
11
|
+
<link href='regular.margin.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
12
|
+
<link href='regular.fixed.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
13
|
+
<link href='regular.sassy.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
14
|
+
<link href='irregular.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
15
|
+
<link href='irregular.horizontal.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
16
|
+
<link href='irregular.vertical.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
17
|
+
<link href='irregular.packed.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
18
|
+
<link href='irregular.padded.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
19
|
+
<link href='irregular.margin.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
20
|
+
<link href='irregular.fixed.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
21
|
+
<link href='irregular.sassy.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
22
|
+
<link href='custom.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
23
|
+
<link href='formats.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
24
|
+
<link href='subfolders.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
25
|
+
<link href='hover.css' rel='stylesheet' type='text/css' media='screen'></link>
|
|
26
|
+
<style>
|
|
27
|
+
img { border: 1px solid red; }
|
|
28
|
+
</style>
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
|
|
32
|
+
<h1>Regular (defaults)</h1>
|
|
33
|
+
<img src='s.gif' class='regular1'>
|
|
34
|
+
<img src='s.gif' class='regular2'>
|
|
35
|
+
<img src='s.gif' class='regular3'>
|
|
36
|
+
<img src='s.gif' class='regular4'>
|
|
37
|
+
<img src='s.gif' class='regular5'>
|
|
38
|
+
|
|
39
|
+
<h1>Regular (horizontal)</h1>
|
|
40
|
+
<img src='s.gif' class='horizontal_regular1'>
|
|
41
|
+
<img src='s.gif' class='horizontal_regular2'>
|
|
42
|
+
<img src='s.gif' class='horizontal_regular3'>
|
|
43
|
+
<img src='s.gif' class='horizontal_regular4'>
|
|
44
|
+
<img src='s.gif' class='horizontal_regular5'>
|
|
45
|
+
|
|
46
|
+
<h1>Regular (vertical)</h1>
|
|
47
|
+
<img src='s.gif' class='vertical_regular1'><br>
|
|
48
|
+
<img src='s.gif' class='vertical_regular2'><br>
|
|
49
|
+
<img src='s.gif' class='vertical_regular3'><br>
|
|
50
|
+
<img src='s.gif' class='vertical_regular4'><br>
|
|
51
|
+
<img src='s.gif' class='vertical_regular5'><br>
|
|
52
|
+
|
|
53
|
+
<h1>Regular (packed with padding and margin)</h1>
|
|
54
|
+
<img src='s.gif' class='packed_regular1'>
|
|
55
|
+
<img src='s.gif' class='packed_regular2'>
|
|
56
|
+
<img src='s.gif' class='packed_regular3'>
|
|
57
|
+
<img src='s.gif' class='packed_regular4'>
|
|
58
|
+
<img src='s.gif' class='packed_regular5'>
|
|
59
|
+
|
|
60
|
+
<h1>Regular (padded)</h1>
|
|
61
|
+
<img src='s.gif' class='padded_regular1'>
|
|
62
|
+
<img src='s.gif' class='padded_regular2'>
|
|
63
|
+
<img src='s.gif' class='padded_regular3'>
|
|
64
|
+
<img src='s.gif' class='padded_regular4'>
|
|
65
|
+
<img src='s.gif' class='padded_regular5'>
|
|
66
|
+
|
|
67
|
+
<h1>Regular (margin)</h1>
|
|
68
|
+
<img src='s.gif' class='margin_regular1'>
|
|
69
|
+
<img src='s.gif' class='margin_regular2'>
|
|
70
|
+
<img src='s.gif' class='margin_regular3'>
|
|
71
|
+
<img src='s.gif' class='margin_regular4'>
|
|
72
|
+
<img src='s.gif' class='margin_regular5'>
|
|
73
|
+
|
|
74
|
+
<h1>Regular (fixed)</h1>
|
|
75
|
+
<img src='s.gif' class='fixed_regular1'>
|
|
76
|
+
<img src='s.gif' class='fixed_regular2'>
|
|
77
|
+
<img src='s.gif' class='fixed_regular3'>
|
|
78
|
+
<img src='s.gif' class='fixed_regular4'>
|
|
79
|
+
<img src='s.gif' class='fixed_regular5'>
|
|
80
|
+
|
|
81
|
+
<h1>Regular (sassy)</h1>
|
|
82
|
+
<img src='s.gif' class='sassy_regular1'>
|
|
83
|
+
<img src='s.gif' class='sassy_regular2'>
|
|
84
|
+
<img src='s.gif' class='sassy_regular3'>
|
|
85
|
+
<img src='s.gif' class='sassy_regular4'>
|
|
86
|
+
<img src='s.gif' class='sassy_regular5'>
|
|
87
|
+
|
|
88
|
+
<h1>Irregular (defaults)</h1>
|
|
89
|
+
<img src='s.gif' class='irregular1'>
|
|
90
|
+
<img src='s.gif' class='irregular2'>
|
|
91
|
+
<img src='s.gif' class='irregular3'>
|
|
92
|
+
<img src='s.gif' class='irregular4'>
|
|
93
|
+
<img src='s.gif' class='irregular5'>
|
|
94
|
+
|
|
95
|
+
<h1>Irregular (horizontal)</h1>
|
|
96
|
+
<img src='s.gif' class='horizontal_irregular1'>
|
|
97
|
+
<img src='s.gif' class='horizontal_irregular2'>
|
|
98
|
+
<img src='s.gif' class='horizontal_irregular3'>
|
|
99
|
+
<img src='s.gif' class='horizontal_irregular4'>
|
|
100
|
+
<img src='s.gif' class='horizontal_irregular5'>
|
|
101
|
+
|
|
102
|
+
<h1>Irregular (vertical)</h1>
|
|
103
|
+
<img src='s.gif' class='vertical_irregular1'><br>
|
|
104
|
+
<img src='s.gif' class='vertical_irregular2'><br>
|
|
105
|
+
<img src='s.gif' class='vertical_irregular3'><br>
|
|
106
|
+
<img src='s.gif' class='vertical_irregular4'><br>
|
|
107
|
+
<img src='s.gif' class='vertical_irregular5'><br>
|
|
108
|
+
|
|
109
|
+
<h1>Irregular (packed with padding and margin)</h1>
|
|
110
|
+
<img src='s.gif' class='packed_irregular1'>
|
|
111
|
+
<img src='s.gif' class='packed_irregular2'>
|
|
112
|
+
<img src='s.gif' class='packed_irregular3'>
|
|
113
|
+
<img src='s.gif' class='packed_irregular4'>
|
|
114
|
+
<img src='s.gif' class='packed_irregular5'>
|
|
115
|
+
|
|
116
|
+
<h1>Irregular (padded)</h1>
|
|
117
|
+
<img src='s.gif' class='padded_irregular1'>
|
|
118
|
+
<img src='s.gif' class='padded_irregular2'>
|
|
119
|
+
<img src='s.gif' class='padded_irregular3'>
|
|
120
|
+
<img src='s.gif' class='padded_irregular4'>
|
|
121
|
+
<img src='s.gif' class='padded_irregular5'>
|
|
122
|
+
|
|
123
|
+
<h1>Irregular (margin)</h1>
|
|
124
|
+
<img src='s.gif' class='margin_irregular1'>
|
|
125
|
+
<img src='s.gif' class='margin_irregular2'>
|
|
126
|
+
<img src='s.gif' class='margin_irregular3'>
|
|
127
|
+
<img src='s.gif' class='margin_irregular4'>
|
|
128
|
+
<img src='s.gif' class='margin_irregular5'>
|
|
129
|
+
|
|
130
|
+
<h1>Irregular (fixed)</h1>
|
|
131
|
+
<img src='s.gif' class='fixed_irregular1'>
|
|
132
|
+
<img src='s.gif' class='fixed_irregular2'>
|
|
133
|
+
<img src='s.gif' class='fixed_irregular3'>
|
|
134
|
+
<img src='s.gif' class='fixed_irregular4'>
|
|
135
|
+
<img src='s.gif' class='fixed_irregular5'>
|
|
136
|
+
|
|
137
|
+
<h1>Irregular (sassy)</h1>
|
|
138
|
+
<img src='s.gif' class='sassy_irregular1'>
|
|
139
|
+
<img src='s.gif' class='sassy_irregular2'>
|
|
140
|
+
<img src='s.gif' class='sassy_irregular3'>
|
|
141
|
+
<img src='s.gif' class='sassy_irregular4'>
|
|
142
|
+
<img src='s.gif' class='sassy_irregular5'>
|
|
143
|
+
|
|
144
|
+
<h1>Custom</h1>
|
|
145
|
+
<div class='running' id='timer'>
|
|
146
|
+
<img src='s.gif' class='button' onclick="SpriteFactory.toggleTimer();">
|
|
147
|
+
<span class='running'>running</span>
|
|
148
|
+
<span class='stopped'>stopped</span>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<h1>Other Formats</h1>
|
|
152
|
+
<img src='s.gif' class='alice'>
|
|
153
|
+
<img src='s.gif' class='monkey'>
|
|
154
|
+
<img src='s.gif' class='spies'>
|
|
155
|
+
<img src='s.gif' class='thief'>
|
|
156
|
+
|
|
157
|
+
<h1>From Sub Folders</h1>
|
|
158
|
+
<img src='s.gif' class='england_amy'>
|
|
159
|
+
<img src='s.gif' class='england_bob'>
|
|
160
|
+
<img src='s.gif' class='france_bob'>
|
|
161
|
+
<img src='s.gif' class='usa_amy'>
|
|
162
|
+
<img src='s.gif' class='usa_bob'>
|
|
163
|
+
|
|
164
|
+
<h1>With Hover State</h1>
|
|
165
|
+
<div class='hover'>
|
|
166
|
+
<div class='foo'><img src='s.gif' class='icon'></div>
|
|
167
|
+
<div class='bar'><img src='s.gif' class='icon'></div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<script>
|
|
171
|
+
SpriteFactory = {
|
|
172
|
+
toggleTimer: function() {
|
|
173
|
+
var timer = document.getElementById('timer');
|
|
174
|
+
if (timer) {
|
|
175
|
+
timer.setAttribute('class', timer.getAttribute('class') == 'running' ? 'stopped' : 'running');
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
</script>
|
|
180
|
+
|
|
181
|
+
</body>
|
|
182
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular2.png (16x16)
|
|
7
|
+
test/images/irregular/irregular3.png (48x48)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular5.png (46x25)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.png
|
|
13
|
+
test/images/irregular.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
204x60
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.irregular1 { width: 60px; height: 60px; background: url(irregular.png) 0px 0px no-repeat; }
|
|
21
|
+
img.irregular2 { width: 16px; height: 16px; background: url(irregular.png) -60px -22px no-repeat; }
|
|
22
|
+
img.irregular3 { width: 48px; height: 48px; background: url(irregular.png) -76px -6px no-repeat; }
|
|
23
|
+
img.irregular4 { width: 34px; height: 14px; background: url(irregular.png) -124px -23px no-repeat; }
|
|
24
|
+
img.irregular5 { width: 46px; height: 25px; background: url(irregular.png) -158px -17px no-repeat; }
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular2.png (16x16)
|
|
7
|
+
test/images/irregular/irregular3.png (48x48)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular5.png (46x25)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.fixed.png
|
|
13
|
+
test/images/irregular.fixed.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
500x100
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.fixed_irregular1 { width: 100px; height: 100px; background: url(irregular.fixed.png) 0px 0px no-repeat; }
|
|
21
|
+
img.fixed_irregular2 { width: 100px; height: 100px; background: url(irregular.fixed.png) -100px 0px no-repeat; }
|
|
22
|
+
img.fixed_irregular3 { width: 100px; height: 100px; background: url(irregular.fixed.png) -200px 0px no-repeat; }
|
|
23
|
+
img.fixed_irregular4 { width: 100px; height: 100px; background: url(irregular.fixed.png) -300px 0px no-repeat; }
|
|
24
|
+
img.fixed_irregular5 { width: 100px; height: 100px; background: url(irregular.fixed.png) -400px 0px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular2.png (16x16)
|
|
7
|
+
test/images/irregular/irregular3.png (48x48)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular5.png (46x25)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.horizontal.png
|
|
13
|
+
test/images/irregular.horizontal.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
204x60
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.horizontal_irregular1 { width: 60px; height: 60px; background: url(irregular.horizontal.png) 0px 0px no-repeat; }
|
|
21
|
+
img.horizontal_irregular2 { width: 16px; height: 16px; background: url(irregular.horizontal.png) -60px -22px no-repeat; }
|
|
22
|
+
img.horizontal_irregular3 { width: 48px; height: 48px; background: url(irregular.horizontal.png) -76px -6px no-repeat; }
|
|
23
|
+
img.horizontal_irregular4 { width: 34px; height: 14px; background: url(irregular.horizontal.png) -124px -23px no-repeat; }
|
|
24
|
+
img.horizontal_irregular5 { width: 46px; height: 25px; background: url(irregular.horizontal.png) -158px -17px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular2.png (16x16)
|
|
7
|
+
test/images/irregular/irregular3.png (48x48)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular5.png (46x25)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.margin.png
|
|
13
|
+
test/images/irregular.margin.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
304x80
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.margin_irregular1 { width: 60px; height: 60px; background: url(irregular.margin.png) -10px -10px no-repeat; }
|
|
21
|
+
img.margin_irregular2 { width: 16px; height: 16px; background: url(irregular.margin.png) -90px -32px no-repeat; }
|
|
22
|
+
img.margin_irregular3 { width: 48px; height: 48px; background: url(irregular.margin.png) -126px -16px no-repeat; }
|
|
23
|
+
img.margin_irregular4 { width: 34px; height: 14px; background: url(irregular.margin.png) -194px -33px no-repeat; }
|
|
24
|
+
img.margin_irregular5 { width: 46px; height: 25px; background: url(irregular.margin.png) -248px -27px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular3.png (48x48)
|
|
7
|
+
test/images/irregular/irregular5.png (46x25)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular2.png (16x16)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.packed.png
|
|
13
|
+
test/images/irregular.packed.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
244x165
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.packed_irregular1 { width: 80px; height: 80px; background: url(irregular.packed.png) -10px -10px no-repeat; }
|
|
21
|
+
img.packed_irregular3 { width: 68px; height: 68px; background: url(irregular.packed.png) -110px -10px no-repeat; }
|
|
22
|
+
img.packed_irregular5 { width: 66px; height: 45px; background: url(irregular.packed.png) -10px -110px no-repeat; }
|
|
23
|
+
img.packed_irregular4 { width: 54px; height: 34px; background: url(irregular.packed.png) -96px -110px no-repeat; }
|
|
24
|
+
img.packed_irregular2 { width: 36px; height: 36px; background: url(irregular.packed.png) -198px -10px no-repeat; }
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
Creating a sprite from following images:
|
|
4
|
+
|
|
5
|
+
test/images/irregular/irregular1.png (60x60)
|
|
6
|
+
test/images/irregular/irregular2.png (16x16)
|
|
7
|
+
test/images/irregular/irregular3.png (48x48)
|
|
8
|
+
test/images/irregular/irregular4.png (34x14)
|
|
9
|
+
test/images/irregular/irregular5.png (46x25)
|
|
10
|
+
|
|
11
|
+
Output files:
|
|
12
|
+
test/images/irregular.padded.png
|
|
13
|
+
test/images/irregular.padded.css
|
|
14
|
+
|
|
15
|
+
Output size:
|
|
16
|
+
304x80
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
*/
|
|
20
|
+
img.padded_irregular1 { width: 80px; height: 80px; background: url(irregular.padded.png) 0px 0px no-repeat; }
|
|
21
|
+
img.padded_irregular2 { width: 36px; height: 36px; background: url(irregular.padded.png) -80px -22px no-repeat; }
|
|
22
|
+
img.padded_irregular3 { width: 68px; height: 68px; background: url(irregular.padded.png) -116px -6px no-repeat; }
|
|
23
|
+
img.padded_irregular4 { width: 54px; height: 34px; background: url(irregular.padded.png) -184px -23px no-repeat; }
|
|
24
|
+
img.padded_irregular5 { width: 66px; height: 45px; background: url(irregular.padded.png) -238px -17px no-repeat; }
|
|
Binary file
|
|
Binary file
|