Designing with Grid — An Event Apart San Francisco

Transcript

1. Designing With Grid
   An Event Apart San Francisco
   @jenSimmons
   

   View Slide

2. CSS Grid
   

   View Slide

3. The Kiss, 1896
   

   View Slide

4. View Slide

5. Our medium is not done
   

   View Slide

6. Layout on the web
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. photo by Brad Frost, 2012, CC BY 2.0
    

    View Slide

34. View Slide

35. A
    C
    B
    A C
    B
    A
    C
    B
    A
    C
    B
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. starter-kit
    framework
    

    View Slide

41. Nicole Sullivan
    2008
    Ana Debenham
    2011
    Brad Frost
    2013
    D!igning Systems of Components
    

    View Slide

42. BUTTON
    Headline 1
    Headline 2
    This is a paragraph of text. Do we
    like how this works? Yes, please. Ok.
    Do all the text like this.
    BUTTON
    BUTTON
    Headline 1
    This is a paragraph of text. Do we
    like how this works? Yes, please. Ok.
    Do all the text like this.
    BUTTON
    

    View Slide

43. Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline Headline Headline
    

    View Slide

44. color palette
    typography palette
    layout palette
    

    View Slide

45. The Official Timeline of Web Page Layout
    The
    No-Layout
    Layout
    Table-based
    Layouts
    Hand-coded
    Float Layouts
    Framework
    Layouts Amazing
    Future!
    

    View Slide

46. CSS Grid
    Flexbox
    Alignment
    Writing Modes
    Multicolumn
    Viewport Units
    Transforms
    Object Fit
    Clip-path
    Masking
    Shape-outside
    Initial-letter
    Flow
    Floats
    Block
    Inline
    Inline-block
    Display:table
    Margin
    Negative margins
    Padding
    everything else
    in CSS
    

    View Slide

47. This new CSS
    changes everything
    in web layout.
    

    View Slide

48. CSS Grid
    

    View Slide

49. Nature of
    CSS Grid
    

    View Slide

50. (Let s bust some assumptions)
    ’
    

    View Slide

51. explicit vs. implicit
    

    View Slide

52. You define
    "e size and/or
    number of rows
    and/or
    columns
    Let "e browser
    define number or
    size of rows
    or columns
    

    View Slide

53. Place each #em 

    into a specific 

    cell or area
    Let "e browser
    place each
    #em using
    auto-placement
    algor#hm
    

    View Slide

54. Rows *and* Columns
    

    View Slide

55. ROWS!!!!!!!!!!!
    

    View Slide

56. View Slide

57. View Slide

58. Tracks don’t have to all
    be the same size.
    

    View Slide

59. View Slide

60. View Slide

61. Content sized by
    the size of a track.
    

    View Slide

62. Tracks sized by
    the size of content.
    

    View Slide

63. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part
    

    View Slide

64. Content doesn’t have
    to fill a track.
    

    View Slide

65. View Slide

66. View Slide

67. start center end
    justify-items:
    s t r e t c h
    

    View Slide

68. start
    center
    end
    align-items:
    s
    t
    r
    e
    t
    c
    h
    

    View Slide

69. View Slide

70. View Slide

71. You can use Grid
    to line things up.
    Or not.
    

    View Slide

72. What shall we do
    with CSS Grid?
    

    View Slide

73. How do we know 

    where to put things?
    

    View Slide

74. View Slide

75. visual hierarchy
    

    View Slide

76. visual hierarchy
    Lorem ipsum dolor sit amet
    FUSCE UT TURPIS SIT AMET
    

    View Slide

77. symmetry
    

    View Slide

78. asymmetry
    

    View Slide

79. symmetry
    

    View Slide

80. asymmetry
    

    View Slide

81. proxim#y
    

    View Slide

82. proxim#y
    

    View Slide

83. dens#y
    

    View Slide

84. dens#y
    

    View Slide

85. My deep respect for form and
    positive and negative space comes
    from studying Frank Lloyd Wright ’s
    idea of compression and expansion.
    You walk into a F.L.W. building and
    the entrance way is so small it
    makes you almost dip your head.
    And then as soon as you walk into
    the main room, he blows up the
    space, and it makes you feel ‘oh,
    that ’s so good’.
    — Platon, photographer
    “
    

    View Slide

86. Graphic design for the web
    

    View Slide

87. Graphic design of the web
    

    View Slide

88. labs.jensimmons.com
    

    View Slide

89. What I’ve Discovered
    in Six parts
    

    View Slide

90. 1. Overlap
    

    View Slide

91. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
    

    View Slide

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

    View Slide

93. View Slide

94. labs.jensimmons.com/2017/01-002.html
    

    View Slide

95. labs.jensimmons.com/2017/01-002.html
    

    View Slide

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

    View Slide

97. labs.jensimmons.com/2017/02-001.html
    

    View Slide

98. Overlap
    

    View Slide

99. 2, The Viewport
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. storyboards
     

     View Slide

112. Storyboards for Star Wars,
     directed by George Lucas.
     Spartacus, directed by Stanley Kubrick.
     Storyboards created by Saul Bass.
     

     View Slide

113. View Slide

114. View Slide

115. View Slide

116. Grid rows & columns
     Alignment
     Viewport Units
     

     View Slide

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

     View Slide

118. labs.jensimmons.com/2017/01-010.html
     

     View Slide

119. Viewport Units
     50vh
     25vh
     50vw
     25vh
     50vw
     "at dang “fold”
     

     View Slide

120. Viewport Units
     50vmin
     100vh
     

     View Slide

121. View Slide

122. View Slide

123. Framing
     

     View Slide

124. View Slide

125. View Slide

126. View Slide

