Download - Power Spriting With Compass
![Page 1: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/1.jpg)
POWER SPRITINGWITH COMPASS
Pam Selle
@pamasaur
![Page 2: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/2.jpg)
WHO ARE YOU?Developer at Paperless Post, client-side engineeringGirl Develop It instructorGirl Geek Dinners organizerRabid Avid cyclistProblem solver
![Page 3: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/3.jpg)
WHAT HAVE YOU DONE?
![Page 4: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/4.jpg)
![Page 5: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/5.jpg)
SPRITED THE S*** OUT OF THESE
Merging individually would've taken
![Page 6: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/6.jpg)
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
![Page 7: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/7.jpg)
SIMPLE SPRITE
from CSS-Tricks
![Page 8: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/8.jpg)
LESS SIMPLE
from Hulu
![Page 9: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/9.jpg)
![Page 10: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/10.jpg)
HOW TO MAKE A SPRITE
![Page 11: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/11.jpg)
www.spritecow.com
![Page 12: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/12.jpg)
COMPASS DOES IT BETTER!Compass is a framework that enhances Sass
Along with other great stuff, Compass handles sprites
... impressively so.
![Page 13: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/13.jpg)
SPRITING WITH COMPASS1. Cut individual images from design2. Place in folder3. COMPASS MAGIC
![Page 14: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/14.jpg)
MORE SPECIFICALLY
@import "images/*.png";
![Page 15: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/15.jpg)
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>);
![Page 16: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/16.jpg)
OTHER OBSESSIVENESS
<map>-layout: { horizontal, vertical, diagonal, smart }<map>-spacing<map>-repeat<map>-dimensions<map>-base-class<map>-clean-up
![Page 17: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/17.jpg)
![Page 18: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/18.jpg)
THE ENDBY PAM SELLE / THEWEBIVORE.COM
![Page 19: Power Spriting With Compass](https://reader033.vdocument.in/reader033/viewer/2022060109/5555fa97d8b42ad3548b5421/html5/thumbnails/19.jpg)