CSS3: Layouts for the Multi-screen World

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

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
7. By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
8. http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
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
24. • <table> • float: left HTML & CSS1
25. • position: absolute • display: inline-block • display: table CSS2
27. The Three Stages of RWD
28. New layout methods
29. Multi-columns article { column-count: 3; } article { column-width: 20em; }
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!
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; }
43. .child { position: absolute; wrap-flow: both; } Exclusions
45. .child { shape-outside: circle(50%,50%,400px); } Shaped Exclusions
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.