Case Study: Rebuilding TechCrunch layout with modern CSS
A technical case study exploring how to rebuild the TechCrunch website layout using modern CSS techniques like Flexbox and Grid.
A technical case study exploring how to rebuild the TechCrunch website layout using modern CSS techniques like Flexbox and Grid.
A video talk from a conference covering modern CSS layout techniques and new features for web development.
A technical exploration of the CSS :has() pseudo-class, demonstrating its power for selecting parent and sibling elements with interactive demos.
Explains how SwiftUI's relative sizing modifier behaves within HStack and VStack layouts, detailing the layout algorithm and order dependencies.
A tutorial on creating a custom SwiftUI layout modifier to size views relative to their container's dimensions, using percentages.
Explores the CSS `resize` property, its use in container query demos, practical applications, and current limitations.
A deep dive into a powerful 3-line CSS utility for managing vertical spacing and flow in web layouts, explaining its evolution and practical applications.
A talk on modern CSS layout techniques, emphasizing flexibility and new features like Container Queries and :has().
A guide to dynamically switching between SwiftUI's HStack and VStack layouts based on device orientation or screen size.
A CSS tutorial on techniques for creating full-width components within a centrally constrained layout, discussing markup and styling solutions.
A personal recap of the CSS Day 2022 conference in Amsterdam, highlighting key talks on CSS layout, animations, new features, and developer tools.
A detailed guide explaining the differences between CSS position properties: static, relative, absolute, fixed, and sticky.
Explores the concept of 'CSS forces' as a design principle for creating balanced, fluid layouts by distributing pressure and relief across a composition.
A CSS tutorial on creating a dynamic line separator between flexbox items that adapts to screen size, using pseudo-elements and flexbox properties.
Explains the CSS aspect-ratio property, its benefits over the old 'padding hack', and practical usage examples.
Explains why CSS `position: sticky` fails inside CSS Grid containers and how to fix it by overriding the default `align-items: stretch` behavior.
Analyzing the cleverness and maintainability of complex CSS solutions, like Facebook's conditional border-radius toggle, versus simpler, more readable alternatives.
A tutorial on using CSS Flexbox to build modern, responsive website headers, covering layout techniques and common challenges.
A CSS tutorial on creating hover effects for irregular-shaped links in grid layouts using subgrid and accessibility considerations.
A guide to implementing and using CSS layout wrappers (containers) for better content readability and design structure.