Designing Layouts: The New Superpowers of CSS at An Event Apart San Francisco

Transcript

1. DESIGNING
   LAYOUTS:
   THE NEW
   SUPERPOWERS OF CSS
   WITH JEN SIMMONS
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. The Cheongju Early Printing Museum, Korea — lindagoeseast.com/2015/09/14/a-visit-to-the-cheongju-early-printing-museum
   

   View Slide

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

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. CSS Grid
    Writing Modes
    

    View Slide

52. Today’s Plan
    

    View Slide

53. 9:00 – now Intro
    now – 10:00 Writing Modes
    10:00 – 10:10 Break
    10:10 – 11:00 Intro to CSS Grid
    11:00 – 11:10 Break
    11:10 - 12:00 More CSS Grid
    12:00 – 1:00 Lunch
    1:00 – 2:00 Using A Grid
    2:00 - 2:10 Break
    2:10 – 3:00 More
    3:00 – 3:10 Break
    3:10 - 4:00 Layout and the Medium of the Web
    

    View Slide

54. @JENSIMMONS
    

    View Slide

55. public.etherpad-mozilla.org/p/AEASF-links
    

    View Slide

56. public.etherpad-mozilla.org/p/AEASF-questions
    

    View Slide

57. labs.jensimmons.com/workshop
    

    View Slide

58. Writing Modes
    

    View Slide

59. View Slide

60. “
    — Bruce Lawson
    It’
    s the World Wide Web, not
    the Wealthy Western Web.
    

    View Slide

61. View Slide

62. View Slide

63. drafts.csswg.org/css-writing-modes-3
    

    View Slide

64. direction
    writing-mode
    text-orientation
    

    View Slide

65. inline direction
    When I’m writing or reading this is the way the characters flow
    

    View Slide

66. 
    
    
    
    block
    flow
    direction
    

    View Slide

67. LATIN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

68. View Slide

69. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

70. direction
    

    View Slide

71. .foo { direction: rtl; }
    .foo { direction: ltr; }
    

    View Slide

72. View Slide

73. 
    
    …
    …
    
    

    View Slide

74. English words
    
    ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا
    
    .foo { direction: rtl; }
    

    View Slide

75. English words
    
    .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا
    
    

    View Slide

76. English words in this paragraph.
    .تﺎﻤﻠﻜﻟ Some
    more LTR words, same paragraph.
    

    View Slide

77. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    .css {direction: rtl;}
    
    .css {direction: ltr;}
    
    

    View Slide

78. View Slide

79. View Slide

80. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

81. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

82. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    *Chinese, Japanese, Korean & more
    

    View Slide

83. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    *Chinese, Japanese, Korean & more
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    *Chinese, Japanese, Korean & more
    

    View Slide

89. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

90. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

91. MONGOLI
    inline direction
    

    View Slide

92. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction
    direction
    block
    inline direction
    

    View Slide

93. Top of
    page
    Top of
    characters
    hello
    

    View Slide

94. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    MONGOLIAN-BASED SYSTEMS
    direction
    block
    inline direction
    

    View Slide

95. SO FAR…
    

    View Slide

96. block
    direction
    inline direction
    

    View Slide

97. LATIN-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

98. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    

    View Slide

99. HAN-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    *Chinese, Japanese, Korean & more
    

    View Slide

100. MONGOLIAN-BASED SYSTEMS
     direction
     block
     inline direction
     

     View Slide

101. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
     block
     direction
     inline direction
     block
     direction
     inline direction
     .css {direction: rtl;}
     
     .css {direction: ltr;}
     
     

     View Slide

102. writing-mode
     

     View Slide

103. THREE OPTIONS FOR WRITING-MODE
     direction
     block
     inline direction
     writing-mode:
     vertical-lr;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     block
     direction
     inline direction
     toggle w/
     direction
     writing-mode:
     horizontal-tb;
     

     View Slide

104. View Slide

105. View Slide

106. h1:nth-child(2) {
     writing-mode: vertical-rl;
     }
     

     View Slide

