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
740
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
250
Some non-obvious tips… Scaling Up
jorgebastida
1
260
La historia de todo lo que pudo salir mal... pero salió bien
jorgebastida
8
960
Open Source Modern Web Development
jorgebastida
26
2.5k
Python + Django
jorgebastida
19
2.6k
Things that make me happy
jorgebastida
13
1.3k
Dajaxproject.com
jorgebastida
1
130
Other Decks in Technology
See All in Technology
LLVM/ASMを使った有限体の高速実装
herumi
0
120
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
390
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.2k
より快適なエラーログ監視を目指して
leveragestech
4
1.5k
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
470
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
240
Road to Single Activity
yurihondo
2
240
Discovering AI Models
picardparis
4
3.9k
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
8
1.4k
Featured
See All Featured
Being A Developer After 40
akosma
84
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Docker and Python
trallard
39
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Navigating Team Friction
lara
183
13k
Infographics Made Easy
chrislema
239
18k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Embracing the Ebb and Flow
colly
83
4.4k
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