127. Filmic Language
     

     View Slide

128. Webic Language
     

     View Slide

129. what does it mean to have a 

     reading experience with 

     a frame, where things move
     in and out of that frame?
     

     View Slide

130. what does it mean to have a 

     interaction experience with
     a frame, where things move
     in and out of that frame?
     

     View Slide

131. View Slide

132. The Viewport
     

     View Slide

133. 3. White Space
     

     View Slide

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

     View Slide

135. View Slide

136. View Slide

137. “
     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.
     

     View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. 1. Control the size of the page? Nope.
     2. Line things up? Yes. Easy.
     3. Create white space? Yes, absolutely.
     4. Maintain aspect ratios? Nope. Not yet.
     

     View Slide

148. View Slide

149. labs.jensimmons.com/2017/01-021.html
     

     View Slide

150. labs.jensimmons.com/2017/01-021.html
     

     View Slide

151. View Slide

152. Grid like a Modernist?
     

     View Slide

153. White Space
     

     View Slide

154. 4. Verticality
     

     View Slide

155. View Slide

156. View Slide

157. View Slide

158. 4. Verticality
     

     View Slide

159. View Slide

160. View Slide

161. View Slide

162. View Slide

163. View Slide

164. View Slide

165. View Slide

166. View Slide

167. View Slide

168. View Slide

169. View Slide

170. View Slide

171. View Slide

172. photo by Fan Ho
     

     View Slide

173. photo by Fan Ho
     

     View Slide

174. photos by Fan Ho
     

     View Slide

175. labs.jensimmons.com/2017/01-020.html
     

     View Slide

176. View Slide

177. Verticality
     

     View Slide

178. 5. Flexibility
     

     View Slide

179. labs.jensimmons.com/2017/02-004.html
     

     View Slide

180. View Slide

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

     View Slide

182. min-content
     max-content
     fr
     minmax()
     

     View Slide

183. View Slide

184. View Slide

185. labs.jensimmons.com/2017/01-007.html
     

     View Slide

186. View Slide

187. This is a phrase with
     several words.
     This is
     a
     phrase
     with
     several
     words.
     This is a phrase with several words.
     

     View Slide

188. View Slide

189. View Slide

190. View Slide

191. View Slide

192. View Slide

193. fr unit = “fraction”
     

     View Slide

194. View Slide

195. 100%
     33% 33% 33%
     

     View Slide

196. 100%
     33.33333% 33.33333% 33.33333%
     

     View Slide

197. 100%
     33.33333% 33.33333% 33.33333%
     

     View Slide

198. 100%
     33% 33% 33%
     2% 2%
     

     View Slide

199. 100%
     32% 32% 32%
     2% 2%
     100% – 4% = 96% = 32%
     3 3
     

     View Slide

200. 100%
     31.333% 31.333% 31.333%
     3% 3%
     100% – 6% = 94% = 31.333%
     3 3
     

     View Slide

201. 100%
     31.666% 31.666% 31.666%
     2.5% 2.5%
     100% – 5% = 95% = 31.666666666666666%
     3 3
     

     View Slide

202. .box { width: calc(100-(2*2em)/3)%;}
     100%
     x% x% x%
     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)%;}}
     

     View Slide

203. 100%
     1fr 1fr 1fr
     2em 2em
     

     View Slide

204. 1fr 1fr 1fr
     2em 2em
     1fr + 1fr + 1fr = 3fr total
     therefore, 1fr = 1/3 of the space
     

     View Slide

205. 1fr 1fr 1fr
     2em 2em
     1fr + 1fr + 1fr + 1fr = 4fr total
     therefore, now 1fr = 1/4 of the space
     1fr
     2em
     

     View Slide

206. 100px 1fr 1fr
     1fr 1fr
     100px
     

     View Slide

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

     View Slide

208. 6fr 2.4fr
     1fr 2.4fr 2fr
     

     View Slide

209. View Slide

210. from alistapart.com/article/content-out-layout
     

     View Slide

211. minmax()
     

     View Slide

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

     View Slide

213. View Slide

214. .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     // nothing about rows
     }
     .item {
     // nothing about item placement
     }
     

     View Slide

215. labs.jensimmons.com/2017/01-016.html
     

     View Slide

216. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr;
     1fr 1fr
     100px 1fr
     minmax(40ch, 65ch)
     

     View Slide

217. View Slide

218. “pixel perfect ”
     

     View Slide

219. What happens when parts of
     the content / interface are ‘missing’?
     Or are shorter / longer
     than ‘ideal’?
     

     View Slide

220. Design the flexibility model.
     

     View Slide

221. Flexibility
     

     View Slide

222. 6. Creativity
     

     View Slide

223. labs.jensimmons.com/2017/01-004.html
     

     View Slide

224. View Slide

225. 1. Overlap
     2. The Viewport
     3. White Space
     4. Verticality
     5. Flexibility
     6. Creativity
     

     View Slide

226. Time to play.

     Time to learn.
     

     View Slide

227. nightly.mozilla.org
     

     View Slide

228. www.layout.land
     

     View Slide

229. labs.jensimmons.com
     

     View Slide

230. Modern Layouts: 

     Getting Out of Our Ruts
     Revolutionize Your Page: 

     Real Art Direction on the Web
     2015
     2016
     available on jensimmons.com
     

     View Slide

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

     View Slide

232. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
     

     View Slide

233. Time to explore.
     

     View Slide

234. A basic design is
     functional. 

     A great one will 

     say something.”
     — Tinker Hatfield,
     shoe designer for Nike
     “
     

     View Slide

235. jensimmons.com
     @jensimmons
     layout.land
     labs.jensimmons.com
     Thanks!
     

     View Slide