Changing the layout game

A talk about creating the layout features we want - by hacking together the features we have and experimenting to create change.

Transcript

2. Hello Warszawa!
4. Hi, I’m Chris Wright @cwrightdesign
5. Sydney, Australia
8. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea
9. layout Changing the game
10. How we solve problems
11. create the features tomorrow Features today
12. Potential
13. Unique
14. Looking back
17. Complex
18. The clearfix hack
19. The media query
23. Fluid image hack One defined dimension preserves aspect ratio
24. Fluid image hack One defined dimension preserves aspect ratio
25. Compressive images Images at double size with full compression https://www.filamentgroup.com/lab/compressive-images.html
26. We make the craziest hacks
27. Hacks create impact
28. Compressive images Fluid image hack Clearfix hack
29. Compressive images Fluid image hack Clearfix hack
30. Compressive images Sizes, Picture Fluid image hack Object-fit Clearfix hack Display: flowroot
31. Hacks are our desire paths
33. hacks are a creative use of features Brilliant
34. 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
35. Quantity queries Combining nth selector with general sibling https://alistapart.com/article/quantity-queries-for-css
36. Dirty hacks Browser isolation
37. Hacks that never leave
38. Our needs often grow beyond our tools
39. Layout is always hacked
41. 60+ lines of code to define column behaviour Flexbox grid example
42. 35+ lines of code anytime you touch a media query Flexbox grid example
43. Now we have declarative grids
48. Total of 2 fr units Each is worth 1 / 2 fr units
51. Create white space
54. Across rows and columns
56. grid-column: span 2;
58. We can break out of the grid
63. Building up complex grids
68. Flexible complex grids
73. Simpler with Variables
74. Define how columns and spans collapse across viewports
75. Define how columns and spans collapse across viewports
76. Variables create relationships between values
77. Experimentation with values
78. Creating offsets
81. Quantity queries and Grid
85. Components moving toward
86. From static pages to static devices
88. http://v3.danielmall.com/articles/content-display-patterns/
89. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
90. Increased complexity, poorer maintainability
91. Average: 264 Media queries Over 50 Websites
92. Media queries are restricted to viewports and media types
95. Define once, use anywhere
96. Available space is the constraint
97. http://danielmall.com/articles/content-display-patterns/
99. Media queries evolved
100. min-width (30 em) default component
102. Problems
103. Infinite loops
104. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp CSS Parsing
105. Autonomous layout
106. Flexbox
107. Flex wrap: Two fixed widths 320px 480px = 800px +
108. Less than 800px space available
109. Flex-grow: 1
110. In practice
111. The flex-grow: 9999 variant http://joren.co/flex-grow-9999-hack/
112. flex: 99999 flex: 1 Only one has room to grow
113. flex: 99999 flex: 1 Only one has room to grow
114. flex: 99999 flex: 1
117. Multi columns
118. Multi columns column-width: 600px
119. Multi columns column-width: 600px
120. Multi columns column-width: 600px
121. Flexbox + Columns
124. columns: 300px
125. columns: 300px
127. Grid: Auto-fit and auto-fill
129. Component based imagery
130. SVG has its own document context
131. SVG can also embed HTML https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
134. http://jxnblk.com/fitter-happier-text/
135. Fluid Typography
136. https://www.smashingmagazine.com/2016/05/fluid-typography/
137. Font-size: 50ctw (not real CSS, I wish)
138. ResizeObserver
139. We can use CSS Variables to communicate
140. Getting variables via JS
141. Setting variables via JS
142. Container based fluid typography
146. In the browser
150. The problem with reporting element size directly
152. CSS can’t range match a selector
154. Communicate shape
156. An preview might exist with different shapes http://lincolnloop.github.io/element-queries-example/
157. Feedback
158. Experiment
159. Make visible
160. Thank you