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

CSS3: Layouts for the Multi-screen World

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

Peter Gasston

November 28, 2012
Tweet

More Decks by Peter Gasston

Other Decks in Programming

Transcript

  1. CSS3:
    Layouts
    for the
    Multi-screen
    World

    View Slide

  2. Peter Gasston
    @stopsatgreen

    View Slide

  3. 1. The web
    has changed
    2. Our tools
    are outdated

    View Slide

  4. What is CSS3
    going to do
    about it?

    View Slide

  5. The web
    has changed

    View Slide

  6. View Slide

  7. By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/

    View Slide

  8. http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

    View Slide

  9. View Slide

  10. 1633
    320x480
    768x1024

    View Slide

  11. Device-centric
    development

    View Slide

  12. Media Queries

    View Slide

  13. @media screen {}
    @media screen and (min-width: 800px) {}
    @media (orientation: portrait) {}
    Media Queries

    View Slide

  14. width
    device-width
    orientation
    aspect-ratio
    device-aspect-ratio
    Media Queries

    View Slide

  15. @media (min-resolution: 1.5dppx) {}
    Media Queries

    View Slide

  16. @media (max-width: 480px) {
    ...
    @media (orientation: portrait) {
    ...
    }
    }
    Media Queries

    View Slide

  17. script
    pointer
    hover
    luminosity
    (Possible) Media Queries

    View Slide

  18. content="width=500, initial-scale=1,
    maximum-scale=2">
    Device Adaptation

    View Slide

  19. Device Adaptation
    @viewport {
    initial-scale: 1;
    maximum-scale: 2;
    width: 500px;
    }

    View Slide

  20. Device Adaptation
    @viewport {
    width: device-width;
    }
    @media (max-device-width: 420px) {
    @viewport {
    width: 500px;
    }
    }

    View Slide

  21. Our tools
    are outdated

    View Slide

  22. View Slide

  23. View Slide




  24. float: left
    HTML & CSS1

    View Slide


  25. position: absolute

    display: inline-block

    display: table
    CSS2

    View Slide

  26. View Slide

  27. The Three Stages of RWD

    View Slide

  28. New layout
    methods

    View Slide

  29. Multi-columns
    article { column-count: 3; }
    article { column-width: 20em; }

    View Slide

  30. View Slide

  31. View Slide

  32. A
    B .b { flow-from: 'foo'; }
    foo
    Regions
    .a { flow-into: 'foo'; }

    View Slide

  33. B
    C D
    .b, .c, .d {
    flow-from: 'foo';
    }
    foo
    Regions

    View Slide

  34. Flexbox

    View Slide

  35. Flexbox
    .parent { display: flex; }
    .child { width: 30%; }
    .child { flex: 1; }

    View Slide

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

    View Slide

  37. Flexbox
    .parent {
    align-items: center;
    justify-content: center;
    }
    .parent {
    flex-direction: column;
    }
    .a { order: 2; }
    .b { order: 1; }
    A
    B

    View Slide

  38. Sod this,
    let's
    live code!

    View Slide

  39. View Slide

  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;
    }

    View Slide

  41. Grid Layout
    A
    B
    .child {
    grid-column-position: 2;
    grid-row-position: 2;
    }
    .a { grid-column: 2 2; }
    .b { grid-row-span: 3; }

    View Slide

  42. View Slide

  43. .child {
    position: absolute;
    wrap-flow: both;
    }
    Exclusions

    View Slide

  44. View Slide

  45. .child {
    shape-outside:
    circle(50%,50%,400px);
    }
    Shaped Exclusions

    View Slide

  46. View Slide

  47. .child {
    shape-inside:
    circle(50%,50%,400px);
    }
    Shaped Exclusions

    View Slide

  48. Conclusion

    View Slide

  49. 1. The web is
    everywhere

    View Slide

  50. 2. Web design
    is constrained
    by the tools
    we have

    View Slide

  51. 3. Better tools
    are on the way

    View Slide

  52. 4. Let's make
    beautiful
    websites
    that work
    everywhere

    View Slide

  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.

    View Slide