Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Home of the Future

The Home of the Future

CSS layout methods now and tomorrow, through the somewhat spurious lens of architecture.

Peter Gasston

May 28, 2011
Tweet

More Decks by Peter Gasston

Other Decks in Technology

Transcript

  1. Flex-box .holder { display: box; } .child { box-flex: 1;

    } A B .a { box-flex: 3; } .b { box-flex: 2; }
  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
  3. 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/
  4. TEMPLATE LAYOUT .a { position: a; } .b { position:

    b; } .c { position: c; } .outer { display: 'abc'; } A B C A B C
  5. TEMPLATE LAYOUT .outer { display: 'abb' 'a.c'; } A B

    C A B C .outer { display: 'aa' 'bc'; }
  6. grid LAYOUT div { display: grid; grid-columns: 1fr 1fr 2fr;

    } div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 10em auto 40px; }
  7. grid LAYOUT .child { grid-column: 2; grid-row: 2; } .a

    { grid-column: 2; grid-column-span: 2; } .b { grid-row-span: 3; } A B
  8. GRiD LAYOUT .outer { grid-template: 'abc'; } .a { grid-cell:

    a; } .b { grid-cell: b; } .c { grid-cell: c; } A B C
  9. EXTENDED FLOATS .a { float: positioned; position: absolute; left: 33.3%;

    top: 33.33%; width: 33.3%; } Spec: http://www.interoperabilitybridges.com/css3-floats/ A
  10. REGiONS: THREADS A B .a { flow: 'foo'; } .b

    { content: from(foo); } B C D .b, .c, .d { content: from(foo); }
  11. REGiONS: exclusions .a { wrap-shape-mode: content; } .b { wrap-shape:

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