Designing with Grid — An Event Apart Denver

Transcript

1. Designing With Grid An Event Apart Denver 2017 @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. Designing custom layout palettes is the key to the next major phase of web design.
46. The Official Timeline of Web Page Layout The No-Layout Layout Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
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
48. This new CSS changes everything in web layout.
49. CSS Grid
50. Nature of CSS Grid
51. (Let s bust some assumptions) ’
52. explicit vs. implicit
53. You define "e size and/or number of rows and/or columns Let "e browser define number or size of rows or columns
54. Place each #em 
 into a specific 
 cell or area Let "e browser place each #em using auto-placement algor#hm
55. Rows *and* Columns
56. ROWS!!!!!!!!!!!
59. Tracks don’t have to all be the same size.
62. Content sized by the size of a track.
63. Tracks sized by the size of content.
64. portion of available 
 space — 2 parts set by 
 content size fixed portion of available 
 space — 1 part
65. Content doesn’t have to fill a track.
68. start center end justify-items: s t r e t c h
69. start center end align-items: s t r e t c h
72. You can use Grid to line things up. Or not.
73. What shall we do with CSS Grid?
74. How do we know 
 where to put things?
76. visual hierarchy
77. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
78. symmetry
79. asymmetry
80. symmetry
81. asymmetry
82. proxim#y
83. proxim#y
84. dens#y
85. dens#y
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
87. Graphic design principles to the web
88. Graphic design principles of the web
89. labs.jensimmons.com
90. What I’ve Discovered in Six parts
91. 1. Overlap
92. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
93. labs.jensimmons.com/2017/01-003.html
95. labs.jensimmons.com/2017/01-002.html
96. labs.jensimmons.com/2017/01-002.html
97. labs.jensimmons.com/2017/01-018.html
98. Overlap
99. 2, The Viewport
110. storyboards
111. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed by Stanley Kubrick. Storyboards created by Saul Bass.
114. Fixed Size
115. Responsive Web Design
116. The New Flexibility
117. labs.jensimmons.com/2017/01-008.html
118. labs.jensimmons.com/2017/01-008.html
119. labs.jensimmons.com/2017/01-008.html
120. Grid rows & columns Alignment Viewport Units
121. labs.jensimmons.com/2017/01-010.html
122. Viewport Units 50vh 25vh 50vw 25vh 50vw "at dang “fold”
123. Viewport Units 50vmin 100vh
126. Framing
130. Filmic Language
131. Webic Language
132. What does it mean to have a 
 reading experience with a frame, 
 where things move in and out 
 of that frame?
133. What does it mean to have an 
 interaction experience with a frame, 
 where things move in and out 
 of that frame?
134. The Viewport
135. 3. White Space
136. labs.jensimmons.com/2017/01-003.html
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.
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.
151. labs.jensimmons.com/2017/01-021.html
152. labs.jensimmons.com/2017/01-021.html
154. Grid like a Modernist?
155. White Space
156. 4. Verticality
160. 4. Verticality
174. photo by Fan Ho
175. photo by Fan Ho
176. photos by Fan Ho
177. labs.jensimmons.com/2017/01-020.html
179. Verticality
180. 5. Flexibility
181. labs.jensimmons.com/2017/02-004.html
183. px em % pixels (or rem) percents 60px 10em 20%
184. min-content max-content fr minmax()
187. labs.jensimmons.com/2017/01-007.html
189. This is a phrase with several words. This is a phrase with several words. This is a phrase with several words.
195. fr unit = “fraction”
197. 100% 33% 33% 33%
198. 100% 33.33333% 33.33333% 33.33333%
199. 100% 33.33333% 33.33333% 33.33333%
200. 33.33333% 33.33333% 33.33333% 100% 2% 2%
201. 100% 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
202. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% = 94% = 31.333% 3 3
203. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3
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)%;}}
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)%;}}
206. 100% 1fr 1fr 1fr 2em 2em
207. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
208. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
209. 100px 1fr 1fr 1fr 1fr 100px
210. 2fr 1fr 50px 1fr min-content
211. 6fr 2.4fr 1fr 2.4fr 2fr
213. from alistapart.com/article/content-out-layout
214. minmax()
215. labs.jensimmons.com/2017/01-003.html
217. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); // nothing about rows } .item { // nothing about item placement }
218. labs.jensimmons.com/2017/01-016.html
219. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px 1fr minmax(40ch, 65ch)
221. “pixel perfect ”
222. Not Your Father’s Web Design Ethan’s Responsive
223. %
224. Program the flexibility model.
225. What happens when parts of the content / interface are ‘missing’? Or are shorter / longer than ‘ideal’?
226. Flexibility
227. 6. Creativity
228. labs.jensimmons.com/2017/01-004.html
230. 1. Overlap 2. The Viewport 3. White Space 4. Verticality 5. Flexibility 6. Creativity
231. Time to play.
 Time to learn.
233. nightly.mozilla.org
234. www.layout.land
235. labs.jensimmons.com
236. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
237. jensimmons.com/post/feb-27-2017/learn-css-grid
238. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
239. Time to explore.
240. A basic design is functional. 
 A great one will 
 say something.” — Tinker Hatfield, shoe designer for Nike “
241. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!