You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+61-22Lines changed: 61 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,8 @@
1
-
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!
2
-
3
1
# sprite #
4
2
5
3
`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).
6
4
7
-
it's a fork and extension on Richard Huang's excellent Rails specific plugin [`css_sprite`](http://github.com/flyerhzm/css_sprite)
if installed as a gem, at your root project folder you can just run
48
44
@@ -52,9 +48,43 @@ if you would rather not install the gem, you can also use it with rake
52
48
53
49
rake sprite:build
54
50
55
-
## Configuration ##
56
51
57
-
add `config/sprite.yml` to set sprite configuration options and define what sprites get generated where
52
+
### Intelligent Defaults ###
53
+
54
+
Without having to configure anything, `sprite` will allow you to easily generate sprites based on a couple default folder settings we give you right off the bat.
55
+
56
+
For example, given you have the following setup:
57
+
58
+
public/
59
+
images/
60
+
sprites/
61
+
black_icons/
62
+
stop.png
63
+
go.png
64
+
back.png
65
+
forward.png
66
+
67
+
weather/
68
+
sunny.gif
69
+
rainy.gif
70
+
cloudy.gif
71
+
72
+
Running `sprite` with no configuration file will generate the following files:
73
+
74
+
public/
75
+
stylesheets/
76
+
sprites.css
77
+
images/
78
+
sprites/
79
+
black_icons.png
80
+
weather.png
81
+
82
+
Any folders within `public/images/sprites/` will get compressed into a merged image file at the same location. Then `sprites.css` got generated in the stylesheets folder with all the class definitions for these files. Just include `sprites.css` into your stylesheet and you're ready to go!
83
+
84
+
85
+
## CONFIGURATION ##
86
+
87
+
Configuration of `sprite` is done via `config/sprite.yml`. It allows you to set sprite configuration options, and fine tune exactly which sprites get generated where.
58
88
59
89
*`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
60
90
-`style:` defines how the style rules are outputted. built in options are `css`, `sass`, and `sass_mixin`. (defaults to `css`)
@@ -73,22 +103,22 @@ add `config/sprite.yml` to set sprite configuration options and define what spri
73
103
74
104
you can define any number of destination image files.
75
105
76
-
## Sample Configuration `config/sprite.yml` ##
106
+
###Sample Configuration `config/sprite.yml`###
77
107
78
108
# defines the base configuration options (file paths, etc, default style, etc)
79
109
80
110
config:
81
111
style: css
82
112
output_path: public/sass/mixins/sprites.sass
83
-
image_output_path: public/images/sprite/
113
+
image_output_path: public/images/sprites/
84
114
source_path: public/images/
85
115
class_separator: '_'
86
116
default_format: png
87
117
88
118
# defines what sprite collections get created
89
119
images:
90
120
91
-
# creates a public/images/sprite/blue_stars.png image with 4 sprites in it
121
+
# creates a public/images/sprites/blue_stars.png image with 4 sprites in it
92
122
- name: blue_stars
93
123
format: png
94
124
align: horizontal
@@ -99,7 +129,7 @@ you can define any number of destination image files.
99
129
- icons/blue_stars/large.png
100
130
- icons/blue_stars/xlarge.png
101
131
102
-
# creates a public/images/sprite/green_stars.jpg image with
132
+
# creates a public/images/sprites/green_stars.jpg image with
103
133
# all the jpg files contained within /images/icons/green_stars/
104
134
- name: green_stars
105
135
format: jpg
@@ -108,26 +138,26 @@ you can define any number of destination image files.
108
138
sources:
109
139
- icons/green_stars/*.jpg
110
140
111
-
## Style Settings ##
141
+
###Style Settings###
112
142
113
-
By default, it will use with `style: css` and generate the file at `public/stylesheets/sprite.css`
143
+
By default, it will use with `style: css` and generate the file at `public/stylesheets/sprites.css`
0 commit comments