Power Spriting With Compass

809 views

Published on

Presentation given to the Philly Sass user group on spriting with the Compass framework

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
809
On SlideShare
0
From Embeds
0
Number of Embeds
306
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Power Spriting With Compass

  1. 1. POWER SPRITING WITH COMPASS Pam Selle @pamasaur
  2. 2. WHO ARE YOU?Developer at Paperless Post,client-side engineeringGirl Develop It instructorGirl Geek Dinners organizerRabid Avid cyclistProblem solver
  3. 3. WHAT HAVE YOU DONE?
  4. 4. SPRITED THE S*** OUT OF THESE Merging individually wouldve taken
  5. 5. WHAT IS SPRITING? Instead of individual background images, put them all in one image Simple way to reduce load on your pageWhen someone already has an image, they dont have to get it again, since the images are combined into one
  6. 6. SIMPLE SPRITE from CSS-Tricks
  7. 7. LESS SIMPLE from Hulu
  8. 8. HOW TO MAKE A SPRITE
  9. 9. www.spritecow.com
  10. 10. COMPASS DOES IT BETTER! Compass is a framework that enhances SassAlong with other great stuff, Compass handles sprites ... impressively so.
  11. 11. SPRITING WITH COMPASS1. Cut individual images from design2. Place in folder3. COMPASS MAGIC
  12. 12. MORE SPECIFICALLY@mot"mgs*pg; ipr iae/.n"
  13. 13. COMPASS TOOLS@nld al<a>srts icue l-mp-pie;@nld <a>srt(srt-ae) icue mp-pie<pienm>;@nld <a>srt-iesos<pienm>; icue mp-piedmnin(srt-ae)@nld <a>srt(srt-ae,tu) icue mp-pie<pienm> re;@nld <a>srt-oiin<pienm>; icue mp-piepsto(srt-ae)
  14. 14. OTHER OBSESSIVENESS<a>lyu:{hrzna,vria,daoa,sat} mp-aot oiotl etcl ignl mr<a>saig mp-pcn<a>rpa mp-eet<a>dmnin mp-iesos<a>bs-ls mp-aecas<a>cenu mp-la-p
  15. 15. THE ENDBY PAM SELLE / THEWEBIVORE.COM

×