Responsive Spritemaps? about dr-svg-sprites

[brianfeister]

So I have this feature 95% complete, but having one problem. In the following block:

sprite.elements.forEach(function (element) {
    var className = makeClassName(element.className, sizeLabel);
    spriteSelectors.push(className);
    svgSelectors.push(className);
    css += substitute(cssElementRule, {
        selector: className,
        width: scaleValue(element.width, size, refSize),
        height: scaleValue(element.height, size, refSize),
        x: scaleValue(element.x, size, refSize)
    });

element gives me reference to the x property for horizontal offset within the spritemap. Is there a stored property that contains the generated spritemap's full width? Once I have that, I can post my code for PR.

[brianfeister]

Nevermind, got it: sprite.sizes[size].width

[phloe]

Great idea!

Just one question: are you on an old pre-v0.9.0 fork? (The snippet you posted above looks a lot like it).

What did you come up with regards to options?
Off the top of my head I'm thinking the user needs to be able to define a number of breakpoints with related sizes (min-width and a number) for each item in options.sizes.

If we can rely on breakpoints being the same across sizes of a sprite something like this might be sufficient:

var options = {
    breakpoints: [321, 701], // min-width values for breakpoints. 0 is implied.
    sizes: {
        "small": [16, 24, 32], // would get matched to 0, 321 and 701 respectively.
        "large": [32, 48, 64]
    }
};

[brianfeister]

I'll post my code momentarily, just need to port from a previous version - can you update grunt-dr-svg-sprites dependency once the code is in for me?

My config accepts an object like this:

        shapes : {
          options: {
            spriteElementPath: 'styleguide/img/svg',
            spritePath: 'styleguide/img',
            cssPath: 'styleguide/css',
            sizes: {
              main: 75,
            },
            breakpoints: {
              small: {
                query: '@media screen and ( min-width: 25em )',
                scale: 0.4
              },
              medium: {
                query: '@media screen and ( min-width: 48em )',
                scale: 0.8
              },
              full: {
                query: '@media screen and ( min-width: 61.25em )',
                scale: 1.5
              },
            },
            refSize: 26,
            unit: 13
          }
        },

[brianfeister]

Here's a gist of my code (I'm working to convert it to v.0.9.0 format with handlebars templates you are using):

https://gist.github.com/brianfeister/6ddc8f2be5f3385c5882

[brianfeister]

Ugh, these handlebars templates are already pretty logic-dense, which I'm a bit suspicious of and then adding the option I'm proposing means more logic in handlebars. The pre-handlebars version of the plugin was definitely better. I'll pick this up again later, right now. Can you let me know when the grunt-dr-svg-sprites plugin is in sync with this module and I'll try again.

[brianfeister]

FYI my gist above is working with no known issues in the pre v.0.9.0 environment of grunt-dr-svg-sprites

[phloe]

Hmmm, it should be in sync already; grunt-dr-svg-sprites v0.9.1 depends on dr-svg-sprites v0.9.1.

[brianfeister]

Cool, got it. Yeah I was on an older version. Ugh. Wish I had updated before I started working on it!

[phloe]

Yeah - I'm sorry. v0.9.0 was a major rewrite. Smooth merges would be a miracle.

As I'm reading your options suggestion small, medium and full basically don't do anything?
Introducing scale when there's already something called sizes is bit problematic I think. I see why you did it - but can we be sure all users will want their sprites to scale identically across their defined options.sizes at all times?
query gives the user full control of their media-queries (my suggestion above didn't) - so that's probably better. Unless there are lazy users out there who just want to put in some min-widths and be done with it :D

[brianfeister]

Yup small / full etc. have no meaning, just keys. I agree about sizes and scale, but my use case wouldn't be accomplished with your simplified example. I have a spritemap that has both multiple sizes and also non-matching media-queries. Do you think my example is too complex? I think it's fairly straightforward and I know I would be pissed if I couldn't manipulate the media query manually. :D

[brianfeister]

I'm trying to figure out if this is even possible with the new v.0.9.0+ format. Do I have access to the meta related to the png Spritemap's final width inside Sprite.js? I need that and I'm having trouble finding it.

[phloe]

Sprite.width and Sprite.height should become available when Sprite.prepare has executed (the layout module calculates them).

[brianfeister]

awesome, thanks!

[phloe]

Finally got this merged into master.