8.6 KiB

Raw Blame History

Dynamic Font Sizing & Responsive Layout Technical Architecture Specification

1. Overview & Architectural Goals

This specification defines the technical layout architecture, design tokens, and CSS reflow system required to build a dynamically scalable User Interface (UI) for the NextGen LMS platform.

The system guarantees that when users increase font size up to 200% (via in-app font controls or native browser scaling), the layout dynamically adapts without text truncation, clipping, overlapping, or horizontal body scrolling.

2. Core Technical Requirements

Scalable Units: All font sizes, line heights, paddings, margins, and container min-heights MUST use relative units (rem, em, %, vh/vw, ch) rather than fixed pixel dimensions (px).
Flexible Container Sizing: Containers must use min-h-*, max-w-full, flex-wrap, and grid-cols-[repeat(auto-fit,minmax(280px,1fr))] to enable fluid expansion as text grows.
Overflow & Reflow Protection: Text elements must use break-words, hyphens-auto, or responsive flex wrapping so that scaling up to 200% flows vertically without clipping.

3. Design System & CSS Typography Architecture

A. Root Scaling Tokens (`index.css`)

/* Custom properties for dynamic font scale factor */
:root {
  --font-scale-factor: 1;
  --base-font-size: 16px;
  font-size: calc(var(--base-font-size) * var(--font-scale-factor));
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* User accessibility font scale overrides */
[data-font-size="100"] { --font-scale-factor: 1.00; }
[data-font-size="125"] { --font-scale-factor: 1.25; }
[data-font-size="150"] { --font-scale-factor: 1.50; }
[data-font-size="175"] { --font-scale-factor: 1.75; }
[data-font-size="200"] { --font-scale-factor: 2.00; }

/* Fluid Typography Classes */
.text-fluid-xs   { font-size: clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem); }
.text-fluid-sm   { font-size: clamp(0.875rem, 0.80rem + 0.35vw, 1.00rem);  }
.text-fluid-base { font-size: clamp(1.00rem,  0.90rem + 0.50vw, 1.125rem); }
.text-fluid-lg   { font-size: clamp(1.125rem, 1.00rem + 0.60vw, 1.25rem);  }
.text-fluid-xl   { font-size: clamp(1.25rem,  1.10rem + 0.75vw, 1.50rem);  }
.text-fluid-2xl  { font-size: clamp(1.50rem,  1.30rem + 1.00vw, 2.00rem);  }

4. Layout Implementation Blueprint

Use centered flex containers with dynamic padding (p-4 md:p-8).
Input fields and labels use min-h-[2.75rem], w-full, and relative rem font sizes to adapt when text scales up.

<div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 lg:p-8 bg-background">
  <div className="w-full max-w-md space-y-6 bg-card p-6 sm:p-8 rounded-[2rem] border border-border shadow-xl">
    <div className="space-y-2">
      <h1 className="text-fluid-2xl font-black text-text break-words">Welcome Back</h1>
      <p className="text-fluid-sm text-text-muted leading-relaxed">
        Log in to LMS to access your courses, attendance, and administrative controls.
      </p>
    </div>
  </div>
</div>

Step 2: Global Accessibility & Font Size Controls Component

Implement an accessible dropdown/toggle control in the navbar or user settings modal.
Store choice in localStorage and apply data-font-size="200" to document.documentElement.

import React, { useState, useEffect } from 'react';
import { Type, Check } from 'lucide-react';

export const FontSizeController: React.FC = () => {
  const [scale, setScale] = useState<number>(() => {
    return Number(localStorage.getItem('app-font-scale')) || 100;
  });

  const applyScale = (newScale: number) => {
    setScale(newScale);
    localStorage.setItem('app-font-scale', String(newScale));
    document.documentElement.setAttribute('data-font-size', String(newScale));
  };

  useEffect(() => {
    applyScale(scale);
  }, []);

  return (
    <div className="flex items-center gap-2 p-2 rounded-xl bg-muted/30 border border-border">
      <Type size={16} className="text-text-muted shrink-0" />
      <span className="text-xs font-bold uppercase tracking-wider text-text-muted">Font Size:</span>
      <div className="flex items-center gap-1">
        {[100, 125, 150, 175, 200].map((level) => (
          <button
            key={level}
            onClick={() => applyScale(level)}
            className={`px-2.5 py-1 rounded-lg text-xs font-black transition-all ${
              scale === level
                ? 'bg-primary text-white shadow-sm'
                : 'bg-muted hover:bg-muted/80 text-text-muted'
            }`}
          >
            {level}%
          </button>
        ))}
      </div>
    </div>
  );
};

