Slides from my talk at Standards>Next, 28/05/11.

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

2. Vernacular architecture

3. POLiTE architecture

6. Multi-columns

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

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

9. multi-columns

10. Multi-columns
PLUG 1 of 2

11. Flex-box

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

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

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

15. 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/

16. Template Layout

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

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

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

20. Grid Layout

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

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

23. 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

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

25. Extended Floats

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

27. Regions

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

29. REGiONS: THREADS

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

31. REGiONS: SHAPES

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

33. REGiONS: EXCLUSIONS

34. 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.

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

37. IMAGE CREDITS
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/