Changing the layout game (Smashing version)

C44f47e1f9bcc969d1b873aca4211c46?s=47 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.

C44f47e1f9bcc969d1b873aca4211c46?s=128

Chris wright

September 12, 2017
Tweet

Transcript

  1. None
  2. Hallo Freiburg!

  3. Hi, I’m Chris Wright @cwrightdesign

  4. Sydney, Australia

  5. None
  6. None
  7. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea

  8. layout Changing the game

  9. How we solve problems

  10. influence the features tomorrow Features today

  11. Avoiding absolutes

  12. Experimentation

  13. From hacks and experimentation

  14. create APIs to our own CSS

  15. shape the future how we can

  16. Looking back

  17. None
  18. None
  19. Complexity

  20. The clearfix hack

  21. The media query

  22. None
  23. 2001

  24. None
  25. None
  26. Fluid image hack One defined dimension preserves aspect ratio

  27. Fluid image hack One defined dimension preserves aspect ratio

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

  29. We make creative hacks

  30. Compressive images Fluid image hack Clearfix hack

  31. Compressive images Fluid image hack Clearfix hack

  32. Compressive images Sizes, Picture Fluid image hack Object-fit Clearfix hack

    Display: flowroot
  33. Hacks are our desire paths

  34. None
  35. hacks are a creative use of features Brilliant

  36. Unique properties

  37. 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
  38. Quantity queries Combining nth selector with general sibling https://alistapart.com/article/quantity-queries-for-css

  39. Dirty hacks Browser isolation

  40. Hacks that never leave

  41. Our needs often grow beyond the tools we have

  42. Layout is always hacked

  43. None
  44. 60+ lines of code to define column behaviour Flexbox grid

    example
  45. 35+ lines of code anytime you touch a media query

    Flexbox grid example
  46. Now we have declarative grids

  47. None
  48. None
  49. None
  50. None
  51. Fraction units, yay!

  52. 1 Fr 1 / 1

  53. 1Fr 1Fr 1 / 2 1 / 2

  54. 1Fr 1Fr 1Fr 1 / 3 1 / 2 1

    / 3 1 / 3
  55. 1Fr 2Fr 1 / 3 2 / 3

  56. None
  57. Repeat (2, 1Fr) 1 / 2 1 / 2

  58. None
  59. Creating white space

  60. None
  61. grid-column-start: 2

  62. Across rows and columns

  63. None
  64. grid-column: span 2;

  65. 60 Lines of code reduced to 1 line

  66. None
  67. Building up complex grids

  68. None
  69. None
  70. None
  71. None
  72. Flexible grids

  73. None
  74. None
  75. None
  76. None
  77. Quantity queries meet Grid span

  78. None
  79. None
  80. None
  81. Variables add simplicity

  82. Variables create relationships between values

  83. None
  84. None
  85. None
  86. Define how columns and spans collapse across viewports

  87. Define how columns and spans collapse across viewports

  88. Experimentation with values

  89. Feature queries simplified

  90. None
  91. None
  92. Testing Feature queries by using not

  93. Components moving toward

  94. From static pages to static devices

  95. None
  96. http://v3.danielmall.com/articles/content-display-patterns/

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

  98. Increased complexity, poorer maintainability

  99. Average: 264 Media queries Over 50 Websites

  100. Media queries are restricted to viewports and media types

  101. None
  102. None
  103. None
  104. Define once, use anywhere

  105. Available space is the constraint

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

  107. None
  108. evolved Media queries

  109. min-width (30 em) default component

  110. None
  111. Problems

  112. Infinite loops

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

  114. Autonomous layout

  115. Flex wrap and set widths

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

  117. Less than 800px space available

  118. Flex-grow: 1

  119. In practice

  120. The problem: expanding evenly

  121. The problem: expanding evenly

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

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

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

  125. flex: 99999 flex: 1

  126. None
  127. None
  128. Multi columns

  129. Multi columns column-width: 600px

  130. Multi columns column-width: 600px

  131. Multi columns column-width: 600px

  132. Flex wrap + Column-count: auto

  133. None
  134. None
  135. columns: 300px

  136. columns: 300px

  137. None
  138. Grid: Auto-fit and auto-fill

  139. Component based imagery

  140. SVG has its own document context

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

  142. None
  143. an API to detect size changes ResizeObserver

  144. None
  145. window.onresize the old way of detecting

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

  147. Element size relationships

  148. None
  149. None
  150. None
  151. Can it communicate with CSS?

  152. We can use CSS Variables to communicate

  153. Getting variables via JS

  154. Setting variables via JS

  155. Fluid Typography

  156. None
  157. http://jxnblk.com/fitter-happier-text/

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

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

  160. Size based on line length

  161. ResizeObserver Container based fluid typography

  162. None
  163. None
  164. In the browser

  165. None
  166. None
  167. None
  168. None
  169. Useful for techniques that use calc()

  170. An unfortunate limitation in CSS

  171. None
  172. CSS can’t range match a selector

  173. None
  174. Communicate shape

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

  176. 1:1 3:5 4:3 5:1

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

  178. None
  179. Media queries are very good at this job

  180. Let’s hack media queries!

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

  182. window.matchMedia(condition).matches

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

  184. Set the conditions in variables

  185. ResizeObserver detects a change, read variables

  186. check if they match, add the class

  187. None
  188. But browser support!

  189. Looking ahead

  190. Browser APIs Open for CSS

  191. Houdini

  192. Houdini What will mean for the web

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

  194. Custom @rules

  195. @container-shape(square) {}

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

  197. Layout Designing Browser

  198. Layout Black box

  199. display: layout(Fluxbox)

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

  202. Child element positioning and placement

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

  204. Layout fragmentation (Multi columns etc)

  205. how we build for browsers Redefine

  206. How can we help shape the future?

  207. Hacks show intent

  208. None
  209. Advocacy creates impact

  210. None
  211. Features will be supported one day

  212. Early Feedback loop

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

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

  215. CSS WG

  216. Visibility

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

  218. None