Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Home of the Future: CSS Layouts

6,187 views

Published on

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

Published in: Technology
  • Be the first to comment

The Home of the Future: CSS Layouts

  1. 1. THE HOME OF THE FUTURE PETER GASSTON STOPSATGREEN broken-links.com
  2. 2. Vernacular architecture
  3. 3. POLiTE architecture
  4. 4. Multi-columns
  5. 5. Multi-columnsdiv { column-count: 3; } div { column-width: 10em; }
  6. 6. Multi-columns h2 { column-span: all; }
  7. 7. multi-columns
  8. 8. Multi-columns PLUG 1 of 2
  9. 9. Flex-box
  10. 10. Flex-box .holder { display: box; } .child { box-flex: 1; } .a { box-flex: 3; }A B .b { box-flex: 2; }
  11. 11. 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
  12. 12. Flex-boxJS Shim: https://github.com/doctyper/flexie
  13. 13. Flex-boxdisplay: box → display: flexboxbox-flex → flex()box-orient → flex-directionbox-ordinal-group → flex-order Spec: http://www.w3.org/TR/css3-flexbox/
  14. 14. Template Layout
  15. 15. TEMPLATE LAYOUT.a { position: a; }.b { position: b; } .outer { display: abc; }.c { position: c; } A B A B C C
  16. 16. TEMPLATE LAYOUT.outer { .outer { display: aa bc; display: abb a.c;} } A B A B C C
  17. 17. TEMPLATE LAYOUT JS Shim: http://code.google.com/p/css-template-layout/Demos: http://nealgrosskopf.com/tech/thread.php?pid=46
  18. 18. Grid Layout
  19. 19. grid LAYOUTdiv { div { display: grid; display: grid; grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr;} grid-rows: 10em auto 40px; }
  20. 20. grid LAYOUT.child { .a { grid-column: 2; grid-column: 2; grid-row: 2; grid-column-span: 2;} } .b { grid-row-span: 3; } A B
  21. 21. 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
  22. 22. GRiD LAYOUT .outer { grid-template: abc; }A B C .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; }
  23. 23. Extended Floats
  24. 24. EXTENDED FLOATS .a { float: positioned; position: absolute; left: 33.3%; A top: 33.33%; width: 33.3%; }Spec: http://www.interoperabilitybridges.com/css3-floats/
  25. 25. Regions
  26. 26. REGiONS: THREADS.a { flow: foo; } .b, .c, .d {.b { content: from(foo); } content: from(foo); } A B B C D
  27. 27. REGiONS: THREADS
  28. 28. REGiONS: SHAPES.child { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around;}
  29. 29. REGiONS: SHAPES
  30. 30. REGiONS: exclusions.a { wrap-shape-mode: content; }.b { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around;}
  31. 31. REGiONS: EXCLUSIONS
  32. 32. 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.
  33. 33. thanks. Buy my book! nostarch.com/css3.htm
  34. 34. 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/

×