An Event Apart Seattle 2017

Transcript

1. Designing With Grid @jensimmons
2. CSS Grid
3. The Kiss, 1896
5. Our medium is not done
6. layout design
31. photo by Brad Frost, 2012, CC BY 2.0
33. A C B A C B A C B A C B
38. Starter-kit
39. Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D!igning Systems of Components
40. color palette typography palette layout palette
43. The Official Timeline of Web Page Layout
44. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter
45. 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
47. Nature of CSS Grid
48. (Let s bust some assumptions) ’
49. explicit vs. implicit
50. You define "e size and/or number of rows and/or columns Let "e browser define number or size of rows (or columns)
51. Place each #em 
 into a specific 
 cell or area Let "e browser place every"ing using auto-placement algor#hm
52. Rows *and* Columns
53. ROWS!!!!!!!!!!!
56. Tracks don’t have to all be the same size.
59. Content sized by the size of a track.
60. Tracks sized by the size of content.
61. portion of available 
 space — 2 parts set by 
 content size fixed portion of available 
 space — 1 part
62. Content doesn’t have to fill a track.
65. start center end justify-items: s t r e t c h
66. start center end align-items: s t r e t c h
69. You can use Grid to line things up. Or not.
70. What shall we do with CSS Grid?
71. How do we know 
 where to put things?
73. visual hierarchy
74. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
75. symmetry
76. asymmetry
77. symmetry
78. asymmetry
79. proxim#y
80. proxim#y
81. dens#y
82. dens#y
83. 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 “
84. Graphic design for the web
85. Graphic design of the web
86. labs.jensimmons.com
87. Discovery in 6 parts
88. 1. Overlap
89. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
90. labs.jensimmons.com/2017/01-003.html
91. li:nth-child(1) { grid-row: 1 / 4; grid-column: 1 / 4; } li:nth-child(2) { grid-row: 3 / 6; grid-column: 3 / 6; }
94. labs.jensimmons.com/2017/01-002.html
95. labs.jensimmons.com/2017/01-002.html
96. labs.jensimmons.com/2017/01-018.html
97. labs.jensimmons.com/2017/02-001.html
98. Overlap
99. 2, The Viewport
112. storyboards
113. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed by Stanley Kubrick. Storyboards created by Saul Bass.
116. labs.jensimmons.com/2017/01-008.html
117. labs.jensimmons.com/2017/01-010.html
121. Grid rows & columns Alignment Viewport Units
122. Viewport Units 50vh 25vh 50vw 25vh 50vw
123. Viewport Units 50vmin 100vh
124. Framing
129. what does it mean to have a 
 reading experience with 
 a frame, where things move in and out of that frame?
130. what does it mean to have a 
 interaction experience with a frame, where things move in and out of that frame?
131. The Viewport
132. 3. White Space
133. “ 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.
135. labs.jensimmons.com/2017/01-003.html
136. ul { display: grid; grid-template-columns: repeat(4, 1fr); } li:nth-child(1) { grid-row: 1; grid-column: 2; } li:nth-child(2) { grid-row: 2; grid-column: 4; } li:nth-child(3) { grid-row: 3; grid-column: 3; }
144. 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.
145. markboulton.co.uk/journal/a-richer-canvas
147. labs.jensimmons.com/2017/01-021.html
148. labs.jensimmons.com/2017/01-021.html
150. Grid like a Modernist?
151. White Space
152. 4. Verticality
159. 4. Verticality
171. labs.jensimmons.com/2017/01-020.html
173. Verticality
174. 5. Flexibility
175. px em % pixels (or rem) percents 60px 10em 20%
176. min-content max-content fr minmax()
179. labs.jensimmons.com/2017/01-007.html
181. This is a phrase with several words. This is a phrase with several words. This is a phrase with several words.
185. fr unit = “fraction”
187. 100% 33% 33% 33%
188. 100% 33% 33% 33% 2% 2%
189. 100% 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
190. 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)%;}}
191. 100% 1fr 1fr 1fr 2em 2em
192. 100px 1fr 1fr 1fr 1fr 100px
193. 2fr 1fr 50px 1fr min-content
194. 6fr 2.4fr 1fr 2.4fr 2fr
195. markboulton.co.uk/journal/five-simple-steps-to- designing-grid-systems-part-1
197. alistapart.com/article/content-out-layout
199. minmax()
200. labs.jensimmons.com/2017/01-016.html
201. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px 1fr minmax(40ch, 65ch)
203. “pixel perfect ”
204. What happens when parts of the content / interface are ‘missing’? Or are shorter / longer than ‘ideal’?
205. Design the flexibility model.
206. Flexibility
207. 6. Creativity
208. labs.jensimmons.com/2017/01-004.html
210. Time to play.
 Time to learn.
211. www.layout.land
212. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
213. jensimmons.com/post/feb-27-2017/learn-css-grid
214. labs.jensimmons.com
216. Time to explore.
217. A basic design is functional. 
 A great one will 
 say something.” — Tinker Hatfield, shoe designer for Nike “
218. jensimmons.com @jensimmons layout.land labs.jensimmons.com