Motivational Quote of the Day

J.J. Cale:

J.J. Cale:

“Travelling light
is the only way
to fly”

List of Contents

1. Spritemaps?
2. Spritemaps vs Responsive
3. Font Sizing Approach
4. Container Sizing Approach
5. Closing Thoughts

Florian Stolzenhain — 2015/10/13

1) Spritemaps?

1) Spritemaps.

1) Some Pros and Cons, Part I

• asset loading (fast)
• design workflow (integrates)
• interchangeability (simple)
• print output (none)
• accessibility solutions

2) Spritemaps vs Responsive

Step 1 – No CSS Sprites (Demo)

• compares to print output

Step 2 – Add CSS Sprites (Demo)

• Here, I build this nice demo where you can interchange all icons.

Step 3 – Reponsive Content (Demo)

darn!

Step 4 – Responsive Sprites (Demo)

How it could be done

How it could be done

How it could be done

• With patience: responsivelogos.co.uk

How it could be done

• With patience: responsivelogos.co.uk
• Better: via background-size

3) Font sizing approach

3) Font sizing approach (Demo)

• Switch from px to em for more flexibility
• Blends nicely with icon font behaviour

3) Font sizing approach

.sprite:before {

    /* 150x150 */
    width: 150px;
    height: 150px;

    /* x:120 y:850 */
    background-position: -120px -850px;
}

3) Font sizing approach – concept

.sprite:before {

    /* 150x150 */
    width: 10em;
    height: 10em;

    /* x:120 y:850 */
    background-position: -8em -56.7em;

    /* 1280x2048 */
    background-size: 85.3em 136.53em;

    font size: 15px;
}

3) Font sizing approach – reality

.sprite:before {

    /* 150x150 */
    width: 8.3333333333em;
    height: 8.3333333333em;

    /* x:120 y:850 */
    background-position: -6.6666666667em -3.15em;

    /* 1280x2048 */
    background-size: 71.111111111em 113.77777778em;

    font size: 18px;
}

3) Font sizing approach
— bearable reality

$fontSize: 18;

.sprite:before {

    /* 150x150 */
    width: rem(150);
    height: rem(150);

    /* x:120 y:850 */
    background-position: rem(-120 -850);

    /* 1280x2048 */
    background-size: rem(1280 2048);

}

3) Summing up (Demo again?).

• By changing the font size, you can scale the icon pretty easily – compare to transform which doesn't change the layout flow.
• background-size is not supported by IE8, but so are media queries, right?
• Did I mention interchangeability?

4) Container Sizing Approach

4) Container Sizing Approach

• Demo
• Try scaling this, icon fonts!

4) So we just …

4) So we just … wait.

4) So we just … wait.

$container: 960;

.sprite:before {

    /* 150x150 */
    width: (150/$container)*100%;
    height: 0;
    padding-top: (150/$container)*100%;

    /* x:120 y:850 */
    background-position: rel(150/$container*100% 150/$container*100%);

    /* 1280x2048 */
    background-size: rel(1280 2048);

}

Alignment with pixels

Alignment with percentages?

Alignment with percentages? Nope.

Alignment with percentages

4) We need more math.

• That behaviour is cool for parallax effects – but we want matrix-style positioning.
• Alas – more math.

4) We need more math.

.sprite {
    /* spritemap size ÷ sprite size × 100% */
    background-size: …

    /*(sprite offset) ÷ (spritemap size - sprite size) × 100% */
    background-position: …
}

4) We need more math.

.sprite {
    /* spritemap size ÷ sprite size × 100% */
    background-size: …

    /*(sprite offset) ÷ (spritemap size - sprite size) × 100% */
    background-position: …
}

… repeat after me:

(sprite offset) ÷

(sprite offset) ÷ (spritemap size …

(sprite offset) ÷ (spritemap size
–sprite size)

(sprite offset) ÷ (spritemap size
–sprite size)
× 100%

4) Putting it together:

.sprite-rider:before {
    position: relative;

    /* 150x150 to 940 */
    width: 6.2666666667%;
    height: 0;
    padding-top: 6.2666666667%;

    /* 1280x2048 for 150x150 */
    background-size: 853.33333333% 1365.3333333%;

    /* x:120 y:850 */
    background-position:  0.1061946903% 0.4478398314%;
}

4) Putting it together – bearable™:

.sprite-rider:before {
    position: relative;

    /* 150x150 */
    width: rel(150,940);
    height: 0;
    padding-top: rel(150,940);

    /* 1280x2048 */
    background-size: (1280/150)*100% (2048/150)*100%;

    /* x:120 y:850 */
    background-position: (120/(1280-150))*100% (850/(2048-150))*100%;
}

4) Demo?

5) Closing Thoughts

5) Closing Thoughts

• Pros
  • Code still understandable
  • Designer-Friendly: No file preparation needed
  • No Shims needed
  • No JS needed
  • Easy Asset compression (.SVGZ, ImageAlpha)
  • Easy non-responsive fallbacks

5) Closing Thoughts

• Cons
  • Rounding Margins?
  • Reproducing sprites in different sizes – more math.

5) Closing Thoughts – But!

• Cons
  • Rounding Margins
    • not if you prepare pixel-bound templates (remember Flash Pixel Fonts?)
  • Reproducing sprites in different sizes
    • you're serving .SVGZ files anyway, just supply different sizes in your file

Look up the write-up on my website,
together with Codepen examples.

Thank you! – any questions?