Responsive & Adaptive Design
Resize this window to see fluid typography, responsive grids, and container queries in action. Check the indicator in the top-right corner.
Section 1
Fluid Typography
No breakpoints. clamp() scales smoothly between a minimum and maximum based on viewport width. Resize to see it work.
Layout Systems for the Modern Web
font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem)
Fluid typography eliminates the need for font-size breakpoints. The middle value — the preferred size — is a viewport-relative unit that scales the text smoothly between the minimum and maximum bounds.
font-size: clamp(0.875rem, 2vw, 1.125rem)
Section 2
Responsive Card Grid
Mobile-first: starts at 1 column, steps to 2 at 640px, then 3 at 1024px. Three @media rules, no JS.
01
What Is Vibe Coding
The shift from writing code to directing code through natural language.
02
Prompt Anatomy
Context, intent, constraints, output format — the four parts of a reliable prompt.
03
Context Management
How to feed AI the right context so it generates code that fits your system.
04
Iteration Loop
First pass gets you 80%. The next 20% comes from targeted follow-up prompts.
05
Forms & Validation
Describing validation rules, error states, and accessibility in a single prompt.
06
GSAP Basics
Prompting for scroll animations by describing what you see, not the API.
1 col < 640px · 2 col ≥ 640px · 3 col ≥ 1024px
Section 3
Container Query Component
The card below responds to its container's width — not the viewport. When the container is narrow (sidebar scenario), it shows compact layout. When wide, it shows the full layout with image. This component will behave correctly whether placed in a sidebar, a grid, or full-width.
Layout Systems
Three layout patterns — magazine, masonry, and holy grail — each generated from a natural-language description of its visual shape.
This card responds to its container width, not the viewport. Place it anywhere — sidebar, grid, full-width — and it adapts.