THE HOME OF THE FUTURE

PETER GASSTONSTOPSATGREEN

broken-links.com

Vernacular architecture

POLiTE architecture

Multi-columns

Multi-columns

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

Multi-columns

h2 { column-span: all; }

multi-columns

Multi-columns

PLUG 1 of 2

Flex-box

Flex-box

.holder { display: box; }

.child { box-flex: 1; }

A B.a { box-flex: 3; }

.b { box-flex: 2; }

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

Flex-box

JS Shim: https://github.com/doctyper/flexie

Flex-box

display: box → display: flexboxbox-flex → flex()box-orient → flex-directionbox-ordinal-group → flex-order

Spec: http://www.w3.org/TR/css3-flexbox/

Template Layout

TEMPLATE LAYOUT

.a { position: a; }

.b { position: b; }

.c { position: c; }

.outer { display: 'abc'; }

A

B

C

A B C

TEMPLATE LAYOUT

.outer {display: 'abb' 'a.c';

}

A

B C

A

B

C

.outer {display: 'aa' 'bc';

}

TEMPLATE LAYOUT

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

Grid Layout

grid LAYOUT

div { display: grid; grid-columns: 1fr 1fr 2fr;}

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

grid LAYOUT

.child { grid-column: 2; grid-row: 2;}

.a { grid-column: 2; grid-column-span: 2;}.b { grid-row-span: 3; }

A

B

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

GRiD LAYOUT

.outer {grid-template: 'abc';

}.a { grid-cell: a; }.b { grid-cell: b; }.c { grid-cell: c; }

A B C

Extended Floats

EXTENDED FLOATS

.a {float: positioned;position: absolute;left: 33.3%;top: 33.33%;width: 33.3%;

}

Spec: http://www.interoperabilitybridges.com/css3-floats/

A

Regions

REGiONS: THREADS

A

B

.a { flow: 'foo'; }

.b { content: from(foo); }

B

C D

.b, .c, .d {content: from(foo);

}

REGiONS: THREADS

REGiONS: SHAPES

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

REGiONS: SHAPES

REGiONS: exclusions

.a { wrap-shape-mode: content; }

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

REGiONS: EXCLUSIONS

regions

Spec: http://dev.w3.org/csswg/css3-regions/Prototype: http://labs.adobe.com/technologies/cssregions/

Pro tip: use http://leo-koppelkamm.de/polyCreator/ forcreating polygons.

thanks. Buy my book!

nostarch.com/css3.htm

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