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

How New CSS Is Changing Everything About Graphic Design on the Web

Jen Simmons
November 09, 2017

How New CSS Is Changing Everything About Graphic Design on the Web

Presented at the first W3C Publishing Summit, in San Francisco
https://www.w3.org/publishing/events/summit2017

Jen Simmons

November 09, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. How New CSS Is Changing
    Everything About Graphic
    Design on the Web
    W3C Publishing Summit
    @jenSimmons

    View full-size slide

  2. Layout & The Web

    View full-size slide

  3. Stephen Waller at Enhance Conf expressing how BORED he is with web design today.

    View full-size slide

  4. drawing by Dave Ellis
    novolume.co.uk

    View full-size slide

  5. The web wasn’t
    always like this

    View full-size slide

  6. What Happened?

    View full-size slide

  7. The Official Timeline of Web Page Layout
    The
    No-Layout
    Layout
    Table-based
    Layouts
    Hand-coded
    Float Layouts
    Framework
    Layouts Amazing
    Future!

    View full-size slide

  8. 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

    View full-size slide

  9. This new CSS
    changes everything
    in web layout.

    View full-size slide

  10. Hot metal composition: Pasteup ::
    Floats : CSS Grid

    View full-size slide

  11. labs.jensimmons.com

    View full-size slide

  12. photo by Brad Frost, 2012, CC BY 2.0

    View full-size slide

  13. labs.jensimmons.com/2017/01-008.html

    View full-size slide

  14. labs.jensimmons.com/2017/01-008.html

    View full-size slide

  15. labs.jensimmons.com/2017/01-008.html

    View full-size slide

  16. img {
    float: left;
    shape-outside: circle();
    }

    View full-size slide

  17. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    }

    View full-size slide

  18. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    shape-outside: circle();
    }
    There is a prefix: -webkit-shape-outside: circle();
    *

    View full-size slide

  19. img {
    max-width: 600px;
    float: left;
    margin-left: -26%;
    shape-outside:polygon(
    nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3%
    14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%,
    74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%,
    92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%,
    -5.6% 101.25%
    );
    }

    View full-size slide

  20. Initial Letter

    View full-size slide

  21. p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    initial-letter: 4;
    }

    View full-size slide

  22. Viewport Units

    View full-size slide

  23. labs.jensimmons.com/2017/01-008.html

    View full-size slide

  24. Viewport Units
    50vmin
    100vh

    View full-size slide

  25. Viewport Units
    50vh
    25vh
    50vw
    25vh
    50vw
    !at dang “fold”

    View full-size slide

  26. Responsive Web Design

    View full-size slide

  27. The New CSS Layout

    View full-size slide

  28. img {
    width: 50%;
    height: 400px;
    object-fit: cover;
    }

    View full-size slide

  29. Writing Mode

    View full-size slide

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

    View full-size slide





  31. block
    flow
    direction

    View full-size slide

  32. Acharacter orientation

    View full-size slide

  33. block
    direction
    inline direction
    Acharacter orientation

    View full-size slide

  34. SYSTEMS LIKE LATIN
    block
    direction
    inline direction
    Acharacter
    orientation

    View full-size slide

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

    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. THREE OPTIONS FOR WRITING-MODE
    writing-mode:
    vertical-lr;
    writing-mode:
    vertical-rl;
    toggle w/
    `dir` attribute
    in HTML +
    unicode
    writing-mode:
    horizontal-tb;

    View full-size slide

  38. TWO MORE (FUTURE) 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
    A
    A

    View full-size slide

  39. chenhuijing.com/zh-type

    View full-size slide

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

    View full-size slide

  41. .container {
    display: grid;
    grid-template-columns:
    1fr 1fr 1fr 1fr;
    grid-template-rows:
    1fr 1fr 1fr 1fr;
    }
    .item {
    grid-row: 1 / 3;
    grid-column: 2 / 4;
    }
    1 2 3 4
    1
    2
    3
    4
    5
    grid-row: 1 / 3;
    grid-column: 2 / 4;
    5

    View full-size slide

  42. Rows *and* Columns

    View full-size slide

  43. ROWS!!!!!!!!!!!

    View full-size slide


  44. 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

  45. The Vignelli Canon

    View full-size slide

  46. Tracks don’t have to all
    be the same size.

    View full-size slide

  47. from alistapart.com/article/content-out-layout

    View full-size slide

  48. The New Flexibility

    View full-size slide

  49. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr;
    1fr 1fr
    100px 1fr
    minmax(40ch, 65ch)

    View full-size slide

  50. “pixel perfect ”

    View full-size slide

  51. What happens when parts of
    the content / interface are ‘missing’?
    Or are shorter / longer
    than ‘ideal’?

    View full-size slide

  52. Design the flexibility model.

    View full-size slide

  53. nightly.mozilla.org

    View full-size slide

  54. labs.jensimmons.com

    View full-size slide

  55. jensimmons.com

    View full-size slide

  56. Modern Layouts: 

    Getting Out of Our Ruts
    Revolutionize Your Page: 

    Real Art Direction on the Web
    2015
    2016
    available on jensimmons.com

    View full-size slide

  57. jensimmons.com
    @jensimmons
    layout.land
    labs.jensimmons.com
    Thanks!

    View full-size slide