107. THREE OPTIONS FOR WRITING-MODE
     direction
     block
     inline direction
     writing-mode:
     vertical-lr;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     block
     direction
     inline direction
     toggle w/
     direction
     writing-mode:
     horizontal-tb;
     

     View Slide

108. View Slide

109. h1:nth-child(2) {
     transform: rotate(90deg);
     }
     

     View Slide

110. View Slide

111. My Cool Website
     

     View Slide

112. WRITING-MODE
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     

     View Slide

113. My Cool Website
     

     View Slide

114. OPTIONS FOR VERTICAL WRITING-MODES
     direction
     block
     inline direction
     writing-mode:
     vertical-lr;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     creates a vertical typographic mode
     

     View Slide

115. TWO MORE OPTIONS FOR WRITING-MODE
     block
     direction
     inline direction
     writing-mode:
     sideways-lr;
     block
     direction
     inline direction
     writing-mode:
     sideways-rl;
     creates a horizontal typographic mode
     only
     

     View Slide

116. direction
     block
     inline direction
     writing-mode:
     vertical-lr;
     block
     direction
     inline direction
     writing-mode:
     sideways-lr;
     

     View Slide

117. block
     direction
     inline direction
     writing-mode:
     sideways-rl;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     

     View Slide

118. View Slide

119. text-orientation
     

     View Slide

120. HAN-BASED SYSTEMS
     block
     direction
     inline direction
     

     View Slide

121. HAN-BASED SYSTEMS
     b
     l
     o
     c
     k
     d
     i
     r
     e
     c
     t
     i
     o
     i
     n
     l
     i
     n
     e
     d
     i
     r
     e
     c
     t
     i
     o
     n
     

     View Slide

122. View Slide

123. options for vertical writing modes
     text-orientation:
     mixed;
     text-orientation:
     upright;
     text-orientation:
     sideways;
     THREE OPTIONS FOR TEXT-ORIENTATION
     

     View Slide

124. block
     direction
     inline direction
     writing-mode:
     sideways-rl;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     text-orientation: mixed;
     creates a horizontal typographic mode
     creates a vertical typographic mode
     

     View Slide

125. My Cool Website
     how?
     

     View Slide

126. My Cool Website
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     text-orientation: sideways;
     (if needed to fix punctuation / underlining)
     

     View Slide

127. View Slide

128. SUMMARY
     

     View Slide

129. direction
     writing-mode
     text-orientation
     

     View Slide

130. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
     block
     direction
     inline direction
     block
     direction
     inline direction
     .css {direction: rtl;}
     
     .css {direction: ltr;}
     
     

     View Slide

131. THREE OPTIONS FOR WRITING-MODE
     direction
     block
     inline direction
     writing-mode:
     vertical-lr;
     block
     direction
     inline direction
     writing-mode:
     vertical-rl;
     block
     direction
     inline direction
     toggle w/
     direction
     writing-mode:
     horizontal-tb;
     creates a vertical typographic mode
     

     View Slide

132. TWO MORE OPTIONS FOR WRITING-MODE
     block
     direction
     inline direction
     writing-mode:
     sideways-lr;
     block
     direction
     inline direction
     writing-mode:
     sideways-rl;
     creates a horizontal typographic mode
     only
     

     View Slide

133. options for vertical writing modes
     text-orientation:
     mixed;
     text-orientation:
     upright;
     text-orientation:
     sideways;
     THREE OPTIONS FOR TEXT-ORIENTATION
     

     View Slide

134. CODE IT UP
     

     View Slide

135. section {
     direction: ltr;
     writing-mode: horizontal-tb;
     }
     (These are all the defaults.
     No need to specify them.)
     Example: Writing Mode 1A
     

     View Slide

136. section {
     direction: ltr;
     }
     (Actually, do it in your HTML.)
     Example: Writing Mode 1A
     

     View Slide

137. section {
     writing-mode: vertical-rl;
     }
     (This triggers
     text-orientation: mixed
     as the default.)
     Example: Writing Mode 1A
     

     View Slide

