POWER SPRITINGWITH COMPASS

Pam Selle

@pamasaur

WHO ARE YOU?Developer at Paperless Post, client-side engineeringGirl Develop It instructorGirl Geek Dinners organizerRabid Avid cyclistProblem solver

WHAT HAVE YOU DONE?

SPRITED THE S*** OUT OF THESE

Merging individually would've taken

WHAT IS SPRITING?Instead of individual background images,

put them all in one image

Simple way to reduce load on your page

When someone already has an image, they don't have to get it again,since the images are combined into one

SIMPLE SPRITE

from CSS-Tricks

LESS SIMPLE

from Hulu

HOW TO MAKE A SPRITE

www.spritecow.com

COMPASS DOES IT BETTER!Compass is a framework that enhances Sass

Along with other great stuff, Compass handles sprites

... impressively so.

SPRITING WITH COMPASS1. Cut individual images from design2. Place in folder3. COMPASS MAGIC

MORE SPECIFICALLY

@import "images/*.png";

COMPASS TOOLS

@include all-<map>-sprites;@include <map>-sprite(<sprite-name>);@include <map>-sprite-dimensions(<sprite-name>);@include <map>-sprite(<sprite-name>, true);@include <map>-sprite-position(<sprite-name>);

OTHER OBSESSIVENESS

<map>-layout: { horizontal, vertical, diagonal, smart }<map>-spacing<map>-repeat<map>-dimensions<map>-base-class<map>-clean-up

THE ENDBY PAM SELLE / THEWEBIVORE.COM