Glue

Glue is a simple command line tool to generate CSS sprites.

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
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