Building responsive CSS components
summary
Shows how to make components actually scale: use relative units (em/rem) to scale to font size and viewport units (vw/vh) for fluid sizing, use rem for consistent spacing, and reset margins so components stack like Lego; demonstrates the adjacency selector (+) and universal selectors to manage internal whitespace, recommends mobile‑first min‑width media queries but uses max‑width to constrain bleed, sketches a working demo that switches grid/single layouts by toggling a class, and advocates BEM and avoiding IDs to keep specificity manageable.
AI-written summary · about
chapters (11)
- 0:00Start
- 0:19Building Scalable Components
- 5:06Proportional Scaling Responsive Scaling and Modular Scaling
- 7:22Scale According to the Viewport
- 8:09Fluid Topography
- 10:05Modular Scaling
- 14:25Managing Internal Whitespace
- 17:33Responsive Scaling
- 17:49Media Queries
- 27:12Additional Tips Naming Components
- 27:35Name Spacing
related talks
28mResponsive Components: Present & Future
35mModern CSS Replacements for Better Responsive Code
51mWeb Design Engineering With the New CSS
26mResponsive Components: Present & Future
35mScaling CSS Layout Beyond Pixels
48mSmart Layout Patterns with Modern CSS
52mModern CSS Layout
13mBreaking Out of Media Queries