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
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
750
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
130
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
210
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
170
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
310
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
190
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
4 Signs Your Business is Dying
shpigford
180
21k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
How GitHub (no longer) Works
holman
310
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Designing for humans not robots
tammielis
250
25k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing the Hi-DPI Web
ddemaree
280
34k
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