138. section {
     writing-mode: vertical-lr;
     }
     Example: Writing Mode 1A
     

     View Slide

139. section {
     writing-mode: sideways-rl;
     }
     Example: Writing Mode 1A
     

     View Slide

140. section {
     writing-mode: sideways-lr;
     }
     Example: Writing Mode 1A
     

     View Slide

141. section {
     writing-mode: vertical-rl;
     text-orientation: upright;
     }
     Example: Writing Mode 1A
     

     View Slide

142. section {
     writing-mode: vertical-lr;
     text-orientation: upright;
     }
     Example: Writing Mode 1A
     

     View Slide

143. QUESTION TIME
     COMING SOON
     

     View Slide

144. h1 {
     writing-mode: vertical-rl;
     }
     Example: Writing Mode 4A
     

     View Slide

145. h1 {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     text-align: right;
     }
     Example: Writing Mode 4B
     

     View Slide

146. h1 {
     writing-mode: vertical-rl;
     text-orientation: upright;
     text-transform: uppercase;
     }
     Example: Writing Mode 4C
     

     View Slide

147. h1 {
     writing-mode: vertical-rl;
     text-orientation: upright;
     text-transform: uppercase;
     transform: rotate(180deg);
     }
     Example: Writing Mode 4D
     

     View Slide

148. View Slide

149. 
     
     Made
     by
     Few
     
     
     Example: Writing Mode 3A
     

     View Slide

150. h1 span:nth-child(2) {
     writing-mode: vertical-rl;
     text-orientation: upright;
     font-size: 45%;
     }
     Example: Writing Mode 3A
     

     View Slide

151. h1 {
     display: grid;
     }
     h1 span:nth-child(1) {
     grid-column: 1 / 3;
     grid-row: 1 / 2;
     }
     h1 span:nth-child(2) {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     }
     h1 span:nth-child(3) {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
     } Example: Writing Mode 3A
     

     View Slide

152. View Slide

153. Writing Modes
     

     View Slide

154. direction
     writing-mode
     text-orientation
     

     View Slide

155. QUESTIONS?
     

     View Slide

156. Start & End
     

     View Slide

157. block inline
     

     View Slide

158. block end
     inline
     start
     inline
     end
     block start
     

     View Slide

159. block end
     inline start
     inline end
     block start
     

     View Slide

160. block start
     inline start
     inline end
     block end
     

     View Slide

161. block start
     inline end
     inline start
     block end
     

     View Slide

162. end
     start
     end
     start
     

     View Slide

163. start
     start
     end
     end
     

     View Slide

164. cross axis
     main axis
     

     View Slide

165. flex-start
     flex-start
     flex-end
     flex-end
     cross axis
     main axis
     

     View Slide

166. Start & End
     

     View Slide

167. For the rest of today…
     

     View Slide

168. block end
     inline
     start
     inline
     end
     block start
     

     View Slide

169. LET’S GET TO
     IT ALREADY
     CSS GRID
     

     View Slide

170. CSS Grid
     

     View Slide

171. w3.org/TR/css3-grid
     

     View Slide

172. In progress
     

     View Slide

173. View Slide

174. Behind a flag
     Just Works On Its Way
     Chrome
     Chrome
     Canary
     Opera
     Opera
     Developer
     Firefox
     Firefox 

     Dev Edition
     Safari Technical
     Preview
     Firefox 

     Nightly
     Edge Safari
     Old Spec
     IE10+
     -ms-*
     Stuck in 2012
     

     View Slide

175. IE & Edge implementation, by Microsoft
     IE
     old spec in IE10+
     -ms-* prefix
     Edge
     new spec TBA
     

     View Slide

176. Prefixes
     

     View Slide

177. View Slide

178. View Slide

179. View Slide

180. SCSS
     CSS
     

     View Slide

181. View Slide

182. SCSS
     CSS
     

     View Slide

183. View Slide

