Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

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

    View full-size slide

  3. CSS Grid
    Writing Modes

    View full-size slide

  4. Today’s Plan

    View full-size slide

  5. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  8. labs.jensimmons.com/workshop

    View full-size slide

  9. Writing Modes

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  12. direction
    writing-mode
    text-orientation

    View full-size slide

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

    View full-size slide





  14. block
    flow
    direction

    View full-size slide

  15. LATIN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

  16. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

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

    View full-size slide

  18. English words

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

    .foo { direction: rtl; }

    View full-size slide

  19. English words

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

    View full-size slide

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

    View full-size slide

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

    .css {direction: ltr;}

    View full-size slide

  22. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

  23. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. MONGOLIAN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

  29. MONGOLI
    inline direction

    View full-size slide

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

    View full-size slide

  31. Top of
    page
    Top of
    characters
    hello

    View full-size slide

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

    View full-size slide

  33. block
    direction
    inline direction

    View full-size slide

  34. LATIN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

  35. ARABIC-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

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

    View full-size slide

  37. MONGOLIAN-BASED SYSTEMS
    direction
    block
    inline direction

    View full-size slide

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

    .css {direction: ltr;}

    View full-size slide

  39. writing-mode

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide

  42. 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 full-size slide

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

    View full-size slide

  44. My Cool Website

    View full-size slide

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

    View full-size slide

  46. My Cool Website

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  51. text-orientation

    View full-size slide

  52. HAN-BASED SYSTEMS
    block
    direction
    inline direction

    View full-size slide

  53. 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 full-size slide

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

    View full-size slide

  55. 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 full-size slide

  56. My Cool Website
    how?

    View full-size slide

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

    View full-size slide

  58. direction
    writing-mode
    text-orientation

    View full-size slide

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

    .css {direction: ltr;}

    View full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. QUESTION TIME
    COMING SOON

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide



  76. Made
    by
    Few


    Example: Writing Mode 3A

    View full-size slide

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

    View full-size slide

  78. 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 full-size slide

  79. Writing Modes

    View full-size slide

  80. direction
    writing-mode
    text-orientation

    View full-size slide

  81. block inline

    View full-size slide

  82. block end
    inline
    start
    inline
    end
    block start

    View full-size slide

  83. block end
    inline start
    inline end
    block start

    View full-size slide

  84. block start
    inline start
    inline end
    block end

    View full-size slide

  85. block start
    inline end
    inline start
    block end

    View full-size slide

  86. end
    start
    end
    start

    View full-size slide

  87. start
    start
    end
    end

    View full-size slide

  88. cross axis
    main axis

    View full-size slide

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

    View full-size slide

  90. For the rest of today…

    View full-size slide

  91. block end
    inline
    start
    inline
    end
    block start

    View full-size slide

  92. LET’S GET TO
    IT ALREADY
    CSS GRID

    View full-size slide

  93. w3.org/TR/css3-grid

    View full-size slide

  94. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  101. chrome://flags

    View full-size slide

  102. opera://flags

    View full-size slide

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

    View full-size slide

  104. Develop > Experimental Features > CSS Grid

    View full-size slide

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

    Dev Edition
    Firefox 

    Nightly
    Just Works

    View full-size slide

  106. about:config

    View full-size slide

  107. nightly.mozilla.org

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide


  111. — 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 full-size slide


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

    to get fixed.

    View full-size slide


  113. — 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 full-size slide


  114. — Jen Simmons
    These people are wrong.

    View full-size slide


  115. —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 full-size slide


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

    View full-size slide


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

    View full-size slide

  118. labs.jensimmons.com

    View full-size slide

  119. labs.jensimmons.com/workshop

    View full-size slide

  120. Grid Container

    View full-size slide


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





















    View full-size slide
















  122. body {
    display: grid;
    }

    View full-size slide
















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

    View full-size slide
















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

    View full-size slide
















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

    View full-size slide
















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

    View full-size slide

  127. Grid Container

    View full-size slide

  128. Grid Area
    Grid Line
    Grid Track
    Grid Track
    Grid Cell
    Grid Line
    Grid Line
    Grid Line
    Grid Line

    View full-size slide

  129. 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 full-size slide

  130. The Grid
    vs.
    The Content

    View full-size slide

  131. • Exists in HTML
    • Can be styled, 

    like anything in HTML

    View full-size slide

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

    in the DOM

    View full-size slide

  133. 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 full-size slide

  134. 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 full-size slide

  135. .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 full-size slide

  136. 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 full-size slide

  137. .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 full-size slide

  138. 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 full-size slide

  139. .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 full-size slide

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

    View full-size slide

  141. 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 full-size slide

  142. Explicit Grid
    vs
    Implicit Grid

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  145. Sparse & Dense

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  149. .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 full-size slide

  150. 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 full-size slide

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

    View full-size slide

  152. Grid Container

    View full-size slide

  153. Grid Area
    Grid Line
    Grid Track
    Grid Track
    Grid Cell
    Grid Line
    Grid Line
    Grid Line
    Grid Line
    header

    View full-size slide

  154. 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 full-size slide

  155. 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 full-size slide

  156. block inline

    View full-size slide

  157. cross axis
    main axis

    View full-size slide

  158. justify
    align

    View full-size slide

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

    View full-size slide

  160. align-content
    justify-content

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  163. align-items
    justify-items

    View full-size slide

  164. Specify this on the container.

    View full-size slide

  165. flex-start
    flex-end
    center
    stretch
    baseline

    View full-size slide

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

    View full-size slide

  167. align-self
    justify-self

    View full-size slide

  168. Specify this on an item.

    View full-size slide

  169. flex-start
    flex-end
    center
    stretch
    baseline

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    1px solid #444;
    }

    View full-size slide

  175. USING A
    GRID
    TO 

    LINE THINGS UP
    LIKE A MODERNIST
    WITH
    JEN SIMMONS

    View full-size slide

  176. Massimo & Lella Vignelli

    View full-size slide

  177. vignelli.com/canon.pdf

    View full-size slide

  178. LAYOUT
    AND THE
    MEDIUM
    OF THE
    WEB

    View full-size slide

  179. Things to consider.
    Things to design for.

    View full-size slide

  180. world wide web

    View full-size slide

  181. 1. The Viewport

    View full-size slide

  182. Filmmaking &
    Cinematography

    View full-size slide

  183. Saul &
    Elaine Bass

    View full-size slide

  184. Bass &
    Associates

    View full-size slide

  185. 25vw
    50vh that
    dang
    “fold”

    View full-size slide

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

    View full-size slide

  187. what does it mean to have a 

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

    View full-size slide

  188. what does it mean to have a 

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

    View full-size slide

  189. 1. Design for 

    the Viewport

    View full-size slide

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

    View full-size slide

  191. drawing by Dave Ellis
    novolume.co.uk

    View full-size slide

  192. We must make sure our
    audience knows the answer 

    to this question: 

    “Where do I go to get more 

    of this thing?”

    View full-size slide

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

    View full-size slide

  194. We don’t have to
    vertical scroll.

    View full-size slide

  195. the link
    the page

    View full-size slide

  196. mental model of
    offscreen v. onscreen

    View full-size slide

  197. 2. Design the Flow

    View full-size slide


  198. — 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 full-size slide

  199. 3. Consider Density
    Carefully

    View full-size slide

  200. 4. Asymmetry

    View full-size slide

  201. 4. Asymmetry & 

    Visual Hierarchy

    View full-size slide

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

    View full-size slide