Next level layout

A talk about how we can embrace new features to help us simplify our design systems - combining different layout techniques so that we don't have to tie our components to our viewports and use media queries to size them, using progressive enhancement to help us experiment with the newest features without the fear of breaking things for existing users, and breaking things to understand them.

Transcript

2. Next Layout level
4. The last 10 years
5. Increase in complexity
6. The rise of CSS Preprocessors
7. The ubiquitous framework
8. …and CSS Methodologies
10. Simplicity
11. Embrace the new without fear
12. Breaking layout
13. Layout performance
14. Hi, I’m Chris Wright. @cwrightdesign
22. 10 year old CSS files
23. Simplicity
24. Abstract layout
25. Separation of layout and component
26. Separation of layout and component
27. But doesn’t solve what happens inside the component
28. Content-based breakpoint approach
29. 9 Media Queries + more
30. Content breakpoints can become unmanageable
31. Most frameworks approach this problem focused on devices
32. Bootstrap’s approach
33. Foundation’s approach
36. Problem: Forcing components to respond to screen size
37. Components dependent on viewport, are brittle.
38. As web designers, we’re not designing around content,but rather we’re designing places for content to flow into. - Mark Boulton
39. Component flow
40. A component should only need to respond to its available space, not the viewport size
41. Flex row-wrap
44. Not quite what we wanted
48. With Flex grow
49. Our first breakpoint, is defined by the elements 20 + 30 rem = 50rem
50. Has more than 50 rems available
51. Less than 50 rems
52. What do we do if there is say, 80 rems available?
53. Enter CSS Columns
54. Creates a new column every 20em
56. 80 rems - our second breakpoint
57. 100 rems - our third breakpoint
59. A point of clarification before we move on
60. Components with a number of items
62. Flex shrink gives up space when there is not enough
66. Any number of items: column wrapping
67. Any number of items: column wrapping
68. Any number of items: column wrapping
69. Any number of items: column wrapping
73. Flex box pagination: Any number of items horizontally
75. Nested Equal columns
78. 1: Flex the list item
80. 2: Make the card a column
82. 3: Add flex grow to the content
85. Flexbox chronology
88. Source order shifting
89. Source order shifting
90. http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
91. “Authors must use order only for visual, not logical, reordering of content.” - The spec
92. Use for presentational elements that won’t be missed if they’re not there
93. One case for source ordering we’ve used in the past with floats
96. Display : contents
98. 1 2 3
99. 1 2 3
100. 1 2 3 2 1
101. 1 2 2 1 3
102. Embracing new features without fear
103. A journey from float to CSS Grid
104. Minimum effort, progressive enhancement
105. Build the way you always did
106. Good layout starts with semantic HTML
110. Add flex layer
113. Add grid layer
118. Clarification on shorthand
122. CSS Grid: Accessibility concerns
123. Don’t sacrifice the user experience for the developer convenience
124. Simplifying feature detection
125. Won’t trigger until display is set
128. Cutting the mustard: CSS Style
129. Feature detection, legacy & buggy implementation
130. 9/13 bugs listed on Flexbugs are IE 10 & 11
131. Breaking layout
132. Sometimes the wacky stuff is where the great discoveries are
136. 350 350 whatever is left
137. 1fr = 1 fraction of available space
139. minmax(smallest it can be, largest it can be)
141. Flexbox offsets & Margins
144. Justify-content: flex-end
146. Logo: Margin-right: auto https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.6bdkjmcbc
153. CSS Grid offsets
157. First, lets simplify a bit
159. Sensible defaults: 1 unit each axis
160. Get asymmetrical
162. Margins let you break out of CSS Grid
165. 50% 50%
168. When trying to create precision, it didn’t feel very elegant or very web-like
170. Part of the problem was how I started this experiment: Grid-first
171. Get burnt early, learn quicker
172. Flexbox vs responsive images
176. No.
179. Intrinsic sizing vs Flex
184. Same technique: Intrinsic Iframes
185. Layout performance
188. Okay…
191. Benchmark: 3500 dom nodes, 200 list items
192. Test: Trigger layout Average: Modern Flexbox was 0.7ms faster than float
193. Test: Page load Average: Flexbox was 1.2ms slower than Float
194. Test: Add 100 Items Average: Flexbox was 0.5ms slower than Float
195. Most layout techniques yielded similar results
196. http://goo.gl/SJrRXG
197. Quick recap
198. Simplifying complexity
199. Component independence from screen
200. Using the media query for its purpose
201. Progressively enhanced layout
202. Starting with what works reduces fear of the new
203. Breaking layout to understand it
204. Thankyou @cwrightdesign