184. main { /* autoprefixer: off */
     display: grid;
     grid-template-columns: repeat(12, 60px);
     grid-gap: 20px;
     }
     

     View Slide

185. IE & Edge implementation, by Microsoft
     IE
     old spec in IE10+
     -ms-* prefix
     Edge
     new spec TBA
     

     View Slide

186. // layout using old-technology
     @supports (display:grid) {
     // overrides to undo old layout
     // layout using new-technology
     }
     

     View Slide

187. IE & Edge implementation, by Microsoft
     IE
     old spec in IE10+
     -ms-* prefix
     Edge
     new spec TBA
     

     View Slide

188. Blink implementation, by Igalia
     Chrome
     Chrome
     Canary
     Opera
     Opera
     Developer
     “behind a flag”
     

     View Slide

189. chrome://flags
     

     View Slide

190. opera://flags
     

     View Slide

191. Webkit implementation, by Igalia
     Safari
     nope
     Safari
     Technical
     Preview
     “behind a flag”
     

     View Slide

192. Develop > Experimental Features > CSS Grid
     

     View Slide

193. Firefox implementation, by Mozilla
     “behind a flag”
     Firefox
     Firefox 

     Dev Edition
     Firefox 

     Nightly
     Just Works
     

     View Slide

194. about:config
     

     View Slide

195. nightly.mozilla.org
     

     View Slide

196. addons.mozilla.org/addon/css-grid-inspector
     

     View Slide

197. View Slide

198. 30-45% without 55-70% with CSS Grid
     Spring 2017
     

     View Slide

199. “
     — Johnny Appleseed
     Why are we talking about
     this now? It’s too early.
     

     View Slide

200. “
     — Johnny Appleseed
     The first browser hasn’t
     shipped it yet. It’ll take 3–5
     years for other browsers to
     catch up. So… 2020.
     

     View Slide

201. “
     — Johnny Appleseed
     Grid is too buggy to use.
     Wait a year or two for it 

     to get fixed.
     

     View Slide

202. “
     — Johnny Appleseed
     Grid is taking too long. 

     It took 3 years to get into
     beta. Will be another 3
     before it’s in production.
     

     View Slide

203. “
     — Jen Simmons
     These people are wrong.
     

     View Slide

204. “
     —Rachel Andrew
     You should try it out now
     and complain about what
     you don’t like. Once it
     ships, it’s too late to
     change anything.
     

     View Slide

205. “
     — Jen Simmons
     Grid takes time and
     commitment to learn.
     Start now and get ready
     to use it in 6 months.
     

     View Slide

206. “
     — Jen Simmons
     Learn Grid ‘early’ and
     make yourself super
     valuable. Get the $$$.
     

     View Slide

207. CSS Grid
     

     View Slide

208. labs.jensimmons.com
     

     View Slide

209. labs.jensimmons.com/workshop
     

     View Slide

210. View Slide

211. View Slide

212. Grid Container
     

     View Slide

213. Grid Items
     

     View Slide

214. 
     item
     item
     item
     this is an anonymous grid item
     item
     hello world
     more stuff
     conclusion
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     View Slide

215. 
     …
     
     
     
     
     
     
     
     
     
     
     …
     …
     
     body {
     display: grid;
     }
     

     View Slide

216. 
     …
     
     
     
     
     
     
     
     
     
     
     …
     …
     
     body {
     display: grid;
     }
     main {
     display: grid;
     }
     

     View Slide

217. 
     …
     
     
     
     
     
     
     
     
     
     
     …
     …
     
     body {
     display: grid;
     }
     main {
     display: grid;
     }
     article {
     display: grid;
     }
     

     View Slide

218. 
     …
     
     
     
     
     
     
     
     
     
     
     …
     …
     
     body {
     display: grid;
     }
     article {
     display: grid;
     }
     

     View Slide

219. 
     …
     
     
     
     
     
     
     
     
     
     
     …
     …
     
     body {
     display: grid;
     }
     main {
     display: subgrid;
     }
     article {
     display: subgrid;
     }
     

     View Slide

220. Terminology
     

     View Slide

