CSS3: Layouts for the Multi-screen World

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.