Responsive Web Applications

Transcript

1. Responsive Web Applications with Container Queries

2. Why We Need Container Queries

3. None
4. None
5. None
6. None
7. None
8. None
9. None

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

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

12. None
13. None

14. With media queries, you have to know the interplay of

    all objects in all scenarios

15. Implementing Container Queries

16. With container queries, you only have to know the interplay

    within a single object

17. No container queries!

18. Declare in: CSS, HTML, or 
 JavaScript

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

    }

20. http://elementqueries.com/ @element ".element" and 
 (min-width: 500px) { .element {

    background: gold; } }

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

22. To parse CSS, either need to be on same domain

    or set up CORS

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

24. At HTML level, requires consistency of implementation 
 across app

25. We chose JavaScript and built our own

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

    1024 } ]

27. Why is this 
 so f**kin’ hard?

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

29. None

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

    blue; }

31. The Future

32. ResizeObserver

33. Houdini

34. What’s Houdini: • Layout API • Custom Paint API •

    Parser API • Properties and Values • Animation Workout • Typed OM • Font Metrics API
35. None

36. In Chrome: • Layout API • Custom Paint API •

    Parser API • Properties and Values • Animation Worklet • Typed OM • Font Metrics API
37. None

38. <div class="two-columns"> <div class="col1"> … </div> <div class="col2"> … </div>

    </div>

39. .two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 {

    flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
40. None

41. <div class="media-body"> <div class="media-content"> </div> <div class="media-actions"> <a href="…"> Button

    </a> </div> </div>

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

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

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

45. None

46. <div class="box"> <div class="box-image"> <img src="…" height="150" > </div> <div

    class="box-content">...</div> </div>

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

48. .box-image { flex-grow: 1; flex-shrink: 0; flex-basis: 150px; } .box-image

    > img { width: 100%; object-fit: cover; }

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

    }

50. <div class="items"> <div class="box">…</div> <div class="box">…</div> <div class="box">…</div> </div>

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

52. Thank you.
 http:/ /snook.ca/
 @snookca