Slide 1

Slide 1 text

THE HOME OF THE FUTURE PETER GASSTON STOPSATGREEN broken-links.com

Slide 2

Slide 2 text

Vernacular architecture

Slide 3

Slide 3 text

POLiTE architecture

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Multi-columns

Slide 7

Slide 7 text

Multi-columns div { column-width: 10em; } div { column-count: 3; }

Slide 8

Slide 8 text

Multi-columns h2 { column-span: all; }

Slide 9

Slide 9 text

multi-columns

Slide 10

Slide 10 text

Multi-columns PLUG 1 of 2

Slide 11

Slide 11 text

Flex-box

Slide 12

Slide 12 text

Flex-box .holder { display: box; } .child { box-flex: 1; } A B .a { box-flex: 3; } .b { box-flex: 2; }

Slide 13

Slide 13 text

Flex-box .child { box-flex: 0; box-align: center; box-pack: center; } .outer { box-orient: vertical; } .a,.b { box-ordinal-group: 2; } .c { box-ordinal-group: 1; } C A B

Slide 14

Slide 14 text

Flex-box JS Shim: https://github.com/doctyper/flexie

Slide 15

Slide 15 text

Flex-box display: box → display: flexbox box-flex → flex() box-orient → flex-direction box-ordinal-group → flex-order Spec: http://www.w3.org/TR/css3-flexbox/

Slide 16

Slide 16 text

Template Layout

Slide 17

Slide 17 text

TEMPLATE LAYOUT .a { position: a; } .b { position: b; } .c { position: c; } .outer { display: 'abc'; } A B C A B C

Slide 18

Slide 18 text

TEMPLATE LAYOUT .outer { display: 'abb' 'a.c'; } A B C A B C .outer { display: 'aa' 'bc'; }

Slide 19

Slide 19 text

TEMPLATE LAYOUT JS Shim: http://code.google.com/p/css-template-layout/ Demos: http://nealgrosskopf.com/tech/thread.php?pid=46

Slide 20

Slide 20 text

Grid Layout

Slide 21

Slide 21 text

grid LAYOUT div { display: grid; grid-columns: 1fr 1fr 2fr; } div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 10em auto 40px; }

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

grid LAYOUT Spec: http://www.w3.org/TR/css3-grid-layout/ Blog post: http://j.mp/kul0H1 http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx

Slide 24

Slide 24 text

GRiD LAYOUT .outer { grid-template: 'abc'; } .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; } A B C

Slide 25

Slide 25 text

Extended Floats

Slide 26

Slide 26 text

EXTENDED FLOATS .a { float: positioned; position: absolute; left: 33.3%; top: 33.33%; width: 33.3%; } Spec: http://www.interoperabilitybridges.com/css3-floats/ A

Slide 27

Slide 27 text

Regions

Slide 28

Slide 28 text

REGiONS: THREADS A B .a { flow: 'foo'; } .b { content: from(foo); } B C D .b, .c, .d { content: from(foo); }

Slide 29

Slide 29 text

REGiONS: THREADS

Slide 30

Slide 30 text

REGiONS: SHAPES .child { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around; }

Slide 31

Slide 31 text

REGiONS: SHAPES

Slide 32

Slide 32 text

REGiONS: exclusions .a { wrap-shape-mode: content; } .b { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around; }

Slide 33

Slide 33 text

REGiONS: EXCLUSIONS

Slide 34

Slide 34 text

regions Spec: http://dev.w3.org/csswg/css3-regions/ Prototype: http://labs.adobe.com/technologies/cssregions/ Pro tip: use http://leo-koppelkamm.de/polyCreator/ for creating polygons.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

thanks. Buy my book! nostarch.com/css3.htm

Slide 37

Slide 37 text

http://brittbell.blogspot.com/ http://www.flickr.com/photos/banfflakelouise/2274619237/ http://www.flickr.com/photos/el_momento_i_sitio_apropiados/5634431702/ http://www.flickr.com/photos/chanc/3869133751/ http://www.flickr.com/photos/gullevek/580672409/ http://www.flickr.com/photos/instantjefferson/2231405/ http://www.flickr.com/photos/moritzbernoully/3412093432/ http://www.flickr.com/photos/paulaofessel/335809741/ http://www.flickr.com/photos/opacity/617608495/ IMAGE CREDITS