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

1. View Slide

2. Next
   Layout
   level
   

   View Slide

3. View Slide

4. The last
   10 years
   

   View Slide

5. Increase in
   complexity
   

   View Slide

6. The rise of CSS Preprocessors
   

   View Slide

7. The ubiquitous framework
   

   View Slide

8. …and CSS Methodologies
   

   View Slide

9. View Slide

10. Simplicity
    

    View Slide

11. Embrace the new without fear
    

    View Slide

12. Breaking layout
    

    View Slide

13. Layout performance
    

    View Slide

14. Hi, I’m Chris Wright.
    @cwrightdesign
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. 10 year old CSS files
    

    View Slide

23. Simplicity
    

    View Slide

24. Abstract layout
    

    View Slide

25. Separation of layout and component
    

    View Slide

26. Separation of layout and component
    

    View Slide

27. But doesn’t solve what happens
    inside the component
    

    View Slide

28. Content-based breakpoint approach
    

    View Slide

29. 9 Media Queries + more
    

    View Slide

30. Content breakpoints
    can become unmanageable
    

    View Slide

31. Most frameworks approach
    this problem focused on devices
    

    View Slide

32. Bootstrap’s approach
    

    View Slide

33. Foundation’s approach
    

    View Slide

34. View Slide

35. View Slide

36. Problem:
    Forcing components to respond to screen size
    

    View Slide

37. Components dependent on viewport, are brittle.
    

    View Slide

38. As web designers, we’re not designing
    around content,but rather we’re designing
    places for content to flow into.
    - Mark Boulton
    

    View Slide

39. Component flow
    

    View Slide

40. A component should only need to respond
    to its available space, not the viewport size
    

    View Slide

41. Flex row-wrap
    

    View Slide

42. View Slide

43. View Slide

44. Not quite
    what we wanted
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. With
    Flex grow
    

    View Slide

49. Our first breakpoint, is defined by
    the elements 20 + 30 rem = 50rem
    

    View Slide

50. Has more than 50 rems available
    

    View Slide

51. Less than 50 rems
    

    View Slide

52. What do we do if there is say,
    80 rems available?
    

    View Slide

53. Enter CSS Columns
    

    View Slide

54. Creates a new column every 20em
    

    View Slide

55. View Slide

56. 80 rems - our second breakpoint
    

    View Slide

57. 100 rems - our third breakpoint
    

    View Slide

58. View Slide

59. A point of clarification before we move on
    

    View Slide

60. Components with a number of items
    

    View Slide

61. View Slide

62. Flex shrink gives up space when there is not enough
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. Any number of items: column wrapping
    

    View Slide

67. Any number of items: column wrapping
    

    View Slide

68. Any number of items: column wrapping
    

    View Slide

69. Any number of items: column wrapping
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. Flex box pagination: Any number of items horizontally
    

    View Slide

74. View Slide

75. Nested Equal columns
    

    View Slide

76. View Slide

77. View Slide

78. 1: Flex the list item
    

    View Slide

79. View Slide

80. 2: Make the card
    a column
    

    View Slide

81. View Slide

82. 3: Add flex grow
    to the content
    

    View Slide

83. View Slide

84. View Slide

85. Flexbox chronology
    

    View Slide

86. View Slide

87. View Slide

88. Source order shifting
    

    View Slide

89. Source order
    shifting
    

    View Slide

90. http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
    

    View Slide

91. “Authors must use order only for visual, not logical,
    reordering of content.” - The spec
    

    View Slide

92. Use for presentational elements
    that won’t be missed if they’re not there
    

    View Slide

93. One case for source ordering
    we’ve used in the past with floats
    

    View Slide

94. View Slide

95. View Slide

96. Display :
    contents
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. 1
     2 3
     2
     1
     

     View Slide

101. 1
     2 2
     1
     3
     

     View Slide

102. Embracing new features without fear
     

     View Slide

103. A journey from float to CSS Grid
     

     View Slide

104. Minimum effort, progressive enhancement
     

     View Slide

105. Build the way you always did
     

     View Slide

106. Good layout starts with semantic HTML
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. Add flex layer
     

     View Slide

111. View Slide

112. View Slide

113. Add grid layer
     

     View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. Clarification on shorthand
     

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. CSS Grid: Accessibility concerns
     

     View Slide

123. Don’t sacrifice the user experience
     for the developer convenience
     

     View Slide

124. Simplifying feature detection
     

     View Slide

125. Won’t trigger until display is set
     

     View Slide

126. View Slide

127. View Slide

128. Cutting the mustard: CSS Style
     

     View Slide

129. Feature detection,
     legacy & buggy implementation
     

     View Slide

130. 9/13 bugs
     listed on
     Flexbugs
     are IE 10 & 11
     

     View Slide

131. Breaking layout
     

     View Slide

132. Sometimes the wacky stuff
     is where the great discoveries are
     

     View Slide

133. View Slide

134. View Slide

135. View Slide

136. 350 350
     whatever
     is left
     

     View Slide

137. 1fr = 1 fraction of available space
     

     View Slide

138. View Slide

139. minmax(smallest it can be, largest it can be)
     

     View Slide

140. View Slide

141. Flexbox offsets & Margins
     

     View Slide

142. View Slide

143. View Slide

144. Justify-content: flex-end
     

     View Slide

145. View Slide

146. Logo: Margin-right: auto
     https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.6bdkjmcbc
     

     View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. View Slide

153. CSS Grid offsets
     

     View Slide

154. View Slide

155. View Slide

156. View Slide

157. First, lets simplify a bit
     

     View Slide

158. View Slide

159. Sensible defaults: 1 unit each axis
     

     View Slide

160. Get asymmetrical
     

     View Slide

161. View Slide

162. Margins let you
     break out of CSS Grid
     

     View Slide

163. View Slide

164. View Slide

165. 50% 50%
     

     View Slide

166. View Slide

167. View Slide

168. When trying to create precision,
     it didn’t feel very elegant
     or very web-like
     

     View Slide

169. View Slide

170. Part of the problem was how
     I started this experiment: Grid-first
     

     View Slide

171. Get burnt early, learn quicker
     

     View Slide

172. Flexbox vs responsive images
     

     View Slide

173. View Slide

174. View Slide

175. View Slide

176. No.
     

     View Slide

177. View Slide

178. View Slide

179. Intrinsic sizing vs Flex
     

     View Slide

180. View Slide

181. View Slide

182. View Slide

183. View Slide

184. Same technique: Intrinsic Iframes
     

     View Slide

185. Layout performance
     

     View Slide

186. View Slide

187. View Slide

188. Okay…
     

     View Slide

189. View Slide

190. View Slide

191. Benchmark:
     3500 dom nodes, 200 list items
     

     View Slide

192. Test: Trigger layout
     Average: Modern Flexbox was 0.7ms faster than float
     

     View Slide

193. Test: Page load
     Average: Flexbox was 1.2ms slower than Float
     

     View Slide

194. Test: Add 100 Items
     Average: Flexbox was 0.5ms slower than Float
     

     View Slide

195. Most layout
     techniques
     yielded
     similar results
     

     View Slide

196. http://goo.gl/SJrRXG
     

     View Slide

197. Quick recap
     

     View Slide

198. Simplifying complexity
     

     View Slide

199. Component independence from screen
     

     View Slide

200. Using the media query for its purpose
     

     View Slide

201. Progressively enhanced layout
     

     View Slide

202. Starting with what works
     reduces fear of the new
     

     View Slide

203. Breaking layout to understand it
     

     View Slide

204. Thankyou
     @cwrightdesign
     

     View Slide