CODEWITHSUNDEEP
csssvgpnggruntjssprite
Matthew Pennell
Matthew Pennell

Reputation: 11

Can't find a way to automate/grunt CSS sprite creation that supports hover effects with PNG source files

I'm trying to create a sprite for regular use by a large team. I want to automate the creation of it, so that anyone can just drop new icons into the /source folder and run a task to update the sprite and corresponding CSS file.

I've been using grunt-spritesmith, which works fine, except that it doesn't support automagically adding :hover rules. I also tried grunt-iconizr and grunt-svg-sprite. The latter supports hovers (by naming your files like foo.png, foo~hover.png) but only works with SVG files as input (which I don't have).

I also tried installing Glue but I couldn't get it to install and run properly on my machine.

Can anyone recommend a solution that works with only PNG files as input, and supports pseudo-classes on the output sprite/css?

Upvotes: 1

Views: 550

Answers (2)

cesare
cesare

Reputation: 2118

I have solved this, naming the images that be hover with suffix -on example: arrow-on.png and in gruntfile.js I have created a rule "CssVarMap" that controls if the suffix "-on" exists. If true then adds ":hover" to the css output:

//spritesmith
sprite:{
  all: {
    src: 'srcfolder/*.png',
    dest: 'dest/skin.png',
    destCss: 'css/skin.css',
    cssVarMap: function (sprite) {
      if(sprite.name.substr(-3)=="-on"){
        sprite.name = sprite.name.substr(0, sprite.name.length -3)
        sprite.name = sprite.name + ":hover";
      }
    },    
  }
}

Upvotes: 1

0skar
0skar

Reputation: 1178

This is exactly what Compass Sprites does. It creates a sprite image from a folder of .png images and it supports pseudo-classes by naming your files star.png and star_hover.png

Upvotes: 1

Related Questions