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

D83926c323d4f9289f947b4b4e76b939?s=47 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

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 09, 2017
Tweet

Transcript

  1. 1.

    How New CSS Is Changing Everything About Graphic Design on

    the Web W3C Publishing Summit @jenSimmons
  2. 5.
  3. 7.
  4. 8.
  5. 9.
  6. 10.
  7. 11.
  8. 12.
  9. 13.
  10. 14.
  11. 15.
  12. 17.
  13. 18.
  14. 19.
  15. 20.
  16. 21.
  17. 22.
  18. 23.
  19. 24.
  20. 25.
  21. 26.
  22. 27.
  23. 28.
  24. 29.
  25. 30.
  26. 31.
  27. 32.
  28. 33.
  29. 35.
  30. 36.
  31. 37.
  32. 38.
  33. 39.
  34. 41.
  35. 42.

    The Official Timeline of Web Page Layout The No-Layout Layout

    Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
  36. 43.

    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
  37. 45.
  38. 46.
  39. 47.
  40. 50.

    1.

  41. 51.
  42. 52.
  43. 53.

    2.

  44. 54.
  45. 55.
  46. 56.
  47. 57.
  48. 58.
  49. 60.
  50. 61.

    3.

  51. 62.
  52. 63.
  53. 64.
  54. 65.
  55. 66.
  56. 67.
  57. 68.
  58. 69.

    4.

  59. 70.
  60. 71.
  61. 72.
  62. 73.
  63. 74.
  64. 75.

    5.

  65. 79.
  66. 81.
  67. 84.

    img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  68. 85.

    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% ); }
  69. 86.
  70. 88.
  71. 89.
  72. 93.
  73. 100.
  74. 101.
  75. 102.
  76. 103.
  77. 105.
  78. 106.
  79. 108.
  80. 114.
  81. 116.
  82. 118.

    THREE OPTIONS FOR WRITING-MODE writing-mode: vertical-lr; writing-mode: vertical-rl; toggle w/

    `dir` attribute in HTML + unicode writing-mode: horizontal-tb;
  83. 119.

    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
  84. 121.
  85. 123.
  86. 124.
  87. 125.

    .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
  88. 127.
  89. 129.
  90. 131.

    “ 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.
  91. 132.
  92. 134.
  93. 135.
  94. 136.
  95. 137.
  96. 138.
  97. 140.
  98. 141.
  99. 142.
  100. 143.
  101. 147.
  102. 149.

    What happens when parts of the content / interface are

    ‘missing’? Or are shorter / longer than ‘ideal’?
  103. 152.
  104. 156.

    Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

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