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
150
Other Decks in Technology
See All in Technology
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
340
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
170
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
120
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
170
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2.1k
知覚とデザイン
rinchoku
1
490
Observability — Extending Into Incident Response
nari_ex
1
120
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
150
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
事業開発におけるDify活用事例
kentarofujii
5
1.4k
Introdução a Service Mesh usando o Istio
aeciopires
1
280
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How GitHub (no longer) Works
holman
315
140k
Visualization
eitanlees
149
16k
Done Done
chrislema
185
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Unsuck your backbone
ammeep
671
58k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Become a Pro
speakerdeck
PRO
29
5.6k
Designing for Performance
lara
610
69k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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