Glue

 Glue

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

2e19e78ec961cd9c60642ce7fe9f8c68?s=128

Jorge Bastida

June 05, 2012
Tweet

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