Designing with Grid — An Event Apart San Francisco

Transcript

1. Designing With Grid An Event Apart San Francisco @jenSimmons
2. CSS Grid
3. The Kiss, 1896
5. Our medium is not done
6. Layout on the web
33. photo by Brad Frost, 2012, CC BY 2.0
35. A C B A C B A C B A C B
40. starter-kit framework
41. Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D!igning Systems of Components
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
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
44. color palette typography palette layout palette
45. The Official Timeline of Web Page Layout The No-Layout Layout Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
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
47. This new CSS changes everything in web layout.
48. CSS Grid
49. Nature of CSS Grid
50. (Let s bust some assumptions) ’
51. explicit vs. implicit
52. You define "e size and/or number of rows and/or columns Let "e browser define number or size of rows or columns
53. Place each #em 
 into a specific 
 cell or area Let "e browser place each #em using auto-placement algor#hm
54. Rows *and* Columns
55. ROWS!!!!!!!!!!!
58. Tracks don’t have to all be the same size.
61. Content sized by the size of a track.
62. Tracks sized by the size of content.
63. portion of available 
 space — 2 parts set by 
 content size fixed portion of available 
 space — 1 part
64. Content doesn’t have to fill a track.
67. start center end justify-items: s t r e t c h
68. start center end align-items: s t r e t c h
71. You can use Grid to line things up. Or not.
72. What shall we do with CSS Grid?
73. How do we know 
 where to put things?
75. visual hierarchy
76. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
77. symmetry
78. asymmetry
79. symmetry
80. asymmetry
81. proxim#y
82. proxim#y
83. dens#y
84. dens#y
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 “
86. Graphic design for the web
87. Graphic design of the web
88. labs.jensimmons.com
89. What I’ve Discovered in Six parts
90. 1. Overlap
91. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
92. labs.jensimmons.com/2017/01-003.html
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
111. storyboards
112. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed by Stanley Kubrick. Storyboards created by Saul Bass.
116. Grid rows & columns Alignment Viewport Units
117. labs.jensimmons.com/2017/01-008.html
118. labs.jensimmons.com/2017/01-010.html
119. Viewport Units 50vh 25vh 50vw 25vh 50vw "at dang “fold”
120. Viewport Units 50vmin 100vh
123. Framing
127. Filmic Language
128. Webic Language
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?
132. The Viewport
133. 3. White Space
134. labs.jensimmons.com/2017/01-003.html
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.
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.
149. labs.jensimmons.com/2017/01-021.html
150. labs.jensimmons.com/2017/01-021.html
152. Grid like a Modernist?
153. White Space
154. 4. Verticality
158. 4. Verticality
172. photo by Fan Ho
173. photo by Fan Ho
174. photos by Fan Ho
175. labs.jensimmons.com/2017/01-020.html
177. Verticality
178. 5. Flexibility
179. labs.jensimmons.com/2017/02-004.html
181. px em % pixels (or rem) percents 60px 10em 20%
182. min-content max-content fr minmax()
185. labs.jensimmons.com/2017/01-007.html
187. This is a phrase with several words. This is a phrase with several words. This is a phrase with several words.
193. fr unit = “fraction”
195. 100% 33% 33% 33%
196. 100% 33.33333% 33.33333% 33.33333%
197. 100% 33.33333% 33.33333% 33.33333%
198. 100% 33% 33% 33% 2% 2%
199. 100% 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
200. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% = 94% = 31.333% 3 3
201. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3
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)%;}}
203. 100% 1fr 1fr 1fr 2em 2em
204. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
205. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
206. 100px 1fr 1fr 1fr 1fr 100px
207. 2fr 1fr 50px 1fr min-content
208. 6fr 2.4fr 1fr 2.4fr 2fr
210. from alistapart.com/article/content-out-layout
211. minmax()
212. labs.jensimmons.com/2017/01-003.html
214. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); // nothing about rows } .item { // nothing about item placement }
215. labs.jensimmons.com/2017/01-016.html
216. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px 1fr minmax(40ch, 65ch)
218. “pixel perfect ”
219. What happens when parts of the content / interface are ‘missing’? Or are shorter / longer than ‘ideal’?
220. Design the flexibility model.
221. Flexibility
222. 6. Creativity
223. labs.jensimmons.com/2017/01-004.html
225. 1. Overlap 2. The Viewport 3. White Space 4. Verticality 5. Flexibility 6. Creativity
226. Time to play.
 Time to learn.
227. nightly.mozilla.org
228. www.layout.land
229. labs.jensimmons.com
230. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
231. jensimmons.com/post/feb-27-2017/learn-css-grid
232. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
233. Time to explore.
234. A basic design is functional. 
 A great one will 
 say something.” — Tinker Hatfield, shoe designer for Nike “
235. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!