The web is ready for great graphic design
summary
Claim: the web is ready for great graphic design because modern layout tools actually do the work previously done with hacks. Uses CSS Grid, Flexbox, viewport units, fractions and minmax to get equal-height cards without JavaScript, precise column proportions (50ch middle column), overlap content sensibly, and animate posters built in HTML/CSS. Examples recreate printed posters and responsive grids in current browsers and rely on supports() fallbacks so the designs work where Grid is available and degrade simply elsewhere.
AI-written summary · about
chapters (12)
- 0:00Start
- 5:31Raster systems for visual design
- 15:14Stretch as a default
- 19:35Ratios in a whim: flexbox
- 20:00Ratios in a whim: grid
- 20:11Ratios in whitespace distribution
- 21:38A grid with viewport units
- 22:30Photos in grids
- 22:46Overlap and z-index
- 25:57Undoing floats
- 32:26A fifty characters column
- 33:02A column with 45-70 characters
related talks
48mThe web is ready for great graphic design
30mStart Using CSS Grid Layout Today
51mWeb Design Engineering With the New CSS
49mDynamic Layouts with CSS
30mThe Web Is Not Just Left-to-Right
31mHow to use CSS grid today in the real world
01h 02mStart Using CSS Grid Layout Today
26mWhy CSS Grid is a game changer for web design