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
   

   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