CSS3: Layouts for the Multi-screen World

Transcript

1. 1.

   CSS3: Layouts for the Multi-screen World

2. 2.

   Peter Gasston @stopsatgreen

3. 3.

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

4. 4.

   What is CSS3 going to do about it?

5. 5.

   The web has changed

6. 6.

   None
7. 7.

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

8. 8.

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

9. 9.

   None
10. 10.

    1633 320x480 768x1024

11. 11.

    Device-centric development

12. 12.

    Media Queries

13. 13.

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

    (orientation: portrait) {} Media Queries
14. 14.

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

15. 15.

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

16. 16.

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

    } } Media Queries
17. 17.

    script pointer hover luminosity (Possible) Media Queries

18. 18.

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

19. 19.

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

    }
20. 20.

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

    { @viewport { width: 500px; } }
21. 21.

    Our tools are outdated

22. 22.

    None
23. 23.

    None
24. 24.

    • <table> • float: left HTML & CSS1

25. 25.

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

26. 26.

    None
27. 27.

    The Three Stages of RWD

28. 28.

    New layout methods

29. 29.

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

    }
30. 30.

    None
31. 31.

    None
32. 32.

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

    { flow-into: 'foo'; }
33. 33.

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

    foo Regions
34. 34.

    Flexbox

35. 35.

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

    } .child { flex: 1; }
36. 36.

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

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

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

    flex-direction: column; } .a { order: 2; } .b { order: 1; } A B
38. 38.

    Sod this, let's live code!

39. 39.

    None
40. 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. 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. 42.

    None
43. 43.

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

44. 44.

    None
45. 45.

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

46. 46.

    None
47. 47.

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

48. 48.

    Conclusion

49. 49.

    1. The web is everywhere

50. 50.

    2. Web design is constrained by the tools we have

51. 51.

    3. Better tools are on the way

52. 52.

    4. Let's make beautiful websites that work everywhere

53. 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.