Step 3: Responsive Card Grid & Dashboard Reflow

Replace hardcoded grid columns (grid-cols-4) with responsive auto-fit grids (grid-cols-[repeat(auto-fit,minmax(280px,1fr))]).
Allow card titles and content to wrap dynamically without truncation.

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4 sm:gap-6">
  {cards.map((card) => (
    <div key={card.id} className="p-5 rounded-2xl bg-card border border-border flex flex-col justify-between min-h-[140px] space-y-3">
      <div className="flex items-start justify-between gap-3">
        <h3 className="font-extrabold text-fluid-base text-text leading-snug break-words flex-1">
          {card.title}
        </h3>
        <span className="shrink-0 p-2 rounded-xl bg-primary/10 text-primary">
          <card.icon size={20} />
        </span>
      </div>
      <p className="text-fluid-sm font-medium text-text-muted leading-relaxed break-words">
        {card.description}
      </p>
    </div>
  ))}
</div>

Step 4: Page Layout Adaptation Across LMS Routes

Enforce mobile-first responsive layout wrappers for all main routes:
- Sidebar: Collapsible drawer on narrow viewports or large font scales.
- Main Content Area: flex-1 min-w-0 overflow-y-auto p-4 sm:p-6 lg:p-8.
- Data Tables & Lists: Container overflow handling (overflow-x-auto) to prevent horizontal clipping of page boundaries.

Step 5: Modal & Dialog Reflow Safeguards (`Modal.tsx`)

Modals must feature scrollable body containers (max-h-[75vh] overflow-y-auto) and wrapping flex headers so headers never overlap buttons at 200% font size.

<div className="fixed inset-0 bg-[#002147]/60 backdrop-blur-sm z-[150] flex items-center justify-center p-4">
  <div className="bg-card border border-border rounded-[2.5rem] shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]">
    {/* Modal Header */}
    <div className="p-6 border-b border-border flex items-start justify-between gap-4 shrink-0">
      <div className="min-w-0 flex-1">
        <h2 className="text-fluid-xl font-extrabold text-text break-words">{title}</h2>
        <p className="text-fluid-xs font-bold text-text-muted uppercase tracking-wider mt-1 break-words">{subtitle}</p>
      </div>
      <button onClick={onClose} className="p-2 rounded-xl bg-muted text-text-muted hover:text-text shrink-0">
        <X size={20} />
      </button>
    </div>
    
    {/* Scrollable Body */}
    <div className="p-6 overflow-y-auto space-y-6 flex-1 min-h-0">
      {children}
    </div>
  </div>
</div>

5. Layout Adaptability & Verification Matrix

UI Component	Design Rule	Scalability Outcome (at 200% Font Scale)
Page Headings & Titles	`text-fluid-2xl`, `break-words`	Headings grow proportionally; wrap cleanly onto next line.
Navigation & Layout Mode	`html[data-font-size="150"]`, `html[data-font-size="175"]`, `html[data-font-size="200"]`	Automatically collapses rigid desktop sidebar and adapts mobile header, bottom nav bar, and hamburger drawer at 150% scale and up.
Data Cards & Summary Grid	`grid-cols-[repeat(auto-fit,minmax(280px,1fr))]`	Grid transforms from multi-column to single-column reflow.
Form Inputs & Select Dropdowns	`h-auto min-h-[3rem] py-3`	Inputs expand vertically to accommodate enlarged text.
Action Buttons & Modals	`flex-col sm:flex-row`, `min-w-0`	Buttons stack vertically on narrow bounds; zero overlapping.

6. Accessibility & Readability Acceptance Checklist

All typography uses relative units (rem, em, clamp).
Setting root font scale to 200% displays legible text without overlapping nodes.
Layout reflows smoothly; no horizontal scrollbar on primary document body.
Modals, drawers, and popovers maintain scrollable content areas at large font scales.
Interactive touch targets remain at minimum 44x44px equivalent size.

8.6 KiB Raw Blame History