CSS3: Layouts for the Multi-screen World

9d9f17e37b751b9f83081ba3dd44bab4?s=47 Peter Gasston
November 28, 2012

CSS3: Layouts for the Multi-screen World

Talk given at Future of Web Design, Prague, 28 Nov 2012. #fowa #fowd

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

November 28, 2012
Tweet

Transcript

  1. 6.
  2. 9.
  3. 13.

    @media screen {} @media screen and (min-width: 800px) {} @media

    (orientation: portrait) {} Media Queries
  4. 22.
  5. 23.
  6. 26.
  7. 30.
  8. 31.
  9. 34.
  10. 36.

    Flexbox A B .a { flex: 2; } .b {

    flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
  11. 37.

    Flexbox .parent { align-items: center; justify-content: center; } .parent {

    flex-direction: column; } .a { order: 2; } .b { order: 1; } A B
  12. 39.
  13. 40.

    Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr;

    } .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
  14. 41.

    Grid Layout A B .child { grid-column-position: 2; grid-row-position: 2;

    } .a { grid-column: 2 2; } .b { grid-row-span: 3; }
  15. 42.
  16. 44.
  17. 46.
  18. 53.

    Konec. * Some of the CSS properties shown in this

    talk are experimental and subject to change. Always check http://caniuse.com and http://html5please.com for latest implementation status.