221. Grid Container
     

     View Slide

222. Grid Items
     

     View Slide

223. Grid Area
     Grid Line
     Grid Track
     Grid Track
     Grid Cell
     Grid Line
     Grid Line
     Grid Line
     Grid Line
     

     View Slide

224. Grid Area
     Grid Track
     Grid Track
     Grid
     Cell
     Grid Line
     Grid Line
     Grid Line
     Grid Line
     Grid Line
     Grid Gap
     Grid Gap
     Grid Gap
     

     View Slide

225. The Grid
     vs.
     The Content
     

     View Slide

226. • Exists in HTML
     • Can be styled, 

     like anything in HTML
     

     View Slide

227. • Exists in CSS
     • Can NOT be styled
     • It doesn’t exist 

     in the DOM
     

     View Slide

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

     View Slide

229. main {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(4, 1fr);
     }
     aside {
     grid-column: 1 / 3;
     grid-row: 1 / -1;
     background: yellow;
     }
     

     View Slide

230. EXAMPLES
     

     View Slide

231. .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     }
     some other syntax options (each with different results)
     grid-template-columns: 1fr 5fr 2.5fr;
     grid-template-columns: 8em 1fr 300px;
     grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr;
     grid-template-columns: repeat(7, 1fr);
     grid-template-columns: repeat(3, 200px 1fr 25%);
     grid-template-columns: repeat(auto-fit, 10em);
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     

     View Slide

232. Units for setting Grid Track Sizes
     ‣ length: px, em, rem, vw, vh
     ‣ percent
     ‣ factor unit: 1fr
     ‣ auto
     ‣ measurement of content: min-content / max-content
     ‣ minmax();
     

     View Slide

233. .grid-item {
     grid-column: 1 / 5; // goes from vertical line 1 to 5
     grid-row: 3 / 5 // goes from horizontal line 3 to 5
     }
     some other syntax options (each with different results)
     grid-column: 3 / 5; // starts at line 3, goes to line 5
     grid-column: 3 / span 2; // starts at line 3, spans 2 cells
     grid-column: span 2 / 5; // spans 2 cells, ends at line 5
     grid-column: span 2; // spans 2 cells, placed by algorithm
     grid-column: 4; // starts at line 4
     grid-column: 1 / -1; // starts at line 1, goes to line -1
     grid-column: horse / pig;
     

     View Slide

234. 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;
     

     View Slide

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

     View Slide

236. 1 6
     6 lines
     5 tracks
     4 gaps
     2 3 4 5
     

     View Slide

237. Grid Line Numbers
     1 2 3 4 5 6
     -5
     -4
     -3
     -2
     -1
     -6 -5 -4 -3 -2 -1
     1
     2
     3
     4
     5
     

     View Slide

238. Explicit Grid
     vs
     Implicit Grid
     

     View Slide

239. by Manuel Rego Casasnovas
     http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/
     

     View Slide

240. Place
     each item
     into a specific
     cell/area
     Let the browser
     place everything
     using
     autoplacement
     algorithm
     

     View Slide

241. Sparse & Dense
     

     View Slide

242. 11
     8 9 10
     7
     6
     5
     1 2 3
     4
     auto placement
     algorithm
     

     View Slide

243. 13
     11
     8
     9 10
     7
     6
     5
     1 2 3
     4
     12
     grid-auto-flow: dense;
     

     View Slide

244. grid-auto-flow: row;
     grid-auto-flow: column;
     grid-auto-flow: dense;
     grid-auto-flow: row dense;
     grid-auto-flow: column dense;
     

     View Slide

245. View Slide

246. Named Lines
     

     View Slide

247. .container {
     grid-template-rows:[cow] 1fr
     [horse] 1fr [dog] 1fr [pig]
     1fr [duck];
     }
     .item {
     grid-column: horse / pig;
     }
     1 2 3 4
     1
     2
     3
     4
     5
     cow
     horse
     dog
     pig
     duck
     

     View Slide

