search

twolfson / spritesmith

Utility that takes sprites and converts them into a stylesheet and its coordinates
MIT License
916 stars 56 forks source link

Padding broken/ Request for more control over padding layout #57

Closed andig closed 9 years ago

andig commented 9 years ago

If I add padding: 4, the generated css is unchanged, but the sprites obviously moved in the combined image. Is css generation ignoring padding?

twolfson commented 9 years ago

Hm, that's weird. The CSS should have updated background positions when the padding changed. None of the template outputs are aware of padding (e.g. CSS, Sass, LESS) so it shouldn't be specific to CSS -- we perform padding during the "layout" stage.

Do the sprites look fine when rendered in the browser?

andig commented 9 years ago

My apologies. I seem to have screwed my tests. One request though: would it be possible to allow padding to be an array of 2 or 4 elements? If yes, the behaviour should be that that much padding is applied to either side of the sprite.

Usecase: background images for select boxes. As the image height depends on the select item hight I don't want the image to stick to the top of the select items but show vertically centered. This could be done by padding: [2,0] or padding: [2,0,2,0] in css fashion.

twolfson commented 9 years ago

This has been discussed in https://github.com/Ensighten/grunt-spritesmith/issues/134. padding was introduced in #7 to resolve issues while scaling sprites. We don't allow sprite specific padding since we believe that sprites should be look the same both in their spritesheet and normal form (i.e. visually they should look consistent; the source .png should have its padding baked in).

My suggestion for your use case is to update the source images to have that padding included on them. This can be performed via a grunt/gulp task, a CLI tool, or by hand.