Responsive Design Patterns for an Evolving Web
summary
Shows about ten concrete responsive patterns built with flexbox and sass, not abstract theory: sidebar reordering via order and flex-direction, toolbar spacing with justify-content: space-between, truncated names using min-width: 0 plus text-overflow, tabs that auto-fill with flex:1, and card buttons pinned to the bottom using margin-top:auto. Demonstrations run and simplify layout compared to floats; some cross‑browser work needs postprocessing for IE10/11 and a few quirks (percent sizing oddities) remain.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 0:50Design Systems
- 5:07Design Conventions
- 6:45Naming Conventions
- 8:05Patterns
- 9:34Application Layout
- 10:10Mobile Layout
- 12:04Media Query
- 12:40Header
- 13:56Mobile
- 15:21Horizontal Vertical Horizon
- 19:06List
- 19:24User Actions
- 20:08Flexbox
- 21:32Tabs
- 22:02Smart tabs
- 22:28Flexbox tabs
- 25:30QA
related talks
50mLaziness in the Time of Responsive Design
43mGetting serious about Responsive Web Design
32mFlexbox & Grid How to Style with style
01h 10mSmart responsive interface design patterns
32mBreaking Barriers: Understanding Layout Between UI Design and Code
22mSay Hello to Box, Flex and Stack: Layouts in the Component Era
42mResponsive Design with RapidClipse
32mFall In Love With CSS