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. CSS3: Layouts for the Multi-screen World

  2. Peter Gasston @stopsatgreen

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

  4. What is CSS3 going to do about it?

  5. The web has changed

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

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

  9. None
  10. 1633 320x480 768x1024

  11. Device-centric development

  12. Media Queries

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

    (orientation: portrait) {} Media Queries
  14. width device-width orientation aspect-ratio device-aspect-ratio Media Queries

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

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

    } } Media Queries
  17. script pointer hover luminosity (Possible) Media Queries

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

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

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

    { @viewport { width: 500px; } }
  21. Our tools are outdated

  22. None
  23. None
  24. • <table> • float: left HTML & CSS1

  25. • position: absolute • display: inline-block • display: table CSS2

  26. None
  27. The Three Stages of RWD

  28. New layout methods

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

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

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

    foo Regions
  34. Flexbox

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

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

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

    flex-direction: column; } .a { order: 2; } .b { order: 1; } A B
  38. Sod this, let's live code!

  39. None
  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; }
  41. Grid Layout A B .child { grid-column-position: 2; grid-row-position: 2;

    } .a { grid-column: 2 2; } .b { grid-row-span: 3; }
  42. None
  43. .child { position: absolute; wrap-flow: both; } Exclusions

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

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

  48. Conclusion

  49. 1. The web is everywhere

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

  51. 3. Better tools are on the way

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

  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.