Responsive Web Applications

As presented at dotCSS in Paris, France

Transcript

1. Responsive Web
   Applications
   with Container Queries
   

   View Slide

2. Why We Need
   Container Queries
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. • No orders
    • One order
    • Less than one page of
    orders
    • Multiple pages of
    orders
    • Has Info Notifications
    • Tab overflow
    • Has Warning
    Notifications
    • Has limited access to
    features
    • Has different apps
    installed
    

    View Slide

11. And now consider all of
    those things for
    multiple viewports
    

    View Slide

12. View Slide

13. View Slide

14. With media queries,
    you have to know the
    interplay of all objects
    in all scenarios
    

    View Slide

15. Implementing
    Container Queries
    

    View Slide

16. With container
    queries, you only have
    to know the interplay
    within a single object
    

    View Slide

17. No container
    queries!
    
    

    View Slide

18. Declare in:
    CSS,
    HTML, or 

    JavaScript
    

    View Slide

19. https://github.com/ResponsiveImagesCG/cq-demos
    .element:media( min-width:500px ) {}
    https://github.com/tysonmatanich/elementQuery
    .element[min-width~="500px"] {
    background-color: #eee;
    }
    

    View Slide

20. http://elementqueries.com/
    @element ".element" and 

    (min-width: 500px) {
    .element {
    background: gold;
    }
    }
    

    View Slide

21. https://github.com/tysonmatanich/elementQuery
    .element[min-width~="400px"] { }
    

    View Slide

22. To parse CSS, either
    need to be on same
    domain or set up CORS
    

    View Slide

23. https://github.com/Snugug/eq.js
    data-eq-pts="small: 400, medium: 600,
    large: 900"
    

    View Slide

24. At HTML level, requires
    consistency of
    implementation 

    across app
    

    View Slide

25. We chose JavaScript
    and built our own
    

    View Slide

26. elements = [
    {
    "module": ".flex--2x1",
    "className":"responsiveClass",
    "minWidth": 768, "maxWidth": 1024
    }
    ]
    

    View Slide

27. Why is this 

    so f**kin’ hard?
    

    View Slide

28. .element:media( min-width:500px ) {
    width: 400px;
    }
    

    View Slide

29. View Slide

30. .element {
    width: 50%;
    }
    .element:media( min-width:500px ) {
    color: blue;
    }
    

    View Slide

31. The Future
    

    View Slide

32. ResizeObserver
    

    View Slide

33. Houdini
    

    View Slide

34. What’s Houdini:
    • Layout API
    • Custom Paint API
    • Parser API
    • Properties and Values
    • Animation Workout
    • Typed OM
    • Font Metrics API
    

    View Slide

35. View Slide

36. In Chrome:
    • Layout API
    • Custom Paint API
    • Parser API
    • Properties and Values
    • Animation Worklet
    • Typed OM
    • Font Metrics API
    

    View Slide

37. View Slide

38. 
    …
    …
    
    

    View Slide

39. .two-columns {
    display: flex;
    flex-wrap: wrap;
    }
    .col1, .col2 { flex-grow: 1; }
    .col1 {
    flex-basis: 66%;
    min-width: 360px;
    }
    .col2 {
    flex-basis: 33%;
    }
    

    View Slide

40. View Slide

41. 
    
    
    
    Button
    
    
    

    View Slide

42. .media-body {
    display: flex;
    flex-wrap: wrap;
    }
    

    View Slide

43. .media-content {
    flex-grow: 1;
    flex-basis: 400px;
    margin-right: 20px;
    }
    

    View Slide

44. .media-actions {
    align-self: center;
    margin: 20px 0;
    }
    

    View Slide

45. View Slide

46. 
    
    
    
    ...
    
    

    View Slide

47. .box {
    display: flex;
    flex-wrap: wrap;
    }
    

    View Slide

48. .box-image {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 150px;
    }
    .box-image > img {
    width: 100%;
    object-fit: cover;
    }
    

    View Slide

49. .box-content {
    margin: 10px;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 60%;
    }
    

    View Slide

50. 
    …
    …
    …
    
    

    View Slide

51. .items {
    display: grid;
    grid-template-columns:
    repeat(auto-fit, minmax(400px, 1fr));
    }
    

    View Slide

52. Thank you.

    http:/
    /snook.ca/

    @snookca
    

    View Slide