Save 37% off PRO during our Black Friday Sale! »

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

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 02, 2016

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

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 02, 2016
Tweet

Transcript

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

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

  6. None
  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. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. CSS Grid Writing Modes

  52. Today’s Plan

  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
  54. @JENSIMMONS

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

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

  57. labs.jensimmons.com/workshop

  58. Writing Modes

  59. None
  60. “ — Bruce Lawson It’ s the World Wide Web,

    not the Wealthy Western Web.
  61. None
  62. None
  63. drafts.csswg.org/css-writing-modes-3

  64. direction writing-mode text-orientation

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

    way the characters flow
  66. <p> <p> <p> <p> block flow direction

  67. LATIN-BASED SYSTEMS block direction inline direction

  68. None
  69. ARABIC-BASED SYSTEMS block direction inline direction

  70. direction

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

  72. None
  73. <!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> … </head> <body> …

    </body> </html>
  74. <p>English words</p> <p class="foo"> ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا </p> .foo { direction:

    rtl; }
  75. <p>English words</p> <p><bdo dir="rtl"> .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا </bdo></p>

  76. <p>English words in this paragraph. <bdi dir=“rtl">.تﺎﻤﻠﻜﻟ </bdi> Some more

    LTR words, same paragraph.</p>
  77. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS block direction inline direction block direction

    inline direction .css {direction: rtl;} <html dir="rtl"> .css {direction: ltr;} <html dir="lrt">
  78. None
  79. None
  80. MONGOLIAN-BASED SYSTEMS block direction inline direction

  81. MONGOLIAN-BASED SYSTEMS block direction inline direction

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

    more
  83. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  84. None
  85. None
  86. None
  87. None
  88. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

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

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

  91. MONGOLI inline direction

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

  93. Top of page Top of characters hello

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

    inline direction
  95. SO FAR…

  96. block direction inline direction

  97. LATIN-BASED SYSTEMS block direction inline direction

  98. ARABIC-BASED SYSTEMS block direction inline direction

  99. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  100. MONGOLIAN-BASED SYSTEMS direction block inline direction

  101. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS block direction inline direction block direction

    inline direction .css {direction: rtl;} <html dir="rtl"> .css {direction: ltr;} <html dir="lrt">
  102. writing-mode

  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;
  104. None
  105. None
  106. h1:nth-child(2) { writing-mode: vertical-rl; }

  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;
  108. None
  109. h1:nth-child(2) { transform: rotate(90deg); }

  110. None
  111. My Cool Website

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

  113. My Cool Website

  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
  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
  116. direction block inline direction writing-mode: vertical-lr; block direction inline direction

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

    writing-mode: vertical-rl;
  118. None
  119. text-orientation

  120. HAN-BASED SYSTEMS block direction inline direction

  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
  122. None
  123. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION
  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
  125. My Cool Website how?

  126. My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (if

    needed to fix punctuation / underlining)
  127. None
  128. SUMMARY

  129. direction writing-mode text-orientation

  130. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS block direction inline direction block direction

    inline direction .css {direction: rtl;} <html dir="rtl"> .css {direction: ltr;} <html dir="lrt">
  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
  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
  133. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION
  134. CODE IT UP

  135. section { direction: ltr; writing-mode: horizontal-tb; } (These are all

    the defaults. No need to specify them.) Example: Writing Mode 1A
  136. section { direction: ltr; } (Actually, do it in your

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

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

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

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

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

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

    1A
  143. QUESTION TIME COMING SOON

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

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

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

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

    } Example: Writing Mode 4D
  148. None
  149. <main> <h1> <span>Made</span> <span>by</span> <span>Few</span> </h1> </main> Example: Writing Mode

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

    Example: Writing Mode 3A
  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
  152. None
  153. Writing Modes

  154. direction writing-mode text-orientation

  155. QUESTIONS?

  156. Start & End

  157. block inline

  158. block end inline start inline end block start

  159. block end inline start inline end block start

  160. block start inline start inline end block end

  161. block start inline end inline start block end

  162. end start end start

  163. start start end end

  164. cross axis main axis

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

  166. Start & End

  167. For the rest of today…

  168. block end inline start inline end block start

  169. LET’S GET TO IT ALREADY CSS GRID

  170. CSS Grid

  171. w3.org/TR/css3-grid

  172. In progress

  173. None
  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
  175. IE & Edge implementation, by Microsoft IE old spec in

    IE10+ -ms-* prefix Edge new spec TBA
  176. Prefixes

  177. None
  178. None
  179. None
  180. SCSS CSS

  181. None
  182. SCSS CSS

  183. None
  184. main { /* autoprefixer: off */ display: grid; grid-template-columns: repeat(12,

    60px); grid-gap: 20px; }
  185. IE & Edge implementation, by Microsoft IE old spec in

    IE10+ -ms-* prefix Edge new spec TBA
  186. // layout using old-technology @supports (display:grid) { // overrides to

    undo old layout // layout using new-technology }
  187. IE & Edge implementation, by Microsoft IE old spec in

    IE10+ -ms-* prefix Edge new spec TBA
  188. Blink implementation, by Igalia Chrome Chrome Canary Opera Opera Developer

    “behind a flag”
  189. chrome://flags

  190. opera://flags

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

    a flag”
  192. Develop > Experimental Features > CSS Grid

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


    Dev Edition Firefox 
 Nightly Just Works
  194. about:config

  195. nightly.mozilla.org

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

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

  199. “ — Johnny Appleseed Why are we talking about this

    now? It’s too early.
  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.
  201. “ — Johnny Appleseed Grid is too buggy to use.

    Wait a year or two for it 
 to get fixed.
  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.
  203. “ — Jen Simmons These people are wrong.

  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.
  205. “ — Jen Simmons Grid takes time and commitment to

    learn. Start now and get ready to use it in 6 months.
  206. “ — Jen Simmons Learn Grid ‘early’ and make yourself

    super valuable. Get the $$$.
  207. CSS Grid

  208. labs.jensimmons.com

  209. labs.jensimmons.com/workshop

  210. None
  211. None
  212. Grid Container

  213. Grid Items

  214. <main> <div>item</div> <div>item</div> <div>item</div> this is an anonymous grid item

    <div>item</div> hello world <section>more stuff</section> <footer>conclusion</footer> </main> <ul> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <body> <header> <main> <article> <h1> <p> <figure> <aside> <footer> </body>
  215. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; }
  216. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; }
  217. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; } article { display: grid; }
  218. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }
  219. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: subgrid; } article { display: subgrid; }
  220. Terminology

  221. Grid Container

  222. Grid Items

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

    Grid Line Grid Line Grid Line Grid Line
  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
  225. The Grid vs. The Content

  226. • Exists in HTML • Can be styled, 
 like

    anything in HTML
  227. • Exists in CSS • Can NOT be styled •

    It doesn’t exist 
 in the DOM
  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
  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; }
  230. EXAMPLES

  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));
  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();
  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;
  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;
  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
  236. 1 6 6 lines 5 tracks 4 gaps 2 3

    4 5
  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
  238. Explicit Grid vs Implicit Grid

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

  240. Place each item into a specific cell/area Let the browser

    place everything using autoplacement algorithm
  241. Sparse & Dense

  242. 11 8 9 10 7 6 5 1 2 3

    4 auto placement algorithm
  243. 13 11 8 9 10 7 6 5 1 2

    3 4 12 grid-auto-flow: dense;
  244. grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow:

    column dense;
  245. None
  246. Named Lines

  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
  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);
  249. grid-template-rows: repeat(4,[foo-start] 1fr [foo-end] 300px);

  250. Areas

  251. Grid Container

  252. Grid Items

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

    Grid Line Grid Line Grid Line Grid Line header
  254. <body> <header> <main> <article> <h1> <p> <figure> <aside> <footer> </body>

    ~25% ~75%
  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
  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"; } }
  257. None
  258. Alignment

  259. block inline

  260. cross axis main axis

  261. justify align

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

  263. align-content justify-content

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

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

  267. align-items justify-items

  268. Specify this on the container.

  269. flex-start flex-end center stretch baseline

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

    align-items
  271. None
  272. align-self justify-self

  273. Specify this on an item.

  274. flex-start flex-end center stretch baseline

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

    align-self
  276. None
  277. Multicolumn

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

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

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

  284. None
  285. None
  286. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }
  287. None
  288. USING A GRID TO 
 LINE THINGS UP LIKE A

    MODERNIST WITH JEN SIMMONS
  289. None
  290. None
  291. None
  292. None
  293. None
  294. None
  295. None
  296. None
  297. None
  298. None
  299. None
  300. None
  301. Massimo & Lella Vignelli

  302. None
  303. None
  304. None
  305. None
  306. None
  307. None
  308. None
  309. None
  310. None
  311. None
  312. None
  313. None
  314. None
  315. None
  316. None
  317. None
  318. None
  319. None
  320. None
  321. None
  322. None
  323. None
  324. None
  325. None
  326. None
  327. vignelli.com/canon.pdf

  328. None
  329. LAYOUT AND THE MEDIUM OF THE WEB

  330. Things to consider. Things to design for.

  331. None
  332. None
  333. None
  334. None
  335. None
  336. None
  337. world wide web

  338. 1. The Viewport

  339. None
  340. None
  341. None
  342. None
  343. None
  344. None
  345. None
  346. None
  347. None
  348. None
  349. None
  350. None
  351. None
  352. Viewport

  353. None
  354. None
  355. None
  356. None
  357. Filmmaking & Cinematography

  358. Saul Bass

  359. Saul & Elaine Bass

  360. Bass & Associates

  361. None
  362. None
  363. None
  364. None
  365. None
  366. None
  367. None
  368. None
  369. None
  370. None
  371. None
  372. None
  373. None
  374. 25vw 50vh that dang “fold”

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

    at this)
  377. Framing

  378. None
  379. None
  380. None
  381. None
  382. None
  383. what does it mean to have a 
 reading experience

    with a frame, where things move in and out of that frame?
  384. what does it mean to have a 
 interaction experience

    with a frame, where things move in and out of that frame?
  385. 1. Design for 
 the Viewport

  386. 2. The Flow

  387. None
  388. None
  389. None
  390. None
  391. None
  392. None
  393. None
  394. None
  395. None
  396. None
  397. None
  398. None
  399. Where do I go to get more of this thing?

  400. None
  401. None
  402. None
  403. None
  404. drawing by Dave Ellis novolume.co.uk

  405. None
  406. None
  407. None
  408. None
  409. We must make sure our audience knows the answer 


    to this question: 
 “Where do I go to get more 
 of this thing?”
  410. None
  411. None
  412. None
  413. None
  414. None
  415. None
  416. None
  417. None
  418. None
  419. None
  420. None
  421. None
  422. None
  423. None
  424. None
  425. None
  426. Where do I go to get more of this thing?

  427. None
  428. We don’t have to vertical scroll.

  429. None
  430. the link the page

  431. scroll snap

  432. apps v. sites

  433. mental model of offscreen v. onscreen

  434. 2. Design the Flow

  435. 3. Density

  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.
  437. None
  438. None
  439. None
  440. None
  441. None
  442. None
  443. 3. Consider Density Carefully

  444. 4. Asymmetry

  445. None
  446. 4. Asymmetry & 
 Visual Hierarchy

  447. I wonder if we’ve even begun to understand how to

    use the space on the page yet.
  448. THE END