Solving Layout Challenges With Pure Sass
summary
Shows twelve concrete layout fixes implemented with pure Sass/CSS — no framework, minimal JS — using viewport units and scroll-snap to build full-page sections, background‑fixed pseudo-elements for parallax, CSS Grid + FR/260px columns and named grid areas for a sidebar layout, container-aware card grids that alternate image order via order, clamp for fluid type, aspect‑ratio for embeds, transforms (not negative margins) for performant hover, position:sticky and clip-path for shapes; all examples compile and work in the browser.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 3:21Why websites excite me
- 8:22Contract to full-time
- 10:31Frameworks pitfalls
- 14:44Pure Sass for layouts
- 16:51Viewport units
- 18:39Scroll snapping without JS
- 20:04Grid and flexbox
- 22:52Repeating grids
- 24:36Container queries
- 26:01Nested grids
- 28:28Client requests creatively
- 31:18Dynamic grid order
- 33:47Hover effects
- 38:51Responsive typography
- 42:02Form design principles
- 47:24Form submission types
- 50:13Aspect ratios
- 51:37Sticky navigation
- 52:41Clip-path uses
- 54:29Where to go from here with CSS
- 56:38Q&A
