194 lines
8.6 KiB
Markdown
194 lines
8.6 KiB
Markdown
# 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`)
|
|
|
|
```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
|
|
|
|
### Step 1: Authentication & User Login Portal Layout
|
|
* 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.
|
|
|
|
```tsx
|
|
<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`.
|
|
|
|
```tsx
|
|
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.
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
```tsx
|
|
<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
|
|
|
|
- [x] All typography uses relative units (`rem`, `em`, `clamp`).
|
|
- [x] Setting root font scale to 200% displays legible text without overlapping nodes.
|
|
- [x] Layout reflows smoothly; no horizontal scrollbar on primary document body.
|
|
- [x] Modals, drawers, and popovers maintain scrollable content areas at large font scales.
|
|
- [x] Interactive touch targets remain at minimum 44x44px equivalent size.
|