Skip to content

Commit 0f92b54

Browse files
committed
Updating README to include future vision of the plugin
1 parent 24e9a3e commit 0f92b54

File tree

1 file changed

+61
-22
lines changed

1 file changed

+61
-22
lines changed

README.md

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff 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-
31
# sprite #
42

53
`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).
64

7-
it's a fork and extension on Richard Huang's excellent Rails specific plugin [`css_sprite`](http://github.com/flyerhzm/css_sprite)
8-
9-
## Install ##
5+
## INSTALL ##
106

117
### Install the `rmagick` gem ###
128

@@ -42,7 +38,7 @@ or install as a plugin
4238

4339
script/plugin install git://github.com/merbjedi/sprite.git
4440

45-
## Usage ##
41+
## USAGE ##
4642

4743
if installed as a gem, at your root project folder you can just run
4844

@@ -52,9 +48,43 @@ if you would rather not install the gem, you can also use it with rake
5248

5349
rake sprite:build
5450

55-
## Configuration ##
5651

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.
5888

5989
* `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
6090
- `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
73103

74104
you can define any number of destination image files.
75105

76-
## Sample Configuration `config/sprite.yml` ##
106+
### Sample Configuration `config/sprite.yml` ###
77107

78108
# defines the base configuration options (file paths, etc, default style, etc)
79109

80110
config:
81111
style: css
82112
output_path: public/sass/mixins/sprites.sass
83-
image_output_path: public/images/sprite/
113+
image_output_path: public/images/sprites/
84114
source_path: public/images/
85115
class_separator: '_'
86116
default_format: png
87117

88118
# defines what sprite collections get created
89119
images:
90120

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
92122
- name: blue_stars
93123
format: png
94124
align: horizontal
@@ -99,7 +129,7 @@ you can define any number of destination image files.
99129
- icons/blue_stars/large.png
100130
- icons/blue_stars/xlarge.png
101131
102-
# creates a public/images/sprite/green_stars.jpg image with
132+
# creates a public/images/sprites/green_stars.jpg image with
103133
# all the jpg files contained within /images/icons/green_stars/
104134
- name: green_stars
105135
format: jpg
@@ -108,26 +138,26 @@ you can define any number of destination image files.
108138
sources:
109139
- icons/green_stars/*.jpg
110140

111-
## Style Settings ##
141+
### Style Settings ###
112142

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`
114144

115-
.sprite.blue_stars_small {
145+
.sprites.blue_stars_small {
116146
background: url(http://github.com/'/images/icons/blue_stars/small.png') no-repeat 0px 0px;
117147
width: 12px;
118148
height: 6px;
119149
}
120-
.sprite.blue_stars_medium {
150+
.sprites.blue_stars_medium {
121151
background: url(http://github.com/'/images/icons/blue_stars/medium.png') no-repeat 0px 6px;
122152
width: 30px;
123153
height: 15px;
124154
}
125-
.sprite.blue_stars_large {
155+
.sprites.blue_stars_large {
126156
background: url(http://github.com/'/images/icons/blue_stars/large.png') no-repeat 0px 21px;
127157
width: 60px;
128158
height: 30px;
129159
}
130-
.sprite.blue_stars_xlarge {
160+
.sprites.blue_stars_xlarge {
131161
background: url(http://github.com/'/images/icons/blue_stars/xlarge.png') no-repeat 0px 96px;
132162
width: 100px;
133163
height: 75px;
@@ -142,10 +172,19 @@ We also support mixin syntax via `style: sass_mixin`. If set, sprite will only g
142172
.mysmallbluestar
143173
+sprite("blue_stars", "small")
144174

145-
## Contributors ##
175+
## ABOUT `sprite` ##
176+
177+
`sprite` was originally based off of Richard Huang's excellent Rails specific [`css_sprite`](http://github.com/flyerhzm/css_sprite) plugin
178+
179+
Since then it's been rebuilt (with some reuse of the image generation code) to be a general purpose ruby executable, with hooks for merb/rails/sinatra
180+
181+
182+
## LICENSE ##
183+
184+
Released under the MIT License
146185

147-
merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra
186+
## COPYRIGHT ##
148187

149-
josedelcorral - fix the style of generated css
188+
Copyright (c) 2009 [Jacques Crocker ([email protected])]
150189

151-
Copyright (c) 2009 [Richard Huang ([email protected])], released under the MIT license
190+
Original Codebase Copyright (c) 2009 [Richard Huang ([email protected])]

0 commit comments

Comments
 (0)