Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing with Grid — for UIE's All You Can Learn

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
March 23, 2017

Designing with Grid — for UIE's All You Can Learn

Find a video of this presentation at: https://aycl.uie.com

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

March 23, 2017
Tweet

Transcript

  1. DESIGNING WITH GRID JEN SIMMONS 2017

  2. CSS Grid

  3. The Kiss, 1896

  4. None
  5. our medium is not done

  6. layout design

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. A C B A C B A C B A

    C B
  36. None
  37. None
  38. None
  39. None
  40. drawing by Dave Ellis novolume.co.uk

  41. None
  42. None
  43. None
  44. None
  45. None
  46. The Official Timeline of Web Page Layout

  47. CSS Grid Flexbox Alignment Multicolumn Writing Modes

  48. Object Fit Initial Letter Viewport Units Clip path & Masking

    Shape outside Transforms
  49. CSS Grid Basics

  50. labs.jensimmons.com

  51. labs.jensimmons.com/2017/01-003.html

  52. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); // nothing

    about rows } .item { // nothing about item placement }
  53. Container Item Item Item

  54. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; }
  55. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }
  56. 1. Vertical White Space

  57. “ — The Vignelli Canon Great designs can be achieved

    without the use of 
 the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.
  58. The Vignelli Canon

  59. None
  60. explicit vs. implicit

  61. You define !e size and/or number of rows and/or columns

    Let !e browser define number or size of rows (or columns)
  62. Place each "em 
 into a specific 
 cell or

    area Let !e browser place every!ing using auto-placement algor"hm
  63. labs.jensimmons.com/2017/01-003.html

  64. ul { display: grid; grid-template-columns: repeat(5, 16vw); grid-template-rows: repeat(12, 16vw);

    grid-gap: 2vw; } li:nth-child(1) { grid-row-start: 1; grid-column-start: 2; }
  65. 1 2 3 4 5 6 Grid Line Numbers Line

    Numbers, not track numbers — different than what we are used to! 1 2 3 4 5
  66. 1 2 3 4 5 6 grid-column: 1 / 2;

    grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
  67. .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;}

    .item { grid-column: 2 / 4; grid-row: 1 / 3; } .item { grid-area: 1 / 2 / 3 / 4; } 1 2 3 4 grid-column: 2 / 4; grid-row: 1 / 3; 1 2 3 4 5
  68. None
  69. labs.jensimmons.com/2017/01-003.html

  70. None
  71. 2. Overlap

  72. li:nth-child(1) { grid-row: 1 / 4; grid-column: 1 / 4;

    } li:nth-child(2) { grid-row: 3 / 6; grid-column: 3 / 6; }
  73. labs.jensimmons.com/2017/01-003.html

  74. From Michael Bierut, How To

  75. 3, The Viewport

  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. storyboards

  89. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed

    by Stanley Kubrick. Storyboards created by Saul Bass.
  90. None
  91. None
  92. None
  93. None
  94. None
  95. labs.jensimmons.com/2017/01-010.html

  96. labs.jensimmons.com/2017/01-008.html

  97. Alignment Viewport Units

  98. start center end align-items:

  99. start center end justify-items:

  100. None
  101. None
  102. Viewport Units 50vh 25vh 50vw 25vh 50vw

  103. Viewport Units 50vmin 100vh

  104. Framing

  105. None
  106. None
  107. None
  108. None
  109. what does it mean to have a 
 reading experience

    with 
 a frame, where things move in and out of that frame?
  110. what does it mean to have a 
 interaction experience

    with a frame, where things move in and out of that frame?
  111. The Viewport

  112. 4. Flexibility

  113. px em % pixels (or rem) percents 60px 10em 20%

  114. min-content max-content 1fr

  115. None
  116. None
  117. None
  118. None
  119. None
  120. This is a phrase with several words. This is a

    phrase with several words. This is a phrase with several words.
  121. None
  122. None
  123. None
  124. fr unit = “fraction”

  125. None
  126. 100% 33% 33% 33%

  127. 100% 33% 33% 33% 2% 2%

  128. 100% 32% 32% 32% 2% 2% 100% – 4% =

    96% = 32% 3 3
  129. 100% 32% 32% 32% 2em 2em @media (min-width: 600px) {

    .box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}
  130. 100% 1fr 1fr 1fr 2em 2em

  131. 100px 1fr 1fr 1fr 1fr 100px

  132. 2fr 1fr 50px 1fr min-content

  133. 3fr 1.2fr 0.5fr 1.2fr 1fr

  134. markboulton.co.uk/journal/five-simple-steps-to- designing-grid-systems-part-1

  135. None
  136. alistapart.com/article/content-out-layout

  137. None
  138. Verticality

  139. None
  140. None
  141. Density

  142. Asymmetry

  143. None
  144. Visual Hierarchy

  145. None
  146. None
  147. None
  148. None
  149. None
  150. None
  151. Practical: Card Layouts

  152. labs.jensimmons.com/2017/01-009.html

  153. FAQ: Flexbox vs. CSS Grid?

  154. Flexbox lines things up
 in one direction

  155. Grid lines things up
 in two directions

  156. Grid

  157. Grid

  158. Flexbox

  159. Flexbox

  160. Flexbox

  161. Grid Flexbox

  162. Grid

  163. None
  164. Both superpowers are useful. Which do you want?

  165. FAQ: What about IE?

  166. None
  167. None
  168. None
  169. None
  170. None
  171. // simplified layout // for older browsers @supports (display: grid)

    { // code for newer browsers // including overrides }
  172. None
  173. hacks.mozilla.org/2016/08/using-feature-queries-in-css

  174. None
  175. None
  176. rachelandrew.co.uk/archives/2016/11/26/should-i-try- to-use-the-ie-implementation-of-css-grid-layout

  177. developer.microsoft.com/en-us/microsoft-edge/platform/status/gridupdate/?q=grid%20update

  178. wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid

  179. For more…

  180. labs.jensimmons.com

  181. None
  182. None
  183. None
  184. None
  185. None
  186. labs.jensimmons.com

  187. jensimmons.com/post/feb-27-2017/learn-css-grid

  188. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
  189. www.layout.land

  190. jensimmons.com @jensimmons layout.land labs.jensimmons.com