Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Applications

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
November 30, 2017

Responsive Web Applications

As presented at dotCSS in Paris, France

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

November 30, 2017
Tweet

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