Designing with Grid — An Event Apart Denver

Transcript

1. Designing With Grid
   An Event Apart Denver 2017
   @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. Designing custom layout palettes
    is the key to the next
    major phase of web design.
    

    View Slide

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

    View Slide

47. 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

48. This new CSS
    changes everything
    in web layout.
    

    View Slide

49. CSS Grid
    

    View Slide

50. Nature of
    CSS Grid
    

    View Slide

51. (Let s bust some assumptions)
    ’
    

    View Slide

52. explicit vs. implicit
    

    View Slide

53. 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

54. Place each #em 

    into a specific 

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

    View Slide

55. Rows *and* Columns
    

    View Slide

56. ROWS!!!!!!!!!!!
    

    View Slide

57. View Slide

58. View Slide

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

    View Slide

60. View Slide

61. View Slide

62. Content sized by
    the size of a track.
    

    View Slide

63. Tracks sized by
    the size of content.
    

    View Slide

64. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part
    

    View Slide

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

    View Slide

66. View Slide

67. View Slide

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

    View Slide

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

    View Slide

70. View Slide

71. View Slide

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

    View Slide

73. What shall we do
    with CSS Grid?
    

    View Slide

74. How do we know 

    where to put things?
    

    View Slide

75. View Slide

76. visual hierarchy
    

    View Slide

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

    View Slide

78. symmetry
    

    View Slide

79. asymmetry
    

    View Slide

80. symmetry
    

    View Slide

81. asymmetry
    

    View Slide

82. proxim#y
    

    View Slide

83. proxim#y
    

    View Slide

84. dens#y
    

    View Slide

85. dens#y
    

    View Slide

86. 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
    “
    Abstract, Art of Design, season 1 episode 7
    

    View Slide

87. Graphic design principles
    to the web
    

    View Slide

88. Graphic design principles
    of the web
    

    View Slide

89. labs.jensimmons.com
    

    View Slide

90. What I’ve Discovered
    in Six parts
    

    View Slide

91. 1. Overlap
    

    View Slide

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

    View Slide

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

    View Slide

94. View Slide

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

    View Slide

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

    View Slide

97. labs.jensimmons.com/2017/01-018.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. storyboards
     

     View Slide

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

     View Slide

112. View Slide

113. View Slide

114. Fixed Size
     

     View Slide

115. Responsive Web Design
     

     View Slide

116. The New Flexibility
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

120. Grid rows & columns
     Alignment
     Viewport Units
     

     View Slide

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

     View Slide

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

     View Slide

123. Viewport Units
     50vmin
     100vh
     

     View Slide

124. View Slide

125. View Slide

126. Framing
     

     View Slide

127. View Slide

128. View Slide

129. View Slide

130. Filmic Language
     

     View Slide

131. Webic Language
     

     View Slide

132. What does it mean to have a 

     reading experience with a frame, 

     where things move in and out 

     of that frame?
     

     View Slide

133. What does it mean to have an 

     interaction experience with a frame, 

     where things move in and out 

     of that frame?
     

     View Slide

134. The Viewport
     

     View Slide

135. 3. White Space
     

     View Slide

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

     View Slide

137. View Slide

138. View Slide

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

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. 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

150. View Slide

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

     View Slide

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

     View Slide

153. View Slide

154. Grid like a Modernist?
     

     View Slide

155. White Space
     

     View Slide

156. 4. Verticality
     

     View Slide

157. View Slide

158. View Slide

159. View Slide

160. 4. Verticality
     

     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. View Slide

173. View Slide

174. photo by Fan Ho
     

     View Slide

175. photo by Fan Ho
     

     View Slide

176. photos by Fan Ho
     

     View Slide

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

     View Slide

178. View Slide

179. Verticality
     

     View Slide

180. 5. Flexibility
     

     View Slide

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

     View Slide

182. View Slide

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

     View Slide

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

     View Slide

185. View Slide

186. View Slide

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

     View Slide

188. View Slide

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

     View Slide

190. View Slide

191. View Slide

192. View Slide

193. View Slide

194. View Slide

195. fr unit = “fraction”
     

     View Slide

196. View Slide

197. 100%
     33% 33% 33%
     

     View Slide

198. 100%
     33.33333% 33.33333% 33.33333%
     

     View Slide

199. 100%
     33.33333% 33.33333% 33.33333%
     

     View Slide

200. 33.33333% 33.33333% 33.33333%
     100%
     2% 2%
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

204. .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

205. .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

206. 100%
     1fr 1fr 1fr
     2em 2em
     

     View Slide

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

     View Slide

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

     View Slide

209. 100px 1fr 1fr
     1fr 1fr
     100px
     

     View Slide

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

     View Slide

211. 6fr 2.4fr
     1fr 2.4fr 2fr
     

     View Slide

212. View Slide

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

     View Slide

214. minmax()
     

     View Slide

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

     View Slide

216. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

220. View Slide

221. “pixel perfect ”
     

     View Slide

222. Not Your Father’s Web Design
     Ethan’s
     Responsive
     

     View Slide

223. %
     

     View Slide

224. Program the flexibility model.
     

     View Slide

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

     View Slide

226. Flexibility
     

     View Slide

227. 6. Creativity
     

     View Slide

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

     View Slide

229. View Slide

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

     View Slide

231. Time to play.

     Time to learn.
     

     View Slide

232. View Slide

233. nightly.mozilla.org
     

     View Slide

234. www.layout.land
     

     View Slide

235. labs.jensimmons.com
     

     View Slide

236. Modern Layouts: 

     Getting Out of Our Ruts
     Revolutionize Your Page: 

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

     View Slide

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

     View Slide

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

     View Slide

239. Time to explore.
     

     View Slide

240. A basic design is
     functional. 

     A great one will 

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

     View Slide

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

     View Slide