Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The Home of the Future: CSS Layouts

6.201 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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/

×