Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Home of the Future: CSS Layouts

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 37 Ad
Advertisement

More Related Content

Viewers also liked (15)

Similar to The Home of the Future: CSS Layouts (20)

Advertisement

Recently uploaded (20)

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-columns div { 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-box JS Shim: https://github.com/doctyper/flexie
  13. 13. 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/
  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 LAYOUT div { 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/kul0H1 http://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 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/

×