Making sprites responsive?

[karland]

In order to make sprites responsive, the following prerequisites would be required:

1. All individual icons need to be of equal size, e.g. 200px x 200px.
2. The sprites need to be ordered algorithm: 'top-down'
3. The background position needs to be relative, i.e. in per cent instead of in absolute px-values.

.icon-mysprite-01 {
    background-image: url(/img/mysprites.png);
    background-position: 0% 0%;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-size: 100%;
}

I searched the doc and the internet, but I did not find or overlooked a solution. Is there a way to generate a percentage output for background-position out of spritesmith, or even better gulp-spritesmith? Thanks.

[twolfson]

Yep, percentages can be derived from the px values output by spritesmith. This can be done at the template level or by overriding mixins. Here's are some issues with existing solutions for that:

Template level: https://github.com/twolfson/gulp.spritesmith/issues/32#issuecomment-247047982

Definining new mixin (can override sprite for automatic integration): https://github.com/Ensighten/grunt-spritesmith/issues/84#issuecomment-54287786

Sorry for all the issues being distributed across multiple code bases which makes discovery harder. I've contemplating moving to a monorepo to resolve this but it would wind up removing the knowledge base entirely =(