Changing the layout game

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.

C44f47e1f9bcc969d1b873aca4211c46?s=128

Chris wright

May 26, 2017
Tweet

Transcript

  1. None
  2. Hello Warszawa!

  3. None
  4. Hi, I’m Chris Wright @cwrightdesign

  5. Sydney, Australia

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

  15. None
  16. None
  17. Complex

  18. The clearfix hack

  19. The media query

  20. None
  21. 2001

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

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

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

  44. None
  45. None
  46. None
  47. None
  48. Total of 2 fr units Each is worth 1 /

    2 fr units
  49. None
  50. None
  51. Create white space

  52. None
  53. None
  54. Across rows and columns

  55. None
  56. grid-column: span 2;

  57. None
  58. We can break out of the grid

  59. None
  60. None
  61. None
  62. None
  63. Building up complex grids

  64. None
  65. None
  66. None
  67. None
  68. Flexible complex grids

  69. None
  70. None
  71. None
  72. None
  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

  79. None
  80. None
  81. Quantity queries and Grid

  82. None
  83. None
  84. None
  85. Components moving toward

  86. From static pages to static devices

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

  93. None
  94. None
  95. Define once, use anywhere

  96. Available space is the constraint

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

  98. None
  99. Media queries evolved

  100. min-width (30 em) default component

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

  115. None
  116. None
  117. Multi columns

  118. Multi columns column-width: 600px

  119. Multi columns column-width: 600px

  120. Multi columns column-width: 600px

  121. Flexbox + Columns

  122. None
  123. None
  124. columns: 300px

  125. columns: 300px

  126. None
  127. Grid: Auto-fit and auto-fill

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

  132. None
  133. None
  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

  143. None
  144. None
  145. None
  146. In the browser

  147. None
  148. None
  149. None
  150. The problem with reporting element size directly

  151. None
  152. CSS can’t range match a selector

  153. None
  154. Communicate shape

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

  161. None