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

Transcript

1. How New CSS Is Changing Everything About Graphic Design on the Web W3C Publishing Summit @jenSimmons
2. @jensimmons
3. Layout & The Web
4. Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
6. drawing by Dave Ellis novolume.co.uk
16. The web wasn’t always like this
34. What Happened?
40. CSS Floats
42. The Official Timeline of Web Page Layout The No-Layout Layout Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
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
44. This new CSS changes everything in web layout.
48. Hot metal composition: Pasteup :: Floats : CSS Grid
49. labs.jensimmons.com
50. 1.
53. 2.
59. photo by Brad Frost, 2012, CC BY 2.0
61. 3.
69. 4.
75. 5.
76. labs.jensimmons.com/2017/01-008.html
77. labs.jensimmons.com/2017/01-008.html
78. labs.jensimmons.com/2017/01-008.html
79. Tools
80. CSS Shapes
82. img { float: left; shape-outside: circle(); }
83. img { width: 200px; margin: 0 1.5em 0.5em 0; float: left; }
84. img { width: 200px; margin: 0 1.5em 0.5em 0; float: left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
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% ); }
87. Initial Letter
90. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; initial-letter: 4; }
91. Viewport Units
92. labs.jensimmons.com/2017/01-008.html
94. Viewport Units 50vmin 100vh
95. Viewport Units 50vh 25vh 50vw 25vh 50vw !at dang “fold”
96. Fixed Size
97. Responsive Web Design
98. The New CSS Layout
99. Object Fit
104. img { width: 50%; height: 400px; object-fit: cover; }
107. Writing Mode
109. inline direction When I’m writing or reading this is the way the characters flow
110. <p> <p> <p> <p> block flow direction
111. Acharacter orientation
112. block direction inline direction Acharacter orientation
113. SYSTEMS LIKE LATIN block direction inline direction Acharacter orientation
115. HAN-BASED SYSTEMS block direction inline direction *Chinese, Japanese, Korean & more
117. HAN-BASED SYSTEMS block direction inline direction block direction inline direction *Chinese, Japanese, Korean & more
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;
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
120. chenhuijing.com/zh-type
122. h1:nth-child(2) { writing-mode: vertical-rl; }
123. CSS Grid
124. Grid
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
126. Rows *and* Columns
128. ROWS!!!!!!!!!!!
130. White Space
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.
133. The Vignelli Canon
136. Overlap
139. Tracks don’t have to all be the same size.
144. from alistapart.com/article/content-out-layout
145. The New Flexibility
146. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px 1fr minmax(40ch, 65ch)
148. “pixel perfect ”
149. What happens when parts of the content / interface are ‘missing’? Or are shorter / longer than ‘ideal’?
150. Design the flexibility model.
151. For more…
153. nightly.mozilla.org
154. labs.jensimmons.com
155. jensimmons.com
156. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
157. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!