Responsive Web Applications

As presented at dotCSS in Paris, France

Transcript

1. Responsive Web Applications with Container Queries
2. Why We Need Container Queries
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
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; }
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
36. In Chrome: • Layout API • Custom Paint API • Parser API • Properties and Values • Animation Worklet • Typed OM • Font Metrics API
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%; }
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; }
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