The Home of the Future: CSS Layouts

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

Vernacular architecture

POLiTE architecture

Multi-columns

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

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 { box-flex: 3; }A B .b { box-flex: 2; }

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

Flex-boxJS Shim: https://github.com/doctyper/flexie

Flex-boxdisplay: 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; } .outer { display: abc; }.c { position: c; } A B A B C C

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

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

Grid Layout

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

grid LAYOUT.child { .a { grid-column: 2; grid-column: 2; grid-row: 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/kul0H1http://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 B C .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; }

Extended Floats

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

Regions

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

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/ for creating polygons.

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

IMAGE CREDITShttp://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/

http://jotarun.posterous.com	106
http://lanyrd.com	16
http://cloud-notepad.blogspot.com	5
http://localhost	3
http://us-w1.rockmelt.com	1
https://twitter.com	1

The Home of the Future: CSS Layouts

by Peter Gasston

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 132

Statistics

The Home of the Future: CSS Layouts Presentation Transcript