The UI-Agnostic Core operates independently of viewport size through a mobile-first responsive framework. T-shirt sizing (XS-XL) provides consistent breakpoints across all Editions, ensuring predictable behavior from mobile devices to widescreen displays.

Mobile-First Philosophy

All styles begin at the smallest viewport (XS) and progressively enhance for larger screens. This approach ensures:

• Performance on constrained devices — Mobile users receive only essential styles
• Progressive enhancement — Larger viewports add layout complexity, not remove it
• Simplified maintenance — Base styles are the default; overrides are additive

T-Shirt Sizing Breakpoints

Five standardized breakpoints cover the full range of modern devices:

Implementation Pattern

Responsive styles follow a consistent structure:

/* XS: Mobile (default, no media query) */
.component {
    display: block;
    padding: 1rem;
}

/* S: Tablet */
@media (min-width: 600px) {
    .component {
        padding: 1.5rem;
    }
}

/* M: Laptop */
@media (min-width: 900px) {
    .component {
        display: flex;
        padding: 2rem;
    }
}

/* L: Desktop */
@media (min-width: 1200px) {
    .component {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* XL: Widescreen */
@media (min-width: 1800px) {
    .component {
        max-width: 1600px;
    }
}

Layout Patterns by Breakpoint

Testing Requirements

Each Edition must pass responsive testing at all five breakpoints:

• Visual inspection — No horizontal scroll, no overlapping elements
• Touch targets — Minimum 44x44px for interactive elements on XS/S
• Content priority — Critical content visible without scrolling on all sizes
• Performance — No layout shift during resize (CLS score maintained)

Common Pitfalls