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`