CSS3: Layouts for the Multi-screen World

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Peter Gasston @stopsatgreen

Slide 3

Slide 3 text

1. The web has changed 2. Our tools are outdated

Slide 4

Slide 4 text

What is CSS3 going to do about it?

Slide 5

Slide 5 text

The web has changed

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/

Slide 8

Slide 8 text

http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

1633 320x480 768x1024

Slide 11

Slide 11 text

Device-centric development

Slide 12

Slide 12 text

Media Queries

Slide 13

Slide 13 text

@media screen {} @media screen and (min-width: 800px) {} @media (orientation: portrait) {} Media Queries

Slide 14

Slide 14 text

width device-width orientation aspect-ratio device-aspect-ratio Media Queries

Slide 15

Slide 15 text

@media (min-resolution: 1.5dppx) {} Media Queries

Slide 16

Slide 16 text

@media (max-width: 480px) { ... @media (orientation: portrait) { ... } } Media Queries

Slide 17

Slide 17 text

script pointer hover luminosity (Possible) Media Queries

Slide 18

Slide 18 text

Device Adaptation

Slide 19

Slide 19 text

Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px; }

Slide 20

Slide 20 text

Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px) { @viewport { width: 500px; } }

Slide 21

Slide 21 text

Our tools are outdated

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

● ● float: left HTML & CSS1

Slide 25

Slide 25 text

● position: absolute ● display: inline-block ● display: table CSS2

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

The Three Stages of RWD

Slide 28

Slide 28 text

New layout methods

Slide 29

Slide 29 text

Multi-columns article { column-count: 3; } article { column-width: 20em; }

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

A B .b { flow-from: 'foo'; } foo Regions .a { flow-into: 'foo'; }

Slide 33

Slide 33 text

B C D .b, .c, .d { flow-from: 'foo'; } foo Regions

Slide 34

Slide 34 text

Flexbox

Slide 35

Slide 35 text

Flexbox .parent { display: flex; } .child { width: 30%; } .child { flex: 1; }

Slide 36

Slide 36 text

Flexbox A B .a { flex: 2; } .b { flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }

Slide 37

Slide 37 text

Flexbox .parent { align-items: center; justify-content: center; } .parent { flex-direction: column; } .a { order: 2; } .b { order: 1; } A B

Slide 38

Slide 38 text

Sod this, let's live code!

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr; } .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }

Slide 41

Slide 41 text

Grid Layout A B .child { grid-column-position: 2; grid-row-position: 2; } .a { grid-column: 2 2; } .b { grid-row-span: 3; }

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

.child { position: absolute; wrap-flow: both; } Exclusions

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

.child { shape-outside: circle(50%,50%,400px); } Shaped Exclusions

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

.child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions

Slide 48

Slide 48 text

Conclusion

Slide 49

Slide 49 text

1. The web is everywhere

Slide 50

Slide 50 text

2. Web design is constrained by the tools we have

Slide 51

Slide 51 text

3. Better tools are on the way

Slide 52

Slide 52 text

4. Let's make beautiful websites that work everywhere

Slide 53

Slide 53 text

Konec. * Some of the CSS properties shown in this talk are experimental and subject to change. Always check http://caniuse.com and http://html5please.com for latest implementation status.