responsive-engine

# Responsive Engine Layouts that work at every screen size without breakpoint spaghetti. Inspired by Ahmad Shadeed (Container Queries), Jen Simmons (Intrinsic Web Design), and the CSS Working Group. ## Core Principle Responsive design is about containers, not viewports. Use Container Queries first, media queries only for global layout shifts and form factor detection. --- ## Container Queries (preferred over media queries) ```css .card-grid { container-type: inline-size; container-name: card-grid; } @container card-grid (min-width: 600px) { .card { display: grid; grid-template-columns: 200px 1fr; } } @container card-grid (min-width: 900px) { .card { grid-template-columns: 1fr 1fr 1fr; } } ``` ### Container query length units ```css .card { padding: 10cqw; /* 10% of container width */ font-size: 5cqi; /* 5% of container inline size */ margin-block: 2cqb; /* 2% of container block size */ border-radius: 1cqmin; /* 1% of container smaller side */ } ``` --- ## Form Factor Detection Detect the device type, not just width. ```css /* Touch vs mouse */ @media (pointer: coarse) { .button { min-height: 48px; } } @media (hover: hover) { .card:hover { transform: scale(1.02); } } @media (hover: none) { .card:active { transform: scale(0.98); } } /* Portrait vs landscape */ @media (orientation: portrait) { .hero-grid { grid-template-columns: 1fr; } } ``` --- ## Viewport Unit Decision Tree | Use case | Unit | Why | |-------...