Solving Layout Challenges With Pure Sass
summary
Twelve concrete patterns for building responsive layouts with plain CSS (authored in Sass for nesting and variables) show what to use and why: viewport units plus scroll-snap create full-screen slides, background-attachment and layered gradients give parallax with no JavaScript, CSS Grid and grid-template-areas handle header/aside/main/footer and alternating card layouts via nth-child, transform-based hover animations avoid layout jank, clamp() drives fluid type, aspect-ratio preserves embeds, position:sticky pins rails, clip-path/shape-outside craft nonrectangular artboards, and accessible focusable form markup replaces fragile hacks.
AI-written summary · about
chapters (17)
- 0:00Introduction and speaker intro
- 5:17Why frameworks are problematic
- 9:52Pure Sass and CSS focus
- 12:03Viewport units and scroll snapping
- 14:29Parallax without JavaScript
- 15:57Basic grid layouts
- 18:05Repeating grid layouts
- 20:34Responsive card layouts
- 23:44Alternating card designs
- 26:56Safe hover effects with transforms
- 31:34Responsive typography with clamp
- 34:26Accessible form design
- 37:54Responsive iframes and aspect ratios
- 39:19Position sticky for navigation
- 40:47Clip paths and text wrapping
- 43:16CSS grid and flexbox resources
- 45:47Sass documentation and organization
