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

Changing the layout game (Smashing version)

Chris wright
September 12, 2017

Changing the layout game (Smashing version)

A journey from hacks and experimentation to open browser APIs that allow us to create our own CSS. This is a talk about how ideas and hacks become browser features and where the future of that is likely to be.

Chris wright

September 12, 2017
Tweet

More Decks by Chris wright

Other Decks in Programming

Transcript

  1. Hallo Freiburg!

    View full-size slide

  2. Hi, I’m Chris Wright
    @cwrightdesign

    View full-size slide

  3. Sydney,
    Australia

    View full-size slide

  4. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea

    View full-size slide

  5. layout
    Changing
    the game

    View full-size slide

  6. How we
    solve problems

    View full-size slide

  7. influence the features tomorrow
    Features today

    View full-size slide

  8. Avoiding absolutes

    View full-size slide

  9. Experimentation

    View full-size slide

  10. From hacks and experimentation

    View full-size slide

  11. create
    APIs to
    our own CSS

    View full-size slide

  12. shape the future
    how we can

    View full-size slide

  13. Looking back

    View full-size slide

  14. The clearfix hack

    View full-size slide

  15. The media query

    View full-size slide

  16. Fluid image hack
    One defined dimension
    preserves aspect ratio

    View full-size slide

  17. Fluid image hack
    One defined dimension
    preserves aspect ratio

    View full-size slide

  18. Compressive images
    Images at double size with full
    compression
    https://www.filamentgroup.com/lab/compressive-images.html

    View full-size slide

  19. We make creative hacks

    View full-size slide

  20. Compressive images
    Fluid image hack
    Clearfix hack

    View full-size slide

  21. Compressive images
    Fluid image hack
    Clearfix hack

    View full-size slide

  22. Compressive images Sizes, Picture
    Fluid image hack Object-fit
    Clearfix hack Display: flowroot

    View full-size slide

  23. Hacks are our desire paths

    View full-size slide

  24. hacks
    are a creative use of features
    Brilliant

    View full-size slide

  25. Unique
    properties

    View full-size slide

  26. Block padding is relative
    to the width of the element
    Intrinsic ratio
    padding-top: 56.25%
    https://alistapart.com/article/creating-intrinsic-ratios-for-video

    View full-size slide

  27. Quantity queries
    Combining nth selector
    with general sibling
    https://alistapart.com/article/quantity-queries-for-css

    View full-size slide

  28. Dirty hacks
    Browser isolation

    View full-size slide

  29. Hacks that
    never leave

    View full-size slide

  30. Our needs often
    grow beyond the tools we have

    View full-size slide

  31. Layout is always hacked

    View full-size slide

  32. 60+ lines of code to define
    column behaviour
    Flexbox grid example

    View full-size slide

  33. 35+ lines of code anytime
    you touch a media query
    Flexbox grid example

    View full-size slide

  34. Now we have declarative grids

    View full-size slide

  35. Fraction units, yay!

    View full-size slide

  36. 1Fr 1Fr
    1 / 2 1 / 2

    View full-size slide

  37. 1Fr 1Fr 1Fr
    1 / 3 1 / 2
    1 / 3 1 / 3

    View full-size slide

  38. 1Fr 2Fr
    1 / 3 2 / 3

    View full-size slide

  39. Repeat (2, 1Fr)
    1 / 2 1 / 2

    View full-size slide

  40. Creating white space

    View full-size slide

  41. grid-column-start: 2

    View full-size slide

  42. Across rows and columns

    View full-size slide

  43. grid-column: span 2;

    View full-size slide

  44. 60 Lines of code reduced to 1 line

    View full-size slide

  45. Building up complex grids

    View full-size slide

  46. Flexible grids

    View full-size slide

  47. Quantity queries meet Grid span

    View full-size slide

  48. Variables add
    simplicity

    View full-size slide

  49. Variables create relationships between values

    View full-size slide

  50. Define how columns and spans collapse across viewports

    View full-size slide

  51. Define how columns and spans collapse across viewports

    View full-size slide

  52. Experimentation with values

    View full-size slide

  53. Feature queries simplified

    View full-size slide

  54. Testing Feature queries by using not

    View full-size slide

  55. Components
    moving toward

    View full-size slide

  56. From static pages to static devices

    View full-size slide

  57. http://v3.danielmall.com/articles/content-display-patterns/

    View full-size slide

  58. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

    View full-size slide

  59. Increased complexity,
    poorer maintainability

    View full-size slide

  60. Average: 264 Media queries
    Over 50 Websites

    View full-size slide

  61. Media queries are restricted
    to viewports and media types

    View full-size slide

  62. Define once, use anywhere

    View full-size slide

  63. Available space is the constraint

    View full-size slide

  64. http://danielmall.com/articles/content-display-patterns/

    View full-size slide

  65. evolved
    Media queries

    View full-size slide

  66. min-width (30 em)
    default component

    View full-size slide

  67. Infinite loops

    View full-size slide

  68. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
    CSS Parsing

    View full-size slide

  69. Autonomous layout

    View full-size slide

  70. Flex wrap and set widths

    View full-size slide

  71. Flex wrap: Two fixed widths
    320px 480px = 800px
    +

    View full-size slide

  72. Less than 800px space available

    View full-size slide

  73. Flex-grow: 1

    View full-size slide

  74. The problem: expanding evenly

    View full-size slide

  75. The problem: expanding evenly

    View full-size slide

  76. The flex-grow: 9999 variant
    http://joren.co/flex-grow-9999-hack/

    View full-size slide

  77. flex: 99999
    flex: 1
    Only one has room to grow

    View full-size slide

  78. flex: 99999
    flex: 1
    Only one has room to grow

    View full-size slide

  79. flex: 99999
    flex: 1

    View full-size slide

  80. Multi columns

    View full-size slide

  81. Multi columns
    column-width: 600px

    View full-size slide

  82. Multi columns
    column-width: 600px

    View full-size slide

  83. Multi columns
    column-width: 600px

    View full-size slide

  84. Flex wrap + Column-count: auto

    View full-size slide

  85. columns: 300px

    View full-size slide

  86. columns: 300px

    View full-size slide

  87. Grid: Auto-fit and auto-fill

    View full-size slide

  88. Component based imagery

    View full-size slide

  89. SVG has its own
    document context

    View full-size slide

  90. SVG can also embed HTML
    https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

    View full-size slide

  91. an API to detect size changes
    ResizeObserver

    View full-size slide

  92. window.onresize
    the old way of detecting

    View full-size slide

  93. http://alistapart.com/article/container-queries-once-more-unto-the-breach

    View full-size slide

  94. Element size relationships

    View full-size slide

  95. Can it communicate with CSS?

    View full-size slide

  96. We can use CSS Variables to communicate

    View full-size slide

  97. Getting variables via JS

    View full-size slide

  98. Setting variables via JS

    View full-size slide

  99. Fluid Typography

    View full-size slide

  100. http://jxnblk.com/fitter-happier-text/

    View full-size slide

  101. https://www.smashingmagazine.com/2016/05/fluid-typography/

    View full-size slide

  102. Font-size: 50ctw
    (not real CSS, I wish)

    View full-size slide

  103. Size based on line length

    View full-size slide

  104. ResizeObserver Container based
    fluid typography

    View full-size slide

  105. In the browser

    View full-size slide

  106. Useful for techniques that use calc()

    View full-size slide

  107. An unfortunate limitation in CSS

    View full-size slide

  108. CSS can’t range match a selector

    View full-size slide

  109. Communicate shape

    View full-size slide

  110. A preview might exist with different shapes
    http://lincolnloop.github.io/element-queries-example/

    View full-size slide

  111. 1:1 3:5
    4:3
    5:1

    View full-size slide

  112. 1:1 3:5
    4:3
    5:1
    Container shapes as ratio

    View full-size slide

  113. Media queries are very good at this job

    View full-size slide

  114. Let’s hack media queries!

    View full-size slide

  115. @media (min-width: var(—size)) {
    Not valid

    View full-size slide

  116. window.matchMedia(condition).matches

    View full-size slide

  117. Turns out we don’t even need to use them

    View full-size slide

  118. Set the conditions in variables

    View full-size slide

  119. ResizeObserver detects a change, read variables

    View full-size slide

  120. check if they match, add the class

    View full-size slide

  121. But browser support!

    View full-size slide

  122. Looking ahead

    View full-size slide

  123. Browser APIs
    Open
    for CSS

    View full-size slide

  124. Houdini
    What
    will mean for the web

    View full-size slide

  125. Animation
    Paint
    Layout
    Custom @rules
    More powerful custom properties

    View full-size slide

  126. Custom @rules

    View full-size slide

  127. @container-shape(square) {}

    View full-size slide

  128. @container(min-width: 400px) {}

    View full-size slide

  129. Layout
    Designing
    Browser

    View full-size slide

  130. Layout Black box

    View full-size slide

  131. display: layout(Fluxbox)

    View full-size slide

  132. https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md

    View full-size slide

  133. Child element positioning and placement

    View full-size slide

  134. Ability for child elements to
    have flexbox/grid behaviour

    View full-size slide

  135. Layout fragmentation
    (Multi columns etc)

    View full-size slide

  136. how we build for browsers
    Redefine

    View full-size slide

  137. How can we help
    shape the future?

    View full-size slide

  138. Hacks show intent

    View full-size slide

  139. Advocacy creates impact

    View full-size slide

  140. Features will be supported one day

    View full-size slide

  141. Early Feedback loop

    View full-size slide

  142. WICG
    https://www.w3.org/community/wicg/

    View full-size slide

  143. Houdini Task force
    https://github.com/w3c/css-houdini-drafts

    View full-size slide

  144. Thank you
    https://github.com/chriswrightdesign/changing-the-layout-game-talk

    View full-size slide