248. grid-template-rows:1fr 1fr 1fr;
     grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig];
     grid-template-rows: repeat(auto-fit, 200px 1fr);
     grid-template-rows: repeat(auto-fit, [dog] 200px [cat] 1fr);
     grid-template-rows: repeat(4, 

     [even-start even-end] 80px [odd-start odd-end] 80px);
     

     View Slide

249. grid-template-rows: repeat(4,[foo-start] 1fr [foo-end] 300px);
     

     View Slide

250. Areas
     

     View Slide

251. Grid Container
     

     View Slide

252. Grid Items
     

     View Slide

253. Grid Area
     Grid Line
     Grid Track
     Grid Track
     Grid Cell
     Grid Line
     Grid Line
     Grid Line
     Grid Line
     header
     

     View Slide

254. 
     
     
     
     
     
     
     
     
     
     ~25%
     ~75%
     

     View Slide

255. header {
     grid-area: header;
     }
     main {
     grid-area: main;
     }
     aside {
     grid-area: aside;
     }
     footer {
     grid-area: footer;
     }
     body {
     display: grid;
     grid-template-columns: 3fr 1fr;
     grid-gap: 2rem;
     grid-template-areas:
     "header header"
     "main aside"
     "footer footer”; }
     ‘header’
     4fr + 2rem
     ‘aside’
     1fr
     ‘main’
     3fr
     ‘footer’
     4fr + 2rem
     

     View Slide

256. body {
     display: grid;
     grid-template-columns: 3fr 1fr;
     grid-gap: 2rem;
     grid-template-areas:
     "header"
     "main"
     "aside"
     "footer";
     }
     @media (min-width: 800px) {
     body {
     grid-template-areas:
     "header header"
     "main aside"
     "footer footer";
     }
     }
     

     View Slide

257. View Slide

258. Alignment
     

     View Slide

259. block inline
     

     View Slide

260. cross axis
     main axis
     

     View Slide

261. justify
     align
     

     View Slide

262. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
     

     View Slide

263. align-content
     justify-content
     

     View Slide

264. flex-start
     flex-end
     center
     stretch
     space-between
     space-around
     

     View Slide

265. View Slide

266. start
     end
     center
     stretch
     space-between
     space-around
     space-evenly
     

     View Slide

267. align-items
     justify-items
     

     View Slide

268. Specify this on the container.
     

     View Slide

269. flex-start
     flex-end
     center
     stretch
     baseline
     

     View Slide

270. start / flex-start
     end / flex-end
     center
     stretch
     baseline
     justify-items
     align-items
     

     View Slide

271. View Slide

272. align-self
     justify-self
     

     View Slide

273. Specify this on an item.
     

     View Slide

274. flex-start
     flex-end
     center
     stretch
     baseline
     

     View Slide

275. start / flex-start
     end / flex-end
     center
     stretch
     baseline
     justify-self
     align-self
     

     View Slide

276. View Slide

277. Multicolumn
     

     View Slide

278. View Slide

279. View Slide

280. article {
     max-width: 500px;
     margin: 0 auto;
     }
     

     View Slide

281. article {
     column-count: 2;
     column-gap: 2em;
     }
     

     View Slide

282. View Slide

283. article {
     // column-count: 2;
     column-width: 200px;
     column-gap: 2em;
     }
     

     View Slide

284. View Slide

285. View Slide

286. img {
     width: 100%;
     }
     article {
     column-width: 200px;
     column-gap: 2em;
     column-rule: 

     1px solid #444;
     }
     

     View Slide

287. View Slide

288. USING A
     GRID
     TO 

     LINE THINGS UP
     LIKE A MODERNIST
     WITH
     JEN SIMMONS
     

     View Slide

289. View Slide

290. View Slide

291. View Slide

292. View Slide

293. View Slide

294. View Slide

295. View Slide

296. View Slide

297. View Slide

298. View Slide

299. View Slide

300. View Slide

301. Massimo & Lella Vignelli
     

     View Slide

302. View Slide

303. View Slide

304. View Slide

305. View Slide

306. View Slide

307. View Slide

308. View Slide

309. View Slide

310. View Slide

311. View Slide

312. View Slide

313. View Slide

314. View Slide

315. View Slide

316. View Slide

317. View Slide

318. View Slide

319. View Slide

320. View Slide

321. View Slide

322. View Slide

323. View Slide

324. View Slide

325. View Slide

326. View Slide

327. vignelli.com/canon.pdf
     

     View Slide

328. View Slide

329. LAYOUT
     AND THE
     MEDIUM
     OF THE
     WEB
     

     View Slide

330. Things to consider.
     Things to design for.
     

     View Slide

331. View Slide

332. View Slide

333. View Slide

334. View Slide

335. View Slide

336. View Slide

337. world wide web
     

     View Slide

338. 1. The Viewport
     

     View Slide

339. View Slide

340. View Slide

341. View Slide

342. View Slide

343. View Slide

344. View Slide

345. View Slide

346. View Slide

347. View Slide

348. View Slide

349. View Slide

350. View Slide

351. View Slide

352. Viewport
     

     View Slide

353. View Slide

354. View Slide

355. View Slide

356. View Slide

357. Filmmaking &
     Cinematography
     

     View Slide

358. Saul Bass
     

     View Slide

359. Saul &
     Elaine Bass
     

     View Slide

360. Bass &
     Associates
     

     View Slide

361. View Slide

362. View Slide

363. View Slide

364. View Slide

365. View Slide

366. View Slide

367. View Slide

368. View Slide

369. View Slide

370. View Slide

371. View Slide

372. View Slide

373. View Slide

374. 25vw
     50vh that
     dang
     “fold”
     

     View Slide

375. View Slide

376. Prototype or Storyboard
     (or both) (full page mock-ups don't get at this)
     

     View Slide

377. Framing
     

     View Slide

378. View Slide

379. View Slide

380. View Slide

381. View Slide

382. View Slide

383. what does it mean to have a 

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

     View Slide

384. what does it mean to have a 

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

     View Slide

385. 1. Design for 

     the Viewport
     

     View Slide

386. 2. The Flow
     

     View Slide

387. View Slide

388. View Slide

389. View Slide

390. View Slide

391. View Slide

392. View Slide

393. View Slide

394. View Slide

395. View Slide

396. View Slide

397. View Slide

398. View Slide

399. Where do I go to get
     more of this thing?
     

     View Slide

400. View Slide

401. View Slide

402. View Slide

403. View Slide

404. drawing by Dave Ellis
     novolume.co.uk
     

     View Slide

405. View Slide

406. View Slide

407. View Slide

408. View Slide

409. We must make sure our
     audience knows the answer 

     to this question: 

     “Where do I go to get more 

     of this thing?”
     

     View Slide

410. View Slide

411. View Slide

412. View Slide

413. View Slide

414. View Slide

415. View Slide

416. View Slide

417. View Slide

418. View Slide

419. View Slide

420. View Slide

421. View Slide

422. View Slide

423. View Slide

424. View Slide

425. View Slide

426. Where do I go to get
     more of this thing?
     

     View Slide

427. View Slide

428. We don’t have to
     vertical scroll.
     

     View Slide

429. View Slide

430. the link
     the page
     

     View Slide

431. scroll snap
     

     View Slide

432. apps
     v.
     sites
     

     View Slide

433. mental model of
     offscreen v. onscreen
     

     View Slide

434. 2. Design the Flow
     

     View Slide

435. 3. Density
     

     View Slide

436. “
     — 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

437. View Slide

438. View Slide

439. View Slide

440. View Slide

441. View Slide

442. View Slide

443. 3. Consider Density
     Carefully
     

     View Slide

444. 4. Asymmetry
     

     View Slide

445. View Slide

446. 4. Asymmetry & 

     Visual Hierarchy
     

     View Slide

447. I wonder if we’ve even
     begun to understand
     how to use the space
     on the page yet.
     

     View Slide

448. THE END
     

     View Slide