power spriting with compass
DESCRIPTION
Presentation given to the Philly Sass user group on spriting with the Compass frameworkTRANSCRIPT
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