Glue - Speaker Deck

Slide 1

Slide 1 text

Glue Glue $command-line-sprites $command-line-sprites @jorgebastida @jorgebastida gluecss.com

Slide 2

Slide 2 text

Sprites?

Slide 3

Slide 3 text

N 1

Slide 4

Slide 4 text

A .sprite-A{ ... }

Slide 5

Slide 5 text

A .sprite-A{ background-image: url(sprite.png); ... }

Slide 6

Slide 6 text

x:120px y:50px A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; ... }

Slide 7

Slide 7 text

A .sprite-A{ background-image: url(sprite.png); background-position: -120px -50px; width: 10px; height: 20px; ... } 20px 10px

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Should I do this for each image?

Slide 10

Slide 10 text

Yes!

Slide 11

Slide 11 text

By hand #1

Slide 12

Slide 12 text

HARD, UNMAINTAINABLE. TEDIOUS AND

Slide 13

Slide 13 text

+ custom - manual css ∞time

Slide 14

Slide 14 text

Online #2

Slide 15

Slide 15 text

+ easy to use - internet - upgrade

Slide 16

Slide 16 text

STOP

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Rebuild sprites should can must be part of the assets-rebuild * for 99% of your sprites * “ ”

Slide 19

Slide 19 text

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/ ?

Slide 20

Slide 20 text

Glue Glue $command-line-sprites $command-line-sprites gluecss.com

Slide 21

Slide 21 text

Drop source images somewhere $ glue source output Party!

Slide 22

Slide 22 text

.sprite-icons-rainbow{ background-image:url(sprite.png); background-repeat:no-repeat; background-position: 247px 147px; width: 25px; height: 25px; } ... fam fam fam

Slide 23

Slide 23 text

.glyphicons-187-more{ background-image:url(glyphicons.png); background-repeat:no-repeat; background-position: 212px 42px; width: 23px; height: 22px; } ... glyphish

Slide 24

Slide 24 text

But... my sprites are complex...

Slide 25

Slide 25 text

--padding 5px

Slide 26

Slide 26 text

--padding only for some files? add.png add_10.png add_10-20.png add_10-5-20-4.png

Slide 27

Slide 27 text

--algorithm square vertical horizontal diagonal vertical right horizontal bottom

Slide 28

Slide 28 text

--ordering maxside width height area

Slide 29

Slide 29 text

Pseudo Classes pay.png pay_hover.png Think about this... It’s freaking cool :)

Slide 30

Slide 30 text

--crop

Slide 31

Slide 31 text

--project sprites !"" actions # !"" add.png # $"" remove.png !"" borders # !"" top_left.png # $"" top_right.png $"" icons !"" comment.png !"" new.png $"" rss.png

Slide 32

Slide 32 text

--cachebuster sprite_4d3ad.png sprite.png?4d3ad

Slide 33

Slide 33 text

etc... Watch Configuration files Margins less support OptiPNG integration Custom CSS output Custom class names PNG8 ... It’s Python!

Slide 34

Slide 34 text

Thanks! Thanks! gluecss.com gluecss.com @jorgebastida @jorgebastida