Designing with Grid — An Event Apart Denver

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
December 11, 2017

Designing with Grid — An Event Apart Denver

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

December 11, 2017
Tweet

Transcript

  1. Designing With Grid An Event Apart Denver 2017 @jenSimmons

  2. CSS Grid

  3. The Kiss, 1896

  4. None
  5. Our medium is not done

  6. Layout on the web

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. photo by Brad Frost, 2012, CC BY 2.0

  34. None
  35. A C B A C B A C B A

    C B
  36. None
  37. None
  38. None
  39. None
  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!!!!!!!!!!!

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

  60. None
  61. None
  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.

  66. None
  67. None
  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
  70. None
  71. None
  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?

  75. None
  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

  94. None
  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

  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. storyboards

  111. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed

    by Stanley Kubrick. Storyboards created by Saul Bass.
  112. None
  113. None
  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

  124. None
  125. None
  126. Framing

  127. None
  128. None
  129. None
  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

  137. None
  138. None
  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.
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. None
  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.
  150. None
  151. labs.jensimmons.com/2017/01-021.html

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

  153. None
  154. Grid like a Modernist?

  155. White Space

  156. 4. Verticality

  157. None
  158. None
  159. None
  160. 4. Verticality

  161. None
  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. None
  172. None
  173. None
  174. photo by Fan Ho

  175. photo by Fan Ho

  176. photos by Fan Ho

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

  178. None
  179. Verticality

  180. 5. Flexibility

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

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

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

  185. None
  186. None
  187. labs.jensimmons.com/2017/01-007.html

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

    phrase with several words. This is a phrase with several words.
  190. None
  191. None
  192. None
  193. None
  194. None
  195. fr unit = “fraction”

  196. None
  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

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

  214. minmax()

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

  216. None
  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)
  220. None
  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

  229. None
  230. 1. Overlap 2. The Viewport 3. White Space 4. Verticality

    5. Flexibility 6. Creativity
  231. Time to play.
 Time to learn.

  232. None
  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!