Next level layout

C44f47e1f9bcc969d1b873aca4211c46?s=47 Chris wright
March 16, 2016

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.

C44f47e1f9bcc969d1b873aca4211c46?s=128

Chris wright

March 16, 2016
Tweet

Transcript

  1. None
  2. Next Layout level

  3. None
  4. The last 10 years

  5. Increase in complexity

  6. The rise of CSS Preprocessors

  7. The ubiquitous framework

  8. …and CSS Methodologies

  9. None
  10. Simplicity

  11. Embrace the new without fear

  12. Breaking layout

  13. Layout performance

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

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  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

  34. None
  35. None
  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

  42. None
  43. None
  44. Not quite what we wanted

  45. None
  46. None
  47. None
  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

  55. None
  56. 80 rems - our second breakpoint

  57. 100 rems - our third breakpoint

  58. None
  59. A point of clarification before we move on

  60. Components with a number of items

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

  63. None
  64. None
  65. None
  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

  70. None
  71. None
  72. None
  73. Flex box pagination: Any number of items horizontally

  74. None
  75. Nested Equal columns

  76. None
  77. None
  78. 1: Flex the list item

  79. None
  80. 2: Make the card a column

  81. None
  82. 3: Add flex grow to the content

  83. None
  84. None
  85. Flexbox chronology

  86. None
  87. None
  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
  94. None
  95. None
  96. Display : contents

  97. None
  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

  107. None
  108. None
  109. None
  110. Add flex layer

  111. None
  112. None
  113. Add grid layer

  114. None
  115. None
  116. None
  117. None
  118. Clarification on shorthand

  119. None
  120. None
  121. None
  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

  126. None
  127. None
  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

  133. None
  134. None
  135. None
  136. 350 350 whatever is left

  137. 1fr = 1 fraction of available space

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

  140. None
  141. Flexbox offsets & Margins

  142. None
  143. None
  144. Justify-content: flex-end

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

  147. None
  148. None
  149. None
  150. None
  151. None
  152. None
  153. CSS Grid offsets

  154. None
  155. None
  156. None
  157. First, lets simplify a bit

  158. None
  159. Sensible defaults: 1 unit each axis

  160. Get asymmetrical

  161. None
  162. Margins let you break out of CSS Grid

  163. None
  164. None
  165. 50% 50%

  166. None
  167. None
  168. When trying to create precision, it didn’t feel very elegant

    or very web-like
  169. None
  170. Part of the problem was how I started this experiment:

    Grid-first
  171. Get burnt early, learn quicker

  172. Flexbox vs responsive images

  173. None
  174. None
  175. None
  176. No.

  177. None
  178. None
  179. Intrinsic sizing vs Flex

  180. None
  181. None
  182. None
  183. None
  184. Same technique: Intrinsic Iframes

  185. Layout performance

  186. None
  187. None
  188. Okay…

  189. None
  190. None
  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