Your SlideShare is downloading. ×
0
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Power Spriting With Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Power Spriting With Compass

581

Published on

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

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
581
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. POWER SPRITING WITH COMPASS Pam Selle @pamasaur
  • 2. WHO ARE YOU?Developer at Paperless Post,client-side engineeringGirl Develop It instructorGirl Geek Dinners organizerRabid Avid cyclistProblem solver
  • 3. WHAT HAVE YOU DONE?
  • 4. SPRITED THE S*** OUT OF THESE Merging individually wouldve taken
  • 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. SIMPLE SPRITE from CSS-Tricks
  • 7. LESS SIMPLE from Hulu
  • 8. HOW TO MAKE A SPRITE
  • 9. www.spritecow.com
  • 10. COMPASS DOES IT BETTER! Compass is a framework that enhances SassAlong with other great stuff, Compass handles sprites ... impressively so.
  • 11. SPRITING WITH COMPASS1. Cut individual images from design2. Place in folder3. COMPASS MAGIC
  • 12. MORE SPECIFICALLY@mot"mgs*pg; ipr iae/.n"
  • 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. 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. THE ENDBY PAM SELLE / THEWEBIVORE.COM

×