Glue

Transcript

1. 1.

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

2. 2.

   Sprites?

3. 3.

   N 1

4. 4.

   A .sprite-A{ ... }

5. 5.

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

6. 6.

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

   }
7. 7.

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

   20px; ... } 20px 10px
8. 8.

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

9. 9.

   Should I do this for each image?

10. 10.

    Yes!

11. 11.

    By hand #1

12. 12.

    HARD, UNMAINTAINABLE. TEDIOUS AND

13. 13.

    + custom - manual css ∞time

14. 14.

    Online #2

15. 15.

    + easy to use - internet - upgrade

16. 16.

    STOP

17. 17.

    None
18. 18.

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

    * for 99% of your sprites * “ ”
19. 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. 20.

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

21. 21.

    Drop source images somewhere $ glue source output Party!

22. 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. 23.

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

    } ... glyphish
24. 24.

    But... my sprites are complex...

25. 25.

    --padding 5px

26. 26.

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

27. 27.

    --algorithm square vertical horizontal diagonal vertical right horizontal bottom

28. 28.

    --ordering maxside width height area

29. 29.

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

    :)
30. 30.

    --crop

31. 31.

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

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

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

33. 33.

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

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

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