Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Glue
Search
Jorge Bastida
June 05, 2012
Technology
7
750
Glue
Glue is a simple command line tool to generate CSS sprites.
Jorge Bastida
June 05, 2012
Tweet
Share
More Decks by Jorge Bastida
See All by Jorge Bastida
Streetlife Analytics
jorgebastida
1
270
Some non-obvious tips… Scaling Up
jorgebastida
1
270
La historia de todo lo que pudo salir mal... pero salió bien
jorgebastida
8
970
Open Source Modern Web Development
jorgebastida
26
2.6k
Python + Django
jorgebastida
19
2.6k
Things that make me happy
jorgebastida
13
1.3k
Dajaxproject.com
jorgebastida
1
140
Other Decks in Technology
See All in Technology
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
1.6k
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2.1k
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
210
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
Datasets for Critical Operations by Dataform
kimujun
0
150
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
120
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
530
AIエージェントを支える設計
tkikuchi1002
12
2.9k
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.3k
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
2
220
Microsoft Clarityでインサイトを見つけよう
nakasho
0
110
Kiroから考える AIコーディングツールの潮流
s4yuba
3
590
Featured
See All Featured
Done Done
chrislema
185
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Being A Developer After 40
akosma
90
590k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Bash Introduction
62gerente
613
210k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
How GitHub (no longer) Works
holman
314
140k
Making Projects Easy
brettharned
117
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
Transcript
Glue Glue $command-line-sprites $command-line-sprites @jorgebastida @jorgebastida gluecss.com
Sprites?
N 1
A .sprite-A{ ... }
A .sprite-A{ background-image: url(sprite.png); ... }
x:120px y:50px A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; ...
}
A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; width: 10px; height:
20px; ... } 20px 10px
A <div class=”sprite-A”></div>
Should I do this for each image?
Yes!
By hand #1
HARD, UNMAINTAINABLE. TEDIOUS AND
+ custom - manual css ∞time
Online #2
+ easy to use - internet - upgrade
STOP
None
Rebuild sprites should can must be part of the assets-rebuild
* for 99% of your sprites * “ ”
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/ ?
Glue Glue $command-line-sprites $command-line-sprites gluecss.com
Drop source images somewhere $ glue source output Party!
.sprite-icons-rainbow{ background-image:url(sprite.png); background-repeat:no-repeat; background-position: 247px 147px; width: 25px; height: 25px;
} ... fam fam fam
.glyphicons-187-more{ background-image:url(glyphicons.png); background-repeat:no-repeat; background-position: 212px 42px; width: 23px; height: 22px;
} ... glyphish
But... my sprites are complex...
--padding 5px
--padding only for some files? add.png add_10.png add_10-20.png add_10-5-20-4.png
--algorithm square vertical horizontal diagonal vertical right horizontal bottom
--ordering maxside width height area
Pseudo Classes pay.png pay_hover.png Think about this... It’s freaking cool
:)
--crop
--project sprites !"" actions # !"" add.png # $"" remove.png
!"" borders # !"" top_left.png # $"" top_right.png $"" icons !"" comment.png !"" new.png $"" rss.png
--cachebuster sprite_4d3ad.png sprite.png?4d3ad
etc... Watch Configuration files Margins less support OptiPNG integration Custom
CSS output Custom class names PNG8 ... It’s Python!
Thanks! Thanks! gluecss.com gluecss.com @jorgebastida @jorgebastida