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
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
+
1
3
# sprite #
2
4
3
-
`sprite` is a gem that helps generate css sprite images automagically. It's aim is to support all web frameworks (Merb/Rails/Sinatra)
5
+
`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).
4
6
5
-
it's a fork an extension of Richard Huang's excellent Rails plugin `css_sprite` (github.com/flyerhzm/css_sprite)
7
+
it's a fork and extension on Richard Huang's excellent Rails specific plugin [`css_sprite`](http://github.com/flyerhzm/css_sprite)
6
8
7
-
****
9
+
## Install ##
8
10
9
-
## Install ##
11
+
###Install the `rmagick` gem ###
10
12
11
-
install rmagick gem first:
13
+
sprite currently requires the rmagick gem. to install it, use
12
14
13
15
gem install rmagick
14
16
@@ -19,91 +21,131 @@ if you have any problems with the rmagick gem, install imagemagick via macports
19
21
20
22
or via installer: http://github.com/maddox/magick-installer/tree/master
first line defines the destination image filename.
55
-
`sources` is a list of source image filenames what want to composite. They are parsed by <code>Dir.glob</code>.
56
-
`orient` defines the composite gravity type, horizontal or vertical. Default is 'vertical'.
57
-
`span` defines the span between two images. Default is 0.
45
+
## Usage ##
58
46
59
-
you can define any number of destination image files.
47
+
if installed as a gem, at your root project folder you can just run
48
+
49
+
sprite
60
50
61
-
***
51
+
if you would rather not install the gem, you can also use it with rake
62
52
63
-
## Usage ##
53
+
rake sprite:build
64
54
65
-
if you use it as a gem, add a task `lib/tasks/sprites.rake` first:
55
+
## Configuration ##
66
56
67
-
require 'sprites'
57
+
add `config/sprite.yml` to set sprite configuration options and define what sprites get generated where
58
+
59
+
*`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
+
-`style:` defines how the style rules are outputted. built in options are `css`, `sass`, and `sass_mixin`. (defaults to `css`)
61
+
-`output_path:` defines the file path where your style settings get written. the file extension not needed as it will be determined by the style setting above (defaults to `public/stylesheets/sprite`)
62
+
-`image_output_path:` defines the folder path where the combined sprite images files are written (defaults to `public/images/sprite/`)
63
+
-`source_path:` defines the folder where source image files are read from (defaults to `public/images/`)
64
+
-`default_format:` defines the default file image format of the generated files. (defaults to `png`)
65
+
-`class_separator:` used within the generated class names between the image name and sprite name (defaults to `_`)
66
+
67
+
*`images:` section provides an array of configurations which define which image files are built, and where they get their sprites from. each image setup provides the following config options:
68
+
-`name:` name of image (required)
69
+
-`sources:` defines a list of source image filenames to build the target image from (required). They are parsed by <code>Dir.glob</code>
70
+
-`align:` defines the composite gravity type, horizontal or vertical. (defaults to `vertical`)
71
+
-`spaced_by:` spacing (in pixels) between the combined images. (defaults to `0`)
72
+
-`format:` define what image file format gets created (optional, uses `default_format` setting if not set)
68
73
69
-
if you use it as a plugin, ignore the step above.
74
+
you can define any number of destination image files.
70
75
71
-
then just run rake task:
72
-
73
-
rake sprites:build
76
+
## Sample Configuration `config/sprite.yml` ##
74
77
75
-
the result css is generated at `public/stylesheets/sprite.css`
78
+
# defines the base configuration options (file paths, etc, default style, etc)
We also support mixin syntax via `style: sass_mixin`. If set, sprite will only generate a yml with your specific sprite configurations. It then provides a SASS mixin which you can use in order to mix in these sprites anywhere within your SASS stylesheets.
98
137
99
-
***
138
+
// you can then use your sprite like this
139
+
.largebluestar
140
+
+sprite("blue_stars", "large")
100
141
101
-
## Contributors ##
142
+
.mysmallbluestar
143
+
+sprite("blue_stars", "small")
102
144
103
-
merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra/
104
-
josedelcorral - fix the style of generated css
145
+
## Contributors ##
105
146
106
-
***
147
+
merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra
107
148
149
+
josedelcorral - fix the style of generated css
108
150
109
151
Copyright (c) 2009 [Richard Huang ([email protected])], released under the MIT license
0 commit comments