Responsive Design System

Build adaptive, mobile-first layouts with modern CSS features and Tailwind.

Core Workflow Define breakpoints: Establish responsive breakpoint system Set fluid typography: Clamp-based responsive fonts Create layout grid: Responsive grid system Add container queries: Component-level responsiveness Build responsive components: Adaptive patterns Test across devices: Verify on all viewports Breakpoint System Tailwind Default Breakpoints Breakpoint Min Width Target Devices sm 640px Large phones (landscape) md 768px Tablets lg 1024px Laptops xl 1280px Desktops 2xl 1536px Large screens Custom Breakpoints // tailwind.config.js module.exports = { theme: { screens: { 'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', '3xl': '1920px', // Max-width breakpoints 'max-sm': { max: '639px' }, 'max-md': { max: '767px' }, 'max-lg': { max: '1023px' }, // Range breakpoints 'tablet': { min: '768px', max: '1023px' }, // Feature queries 'touch': { raw: '(hover: none) and (pointer: coarse)' }, 'stylus': { raw: '(hover: none) and (pointer: fine)' }, 'mouse': { raw: '(hover: hover) and (pointer: fine)' }, }, }, };

Fluid Typography CSS Clamp Function / globals.css / :root { / Fluid type scale: min, preferred, max / --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); --text-3xl: clamp(1.875rem, 1.4rem + 2.25vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem); --text-5xl: clamp(3rem, 1.8rem + 6vw, 5rem);

/ Fluid spacing / --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem); --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem); --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem); --space-xl: clamp(2rem, 1.2rem + 4vw, 5rem); }

Tailwind Fluid Typography // tailwind.config.js const plugin = require('tailwindcss/plugin');

module.exports = { theme: { extend: { fontSize: { 'fluid-xs': 'clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)', 'fluid-sm': 'clamp(0.875rem, 0.8rem + 0.35vw, 1rem)', 'fluid-base': 'clamp(1rem, 0.9rem + 0.5vw, 1.125rem)', 'fluid-lg': 'clamp(1.125rem, 1rem + 0.6vw, 1.25rem)', 'fluid-xl': 'clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)', 'fluid-2xl': 'clamp(1.5rem, 1.2rem + 1.5vw, 2rem)', 'fluid-3xl': 'clamp(1.875rem, 1.4rem + 2.25vw, 2.5rem)', 'fluid-4xl': 'clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem)', 'fluid-5xl': 'clamp(3rem, 1.8rem + 6vw, 5rem)', }, }, }, };

Usage

Responsive Headline

Body text that scales smoothly.

Container Queries Enable Container Queries // tailwind.config.js module.exports = { theme: { extend: { containers: { 'xs': '320px', 'sm': '384px', 'md': '448px', 'lg': '512px', 'xl': '576px', '2xl': '672px', }, }, }, };

Container Query Usage

Responsive Card Component // components/ResponsiveCard.tsx export function ResponsiveCard({ title, description, image }: CardProps) { return (

{title}

{description}

Learn More

Responsive Grid Layouts Auto-Fit Grid

Dashboard Layout // components/DashboardLayout.tsx export function DashboardLayout({ sidebar, main }: LayoutProps) { return (

{/ Sidebar: Full width on mobile, fixed width on desktop /}

  {/* Main content */}
  <main className="flex-1 p-4 md:p-6 lg:p-8">
    <div className="max-w-7xl mx-auto">{main}</div>
  </main>
</div>

); }

Holy Grail Layout export function HolyGrailLayout({ header, sidebar, main, aside, footer }: LayoutProps) { return (

{header}

  <div className="grid grid-cols-1 md:grid-cols-[240px_1fr] lg:grid-cols-[240px_1fr_240px]">
    <aside className="hidden md:block bg-gray-50 p-4 border-r">
      {sidebar}
    </aside>

    <main className="p-4 md:p-6 overflow-auto">
      {main}
    </main>

    <aside className="hidden lg:block bg-gray-50 p-4 border-l">
      {aside}
    </aside>
  </div>

  <footer className="bg-gray-900 text-white px-4 py-6">
    {footer}
  </footer>
</div>

); }

Responsive Images Srcset and Sizes

Next.js Image import Image from 'next/image';

export function ResponsiveImage({ src, alt }: ImageProps) { return (

); }

Art Direction with Picture

Responsive Navigation Mobile Menu Pattern 'use client';

import { useState } from 'react'; import { Menu, X } from 'lucide-react';

export function ResponsiveNav({ links }: NavProps) { const [isOpen, setIsOpen] = useState(false);

return (