$30 off During Our Annual Pro Sale. View Details »

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.

Chris wright

May 26, 2017
Tweet

More Decks by Chris wright

Other Decks in Programming

Transcript

  1. View Slide

  2. Hello Warszawa!

    View Slide

  3. View Slide

  4. Hi, I’m Chris Wright
    @cwrightdesign

    View Slide

  5. Sydney,
    Australia

    View Slide

  6. View Slide

  7. View Slide

  8. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea

    View Slide

  9. layout
    Changing
    the game

    View Slide

  10. How we
    solve problems

    View Slide

  11. create the features tomorrow
    Features today

    View Slide

  12. Potential

    View Slide

  13. Unique

    View Slide

  14. Looking back

    View Slide

  15. View Slide

  16. View Slide

  17. Complex

    View Slide

  18. The clearfix hack

    View Slide

  19. The media query

    View Slide

  20. View Slide

  21. 2001

    View Slide

  22. View Slide

  23. Fluid image hack
    One defined dimension
    preserves aspect ratio

    View Slide

  24. Fluid image hack
    One defined dimension
    preserves aspect ratio

    View Slide

  25. Compressive images
    Images at double size with full
    compression
    https://www.filamentgroup.com/lab/compressive-images.html

    View Slide

  26. We make the craziest hacks

    View Slide

  27. Hacks create impact

    View Slide

  28. Compressive images
    Fluid image hack
    Clearfix hack

    View Slide

  29. Compressive images
    Fluid image hack
    Clearfix hack

    View Slide

  30. Compressive images Sizes, Picture
    Fluid image hack Object-fit
    Clearfix hack Display: flowroot

    View Slide

  31. Hacks are our desire paths

    View Slide

  32. View Slide

  33. hacks
    are a creative use of features
    Brilliant

    View Slide

  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

    View Slide

  35. Quantity queries
    Combining nth selector
    with general sibling
    https://alistapart.com/article/quantity-queries-for-css

    View Slide

  36. Dirty hacks
    Browser isolation

    View Slide

  37. Hacks that
    never leave

    View Slide

  38. Our needs often
    grow beyond our tools

    View Slide

  39. Layout is always hacked

    View Slide

  40. View Slide

  41. 60+ lines of code to define
    column behaviour
    Flexbox grid example

    View Slide

  42. 35+ lines of code anytime
    you touch a media query
    Flexbox grid example

    View Slide

  43. Now we have declarative grids

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. Total of 2 fr units
    Each is worth 1 / 2 fr units

    View Slide

  49. View Slide

  50. View Slide

  51. Create white space

    View Slide

  52. View Slide

  53. View Slide

  54. Across rows and columns

    View Slide

  55. View Slide

  56. grid-column: span 2;

    View Slide

  57. View Slide

  58. We can break out of the grid

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. Building up complex grids

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Flexible complex grids

    View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. Simpler with
    Variables

    View Slide

  74. Define how columns and spans collapse across viewports

    View Slide

  75. Define how columns and spans collapse across viewports

    View Slide

  76. Variables create relationships between values

    View Slide

  77. Experimentation with values

    View Slide

  78. Creating offsets

    View Slide

  79. View Slide

  80. View Slide

  81. Quantity queries and Grid

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. Components
    moving toward

    View Slide

  86. From static pages to static devices

    View Slide

  87. View Slide

  88. http://v3.danielmall.com/articles/content-display-patterns/

    View Slide

  89. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

    View Slide

  90. Increased complexity,
    poorer maintainability

    View Slide

  91. Average: 264 Media queries
    Over 50 Websites

    View Slide

  92. Media queries are restricted
    to viewports and media types

    View Slide

  93. View Slide

  94. View Slide

  95. Define once, use anywhere

    View Slide

  96. Available space is the constraint

    View Slide

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

    View Slide

  98. View Slide

  99. Media queries
    evolved

    View Slide

  100. min-width (30 em)
    default component

    View Slide

  101. View Slide

  102. Problems

    View Slide

  103. Infinite loops

    View Slide

  104. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
    CSS Parsing

    View Slide

  105. Autonomous layout

    View Slide

  106. Flexbox

    View Slide

  107. Flex wrap: Two fixed widths
    320px 480px = 800px
    +

    View Slide

  108. Less than 800px space available

    View Slide

  109. Flex-grow: 1

    View Slide

  110. In practice

    View Slide

  111. The flex-grow: 9999 variant
    http://joren.co/flex-grow-9999-hack/

    View Slide

  112. flex: 99999
    flex: 1
    Only one has room to grow

    View Slide

  113. flex: 99999
    flex: 1
    Only one has room to grow

    View Slide

  114. flex: 99999
    flex: 1

    View Slide

  115. View Slide

  116. View Slide

  117. Multi columns

    View Slide

  118. Multi columns
    column-width: 600px

    View Slide

  119. Multi columns
    column-width: 600px

    View Slide

  120. Multi columns
    column-width: 600px

    View Slide

  121. Flexbox + Columns

    View Slide

  122. View Slide

  123. View Slide

  124. columns: 300px

    View Slide

  125. columns: 300px

    View Slide

  126. View Slide

  127. Grid: Auto-fit and auto-fill

    View Slide

  128. View Slide

  129. Component based imagery

    View Slide

  130. SVG has its own
    document context

    View Slide

  131. SVG can also embed HTML
    https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

    View Slide

  132. View Slide

  133. View Slide

  134. http://jxnblk.com/fitter-happier-text/

    View Slide

  135. Fluid Typography

    View Slide

  136. https://www.smashingmagazine.com/2016/05/fluid-typography/

    View Slide

  137. Font-size: 50ctw
    (not real CSS, I wish)

    View Slide

  138. ResizeObserver

    View Slide

  139. We can use CSS Variables to communicate

    View Slide

  140. Getting variables via JS

    View Slide

  141. Setting variables via JS

    View Slide

  142. Container based
    fluid typography

    View Slide

  143. View Slide

  144. View Slide

  145. View Slide

  146. In the browser

    View Slide

  147. View Slide

  148. View Slide

  149. View Slide

  150. The problem with
    reporting element size directly

    View Slide

  151. View Slide

  152. CSS can’t range match a selector

    View Slide

  153. View Slide

  154. Communicate shape

    View Slide

  155. View Slide

  156. An preview might exist with different shapes
    http://lincolnloop.github.io/element-queries-example/

    View Slide

  157. Feedback

    View Slide

  158. Experiment

    View Slide

  159. Make visible

    View Slide

  160. Thank you

    View Slide

  161. View Slide