$30 off During Our Annual Pro Sale. View Details »

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

Jen Simmons
November 02, 2016

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

Jen Simmons

November 02, 2016
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

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

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. CSS Grid
    Writing Modes

    View Slide

  52. Today’s Plan

    View Slide

  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

    View Slide

  54. @JENSIMMONS

    View Slide

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

    View Slide

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

    View Slide

  57. labs.jensimmons.com/workshop

    View Slide

  58. Writing Modes

    View Slide

  59. View Slide


  60. — Bruce Lawson
    It’
    s the World Wide Web, not
    the Wealthy Western Web.

    View Slide

  61. View Slide

  62. View Slide

  63. drafts.csswg.org/css-writing-modes-3

    View Slide

  64. direction
    writing-mode
    text-orientation

    View Slide

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

    View Slide





  66. block
    flow
    direction

    View Slide

  67. LATIN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  68. View Slide

  69. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  70. direction

    View Slide

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

    View Slide

  72. View Slide






  73. View Slide

  74. English words

    ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا

    .foo { direction: rtl; }

    View Slide

  75. English words

    .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا

    View Slide

  76. English words in this paragraph.
    .تﺎﻤﻠﻜﻟ Some
    more LTR words, same paragraph.

    View Slide

  77. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    .css {direction: rtl;}

    .css {direction: ltr;}

    View Slide

  78. View Slide

  79. View Slide

  80. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  81. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

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

    View Slide

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

    View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

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

    View Slide

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

    View Slide

  90. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  91. MONGOLI
    inline direction

    View Slide

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

    View Slide

  93. Top of
    page
    Top of
    characters
    hello

    View Slide

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

    View Slide

  95. SO FAR…

    View Slide

  96. block
    direction
    inline direction

    View Slide

  97. LATIN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  98. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

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

    View Slide

  100. MONGOLIAN-BASED SYSTEMS
    direction
    block
    inline direction

    View Slide

  101. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    .css {direction: rtl;}

    .css {direction: ltr;}

    View Slide

  102. writing-mode

    View Slide

  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;

    View Slide

  104. View Slide

  105. View Slide

  106. h1:nth-child(2) {
    writing-mode: vertical-rl;
    }

    View Slide

  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;

    View Slide

  108. View Slide

  109. h1:nth-child(2) {
    transform: rotate(90deg);
    }

    View Slide

  110. View Slide

  111. My Cool Website

    View Slide

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

    View Slide

  113. My Cool Website

    View Slide

  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

    View Slide

  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

    View Slide

  116. direction
    block
    inline direction
    writing-mode:
    vertical-lr;
    block
    direction
    inline direction
    writing-mode:
    sideways-lr;

    View Slide

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

    View Slide

  118. View Slide

  119. text-orientation

    View Slide

  120. HAN-BASED SYSTEMS
    block
    direction
    inline direction

    View Slide

  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

    View Slide

  122. View Slide

  123. options for vertical writing modes
    text-orientation:
    mixed;
    text-orientation:
    upright;
    text-orientation:
    sideways;
    THREE OPTIONS FOR TEXT-ORIENTATION

    View Slide

  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

    View Slide

  125. My Cool Website
    how?

    View Slide

  126. My Cool Website
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: sideways;
    (if needed to fix punctuation / underlining)

    View Slide

  127. View Slide

  128. SUMMARY

    View Slide

  129. direction
    writing-mode
    text-orientation

    View Slide

  130. LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS
    block
    direction
    inline direction
    block
    direction
    inline direction
    .css {direction: rtl;}

    .css {direction: ltr;}

    View Slide

  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

    View Slide

  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

    View Slide

  133. options for vertical writing modes
    text-orientation:
    mixed;
    text-orientation:
    upright;
    text-orientation:
    sideways;
    THREE OPTIONS FOR TEXT-ORIENTATION

    View Slide

  134. CODE IT UP

    View Slide

  135. section {
    direction: ltr;
    writing-mode: horizontal-tb;
    }
    (These are all the defaults.
    No need to specify them.)
    Example: Writing Mode 1A

    View Slide

  136. section {
    direction: ltr;
    }
    (Actually, do it in your HTML.)
    Example: Writing Mode 1A

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  143. QUESTION TIME
    COMING SOON

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  148. View Slide



  149. Made
    by
    Few


    Example: Writing Mode 3A

    View Slide

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

    View Slide

  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

    View Slide

  152. View Slide

  153. Writing Modes

    View Slide

  154. direction
    writing-mode
    text-orientation

    View Slide

  155. QUESTIONS?

    View Slide

  156. Start & End

    View Slide

  157. block inline

    View Slide

  158. block end
    inline
    start
    inline
    end
    block start

    View Slide

  159. block end
    inline start
    inline end
    block start

    View Slide

  160. block start
    inline start
    inline end
    block end

    View Slide

  161. block start
    inline end
    inline start
    block end

    View Slide

  162. end
    start
    end
    start

    View Slide

  163. start
    start
    end
    end

    View Slide

  164. cross axis
    main axis

    View Slide

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

    View Slide

  166. Start & End

    View Slide

  167. For the rest of today…

    View Slide

  168. block end
    inline
    start
    inline
    end
    block start

    View Slide

  169. LET’S GET TO
    IT ALREADY
    CSS GRID

    View Slide

  170. CSS Grid

    View Slide

  171. w3.org/TR/css3-grid

    View Slide

  172. In progress

    View Slide

  173. View Slide

  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

    View Slide

  175. IE & Edge implementation, by Microsoft
    IE
    old spec in IE10+
    -ms-* prefix
    Edge
    new spec TBA

    View Slide

  176. Prefixes

    View Slide

  177. View Slide

  178. View Slide

  179. View Slide

  180. SCSS
    CSS

    View Slide

  181. View Slide

  182. SCSS
    CSS

    View Slide

  183. View Slide

  184. main { /* autoprefixer: off */
    display: grid;
    grid-template-columns: repeat(12, 60px);
    grid-gap: 20px;
    }

    View Slide

  185. IE & Edge implementation, by Microsoft
    IE
    old spec in IE10+
    -ms-* prefix
    Edge
    new spec TBA

    View Slide

  186. // layout using old-technology
    @supports (display:grid) {
    // overrides to undo old layout
    // layout using new-technology
    }

    View Slide

  187. IE & Edge implementation, by Microsoft
    IE
    old spec in IE10+
    -ms-* prefix
    Edge
    new spec TBA

    View Slide

  188. Blink implementation, by Igalia
    Chrome
    Chrome
    Canary
    Opera
    Opera
    Developer
    “behind a flag”

    View Slide

  189. chrome://flags

    View Slide

  190. opera://flags

    View Slide

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

    View Slide

  192. Develop > Experimental Features > CSS Grid

    View Slide

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

    Dev Edition
    Firefox 

    Nightly
    Just Works

    View Slide

  194. about:config

    View Slide

  195. nightly.mozilla.org

    View Slide

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

    View Slide

  197. View Slide

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

    View Slide


  199. — Johnny Appleseed
    Why are we talking about
    this now? It’s too early.

    View Slide


  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.

    View Slide


  201. — Johnny Appleseed
    Grid is too buggy to use.
    Wait a year or two for it 

    to get fixed.

    View Slide


  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.

    View Slide


  203. — Jen Simmons
    These people are wrong.

    View Slide


  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.

    View Slide


  205. — Jen Simmons
    Grid takes time and
    commitment to learn.
    Start now and get ready
    to use it in 6 months.

    View Slide


  206. — Jen Simmons
    Learn Grid ‘early’ and
    make yourself super
    valuable. Get the $$$.

    View Slide

  207. CSS Grid

    View Slide

  208. labs.jensimmons.com

    View Slide

  209. labs.jensimmons.com/workshop

    View Slide

  210. View Slide

  211. View Slide

  212. Grid Container

    View Slide

  213. Grid Items

    View Slide


  214. item
    item
    item
    this is an anonymous grid item
    item
    hello world
    more stuff
    conclusion





















    View Slide
















  215. body {
    display: grid;
    }

    View Slide
















  216. body {
    display: grid;
    }
    main {
    display: grid;
    }

    View Slide
















  217. body {
    display: grid;
    }
    main {
    display: grid;
    }
    article {
    display: grid;
    }

    View Slide
















  218. body {
    display: grid;
    }
    article {
    display: grid;
    }

    View Slide
















  219. body {
    display: grid;
    }
    main {
    display: subgrid;
    }
    article {
    display: subgrid;
    }

    View Slide

  220. Terminology

    View Slide

  221. Grid Container

    View Slide

  222. Grid Items

    View Slide

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

    View Slide

  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

    View Slide

  225. The Grid
    vs.
    The Content

    View Slide

  226. • Exists in HTML
    • Can be styled, 

    like anything in HTML

    View Slide

  227. • Exists in CSS
    • Can NOT be styled
    • It doesn’t exist 

    in the DOM

    View Slide

  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

    View Slide

  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;
    }

    View Slide

  230. EXAMPLES

    View Slide

  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));

    View Slide

  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();

    View Slide

  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;

    View Slide

  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;

    View Slide

  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

    View Slide

  236. 1 6
    6 lines
    5 tracks
    4 gaps
    2 3 4 5

    View Slide

  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

    View Slide

  238. Explicit Grid
    vs
    Implicit Grid

    View Slide

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

    View Slide

  240. Place
    each item
    into a specific
    cell/area
    Let the browser
    place everything
    using
    autoplacement
    algorithm

    View Slide

  241. Sparse & Dense

    View Slide

  242. 11
    8 9 10
    7
    6
    5
    1 2 3
    4
    auto placement
    algorithm

    View Slide

  243. 13
    11
    8
    9 10
    7
    6
    5
    1 2 3
    4
    12
    grid-auto-flow: dense;

    View Slide

  244. grid-auto-flow: row;
    grid-auto-flow: column;
    grid-auto-flow: dense;
    grid-auto-flow: row dense;
    grid-auto-flow: column dense;

    View Slide

  245. View Slide

  246. Named Lines

    View Slide

  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

    View Slide

  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);

    View Slide

  249. grid-template-rows: repeat(4,[foo-start] 1fr [foo-end] 300px);

    View Slide

  250. Areas

    View Slide

  251. Grid Container

    View Slide

  252. Grid Items

    View Slide

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

    View Slide











  254. ~25%
    ~75%

    View Slide

  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

    View Slide

  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";
    }
    }

    View Slide

  257. View Slide

  258. Alignment

    View Slide

  259. block inline

    View Slide

  260. cross axis
    main axis

    View Slide

  261. justify
    align

    View Slide

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

    View Slide

  263. align-content
    justify-content

    View Slide

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

    View Slide

  265. View Slide

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

    View Slide

  267. align-items
    justify-items

    View Slide

  268. Specify this on the container.

    View Slide

  269. flex-start
    flex-end
    center
    stretch
    baseline

    View Slide

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

    View Slide

  271. View Slide

  272. align-self
    justify-self

    View Slide

  273. Specify this on an item.

    View Slide

  274. flex-start
    flex-end
    center
    stretch
    baseline

    View Slide

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

    View Slide

  276. View Slide

  277. Multicolumn

    View Slide

  278. View Slide

  279. View Slide

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

    View Slide

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

    View Slide

  282. View Slide

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

    View Slide

  284. View Slide

  285. View Slide

  286. img {
    width: 100%;
    }
    article {
    column-width: 200px;
    column-gap: 2em;
    column-rule: 

    1px solid #444;
    }

    View Slide

  287. View Slide

  288. USING A
    GRID
    TO 

    LINE THINGS UP
    LIKE A MODERNIST
    WITH
    JEN SIMMONS

    View Slide

  289. View Slide

  290. View Slide

  291. View Slide

  292. View Slide

  293. View Slide

  294. View Slide

  295. View Slide

  296. View Slide

  297. View Slide

  298. View Slide

  299. View Slide

  300. View Slide

  301. Massimo & Lella Vignelli

    View Slide

  302. View Slide

  303. View Slide

  304. View Slide

  305. View Slide

  306. View Slide

  307. View Slide

  308. View Slide

  309. View Slide

  310. View Slide

  311. View Slide

  312. View Slide

  313. View Slide

  314. View Slide

  315. View Slide

  316. View Slide

  317. View Slide

  318. View Slide

  319. View Slide

  320. View Slide

  321. View Slide

  322. View Slide

  323. View Slide

  324. View Slide

  325. View Slide

  326. View Slide

  327. vignelli.com/canon.pdf

    View Slide

  328. View Slide

  329. LAYOUT
    AND THE
    MEDIUM
    OF THE
    WEB

    View Slide

  330. Things to consider.
    Things to design for.

    View Slide

  331. View Slide

  332. View Slide

  333. View Slide

  334. View Slide

  335. View Slide

  336. View Slide

  337. world wide web

    View Slide

  338. 1. The Viewport

    View Slide

  339. View Slide

  340. View Slide

  341. View Slide

  342. View Slide

  343. View Slide

  344. View Slide

  345. View Slide

  346. View Slide

  347. View Slide

  348. View Slide

  349. View Slide

  350. View Slide

  351. View Slide

  352. Viewport

    View Slide

  353. View Slide

  354. View Slide

  355. View Slide

  356. View Slide

  357. Filmmaking &
    Cinematography

    View Slide

  358. Saul Bass

    View Slide

  359. Saul &
    Elaine Bass

    View Slide

  360. Bass &
    Associates

    View Slide

  361. View Slide

  362. View Slide

  363. View Slide

  364. View Slide

  365. View Slide

  366. View Slide

  367. View Slide

  368. View Slide

  369. View Slide

  370. View Slide

  371. View Slide

  372. View Slide

  373. View Slide

  374. 25vw
    50vh that
    dang
    “fold”

    View Slide

  375. View Slide

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

    View Slide

  377. Framing

    View Slide

  378. View Slide

  379. View Slide

  380. View Slide

  381. View Slide

  382. View Slide

  383. what does it mean to have a 

    reading experience with a
    frame, where things move in
    and out of that frame?

    View Slide

  384. what does it mean to have a 

    interaction experience with
    a frame, where things move
    in and out of that frame?

    View Slide

  385. 1. Design for 

    the Viewport

    View Slide

  386. 2. The Flow

    View Slide

  387. View Slide

  388. View Slide

  389. View Slide

  390. View Slide

  391. View Slide

  392. View Slide

  393. View Slide

  394. View Slide

  395. View Slide

  396. View Slide

  397. View Slide

  398. View Slide

  399. Where do I go to get
    more of this thing?

    View Slide

  400. View Slide

  401. View Slide

  402. View Slide

  403. View Slide

  404. drawing by Dave Ellis
    novolume.co.uk

    View Slide

  405. View Slide

  406. View Slide

  407. View Slide

  408. View Slide

  409. We must make sure our
    audience knows the answer 

    to this question: 

    “Where do I go to get more 

    of this thing?”

    View Slide

  410. View Slide

  411. View Slide

  412. View Slide

  413. View Slide

  414. View Slide

  415. View Slide

  416. View Slide

  417. View Slide

  418. View Slide

  419. View Slide

  420. View Slide

  421. View Slide

  422. View Slide

  423. View Slide

  424. View Slide

  425. View Slide

  426. Where do I go to get
    more of this thing?

    View Slide

  427. View Slide

  428. We don’t have to
    vertical scroll.

    View Slide

  429. View Slide

  430. the link
    the page

    View Slide

  431. scroll snap

    View Slide

  432. apps
    v.
    sites

    View Slide

  433. mental model of
    offscreen v. onscreen

    View Slide

  434. 2. Design the Flow

    View Slide

  435. 3. Density

    View Slide


  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.

    View Slide

  437. View Slide

  438. View Slide

  439. View Slide

  440. View Slide

  441. View Slide

  442. View Slide

  443. 3. Consider Density
    Carefully

    View Slide

  444. 4. Asymmetry

    View Slide

  445. View Slide

  446. 4. Asymmetry & 

    Visual Hierarchy

    View Slide

  447. I wonder if we’ve even
    begun to understand
    how to use the space
    on the page yet.

    View Slide

  448. THE END

    View Slide