README.md in sprite-generator-0.1.7 vs README.md in sprite-generator-0.1.8
- old
+ new
@@ -70,10 +70,12 @@
- `public_path:` defines the root folder where static assets live (defaults to `public/`)
- `sprites_class:` defines the class name that gets added to all sprite stylesheet rules (defaults to `sprites`)
- `default_format:` defines the default file image format of the generated files. (defaults to `png`)
- `default_spacing:` defines the default pixel spacing between sprites (defaults to 0)
- `class_separator:` used to generated the class name by separating the image name and sprite name (defaults to `-`)
+ - `pseudo_classes`: array of strings. Example: if some image name will end with `_hover` and `pseudo_classes` will equal `['hover']`, then the style for that picture will end with `:hover` instead of `_hover`. (defaults to ['hover'])
+ - `parameters`: hash of parameters that will be substituted in other options. In order to be used parameter must be declared in parameters hash and have a default value. Parameter can be overriden in command line: `sprite -p param_name=new_param_value`. (defaults to `{}`)
* `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:
- `name:` name of image (required)
- `sources:` defines a list of source image filenames to build the target image from (required). They are parsed by <code>Dir.glob</code>
- `align:` defines the composite gravity type, horizontal or vertical. (defaults to `vertical`)
@@ -86,18 +88,20 @@
# defines the base configuration options (file paths, etc, default style, etc)
config:
style: css
- style_output_path: stylesheets/sprites
- image_output_path: images/sprites/
- image_source_path: images/
+ style_output_path: ${theme}/stylesheets/sprites
+ image_output_path: ${theme}/images/sprites/
+ image_source_path: ${theme}/images/
public_path: public/
sprites_class: 'sprites'
class_separator: '-'
default_format: png
default_spacing: 50
+ parameters:
+ theme: mytheme
# defines what sprite collections get created
images:
# creates a public/images/sprites/blue_stars.png image with 4 sprites in it
@@ -108,10 +112,11 @@
sources:
- icons/blue-stars/small.png
- icons/blue-stars/medium.png
- icons/blue-stars/large.png
- icons/blue-stars/xlarge.png
+ - icons/blue-stars/large_hover.png
# creates a public/images/sprites/green-stars.jpg image with
# all the gif files contained within /images/icons/green-stars/
- name: green_stars
format: png
@@ -123,25 +128,30 @@
### Style Settings ###
By default, it will use with `style: css` and generate the file at `public/stylesheets/sprites.css`
.sprites.blue-stars-small {
- background: url('/images/icons/blue-stars/small.png') no-repeat 0px 0px;
+ background: url('/mytheme/images/icons/blue-stars/small.png') no-repeat 0px 0px;
width: 12px;
height: 6px;
}
.sprites.blue-stars-medium {
- background: url('/images/icons/blue-stars/medium.png') no-repeat 0px 6px;
+ background: url('/mytheme/images/icons/blue-stars/medium.png') no-repeat 0px 6px;
width: 30px;
height: 15px;
}
.sprites.blue-stars-large {
- background: url('/images/icons/blue-stars/large.png') no-repeat 0px 21px;
+ background: url('/mytheme/images/icons/blue-stars/large.png') no-repeat 0px 21px;
width: 60px;
height: 30px;
}
+ .sprites.blue-stars-large:hover {
+ background: url('/mytheme/images/icons/blue-stars/large_hover.png') no-repeat 0px 21px;
+ width: 60px;
+ height: 30px;
+ }
.sprites.blue-stars-xlarge {
- background: url('/images/icons/blue-stars/xlarge.png') no-repeat 0px 96px;
+ background: url('/mytheme/images/icons/blue-stars/xlarge.png') no-repeat 0px 96px;
width: 100px;
height: 75px;
}
We also support mixin syntax via `style: sass_mixin`. If set, it will generate a SASS mixin which you can use in order to mix in these sprites anywhere within your SASS stylesheets. For this option, set `style_output_path:` to `stylesheets/sass/_sprites` in order to generate the sass mixin file at `stylesheets/sass/_sprites.sass`