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
260
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.6k
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
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
110
ZOZOTOWNのホーム画面をパーソナライズすることの難しさと裏話を語る
f6wbl6
1
470
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
0
1.5k
利きプロセススケジューラ
sat
PRO
4
2.6k
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
2
270
エンジニア候補者向け資料2024.11.07.pdf
macloud
0
4.5k
Lambdaと地方とコミュニティ
miu_crescent
1
140
RAGのためのビジネス文書解析技術
eida
3
650
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
130
10分でわかるfreeeのQA
freee
1
3.4k
mikroBus HAT を用いた簡易ベアメタル開発
tarotene
0
260
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
GitHub's CSS Performance
jonrohan
1030
460k
Thoughts on Productivity
jonyablonski
67
4.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
4 Signs Your Business is Dying
shpigford
180
21k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
YesSQL, Process and Tooling at Scale
rocio
168
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
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