Glue

Transcript

1. Glue Glue $command-line-sprites $command-line-sprites @jorgebastida @jorgebastida gluecss.com

2. Sprites?

3. N 1

4. A .sprite-A{ ... }

5. A .sprite-A{ background-image: url(sprite.png); ... }

6. x:120px y:50px A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; ...

   }

7. A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; width: 10px; height:

   20px; ... } 20px 10px

8. A <div class=”sprite-A”></div>

9. Should I do this for each image?

10. Yes!

11. By hand #1

12. HARD, UNMAINTAINABLE. TEDIOUS AND

13. + custom - manual css ∞time

14. Online #2

15. + easy to use - internet - upgrade

16. STOP

17. None

18. Rebuild sprites should can must be part of the assets-rebuild

    * for 99% of your sprites * “ ”

19. Rebuild assets happy path suggest .css .png + Build Sprites

    /img/c/ .min.css .css site styles + .css = Compile styles /css/c/ .min.js site js .js + = Compile js /js/c/ ?

20. Glue Glue $command-line-sprites $command-line-sprites gluecss.com

21. Drop source images somewhere $ glue source output Party!

22. .sprite-icons-rainbow{ background-image:url(sprite.png); background-repeat:no-repeat; background-position: 247px 147px; width: 25px; height: 25px;

    } ... fam fam fam

23. .glyphicons-187-more{ background-image:url(glyphicons.png); background-repeat:no-repeat; background-position: 212px 42px; width: 23px; height: 22px;

    } ... glyphish

24. But... my sprites are complex...

25. --padding 5px

26. --padding only for some files? add.png add_10.png add_10-20.png add_10-5-20-4.png

27. --algorithm square vertical horizontal diagonal vertical right horizontal bottom

28. --ordering maxside width height area

29. Pseudo Classes pay.png pay_hover.png Think about this... It’s freaking cool

    :)

30. --crop

31. --project sprites !"" actions # !"" add.png # $"" remove.png

    !"" borders # !"" top_left.png # $"" top_right.png $"" icons !"" comment.png !"" new.png $"" rss.png

32. --cachebuster sprite_4d3ad.png sprite.png?4d3ad

33. etc... Watch Configuration files Margins less support OptiPNG integration Custom

    CSS output Custom class names PNG8 ... It’s Python!

34. Thanks! Thanks! gluecss.com gluecss.com @jorgebastida @jorgebastida