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
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
990
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
310
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
420
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
330
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
510
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Unsuck your backbone
ammeep
671
58k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Side Projects
sachag
455
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
For a Future-Friendly Web
brad_frost
180
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Thoughts on Productivity
jonyablonski
70
4.9k
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