Complete 3.2.2: Implement Responsive Typography System
This commit is contained in:
parent
2f73e0e062
commit
c4e1c55df9
2 changed files with 156 additions and 9 deletions
10
UI_UPDATE.MD
10
UI_UPDATE.MD
|
|
@ -322,10 +322,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
|
||||||
|
|
||||||
**Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities.
|
**Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities.
|
||||||
|
|
||||||
#### 3.2.2: Responsive Typography
|
#### 3.2.2: Responsive Typography - COMPLETED 9/29/2025
|
||||||
- [ ] Create fluid typography scaling
|
- [x] Create fluid typography scaling
|
||||||
- [ ] Implement responsive font sizing
|
- [x] Implement responsive font sizing
|
||||||
- [ ] Add breakpoint-specific text adjustments
|
- [x] Add breakpoint-specific text adjustments
|
||||||
|
|
||||||
|
**Notes:** Implemented comprehensive fluid typography system using clamp() for responsive font scaling. Added fluid heading scale utilities (.text-fluid-xs through .text-fluid-3xl) that automatically scale from minimum to maximum sizes based on viewport width. Created breakpoint-specific font size adjustments for all breakpoints (.sm\:text-xs, .md\:text-lg, etc.). Added responsive line height utilities (.sm\:leading-tight, etc.) and complete font weight scale (.font-thin through .font-black). All typography utilities use the established CSS custom properties from variables.css for consistency and maintainability.
|
||||||
|
|
||||||
#### 3.2.3: Component Breakpoint Overrides
|
#### 3.2.3: Component Breakpoint Overrides
|
||||||
- [ ] Create component-specific responsive behavior
|
- [ ] Create component-specific responsive behavior
|
||||||
|
|
|
||||||
|
|
@ -666,11 +666,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Border Utilities */
|
/* Border Utilities */
|
||||||
.border { border: 1px solid var(--color-border-primary); }
|
.border { border: 1px solid var(--border-color); }
|
||||||
.border-t { border-top: 1px solid var(--color-border-primary); }
|
.border-t { border-top: 1px solid var(--border-color); }
|
||||||
.border-b { border-bottom: 1px solid var(--color-border-primary); }
|
.border-b { border-bottom: 1px solid var(--border-color); }
|
||||||
.border-l { border-left: 1px solid var(--color-border-primary); }
|
.border-l { border-left: 1px solid var(--border-color); }
|
||||||
.border-r { border-right: 1px solid var(--color-border-primary); }
|
.border-r { border-right: 1px solid var(--border-color); }
|
||||||
|
|
||||||
/* Text Alignment */
|
/* Text Alignment */
|
||||||
.text-left { text-align: left; }
|
.text-left { text-align: left; }
|
||||||
|
|
@ -754,6 +754,151 @@
|
||||||
.2xl\:text-right { text-align: right; }
|
.2xl\:text-right { text-align: right; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =================================================================
|
||||||
|
RESPONSIVE TYPOGRAPHY UTILITIES
|
||||||
|
================================================================= */
|
||||||
|
|
||||||
|
/* Base responsive typography scaling using clamp() for fluid font sizes */
|
||||||
|
|
||||||
|
/* Fluid heading scale utilities */
|
||||||
|
.text-fluid-xs {
|
||||||
|
font-size: clamp(var(--font-size-xs), 2.5vw, var(--font-size-sm));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-sm {
|
||||||
|
font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-base));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-base {
|
||||||
|
font-size: clamp(var(--font-size-base), 3.5vw, var(--font-size-lg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-lg {
|
||||||
|
font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-xl {
|
||||||
|
font-size: clamp(var(--font-size-xl), 4.5vw, var(--font-size-2xl));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-2xl {
|
||||||
|
font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fluid-3xl {
|
||||||
|
font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-4xl));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive font weight utilities */
|
||||||
|
.font-thin { font-weight: 100; }
|
||||||
|
.font-extralight { font-weight: 200; }
|
||||||
|
.font-light { font-weight: 300; }
|
||||||
|
.font-normal { font-weight: var(--font-weight-normal); }
|
||||||
|
.font-medium { font-weight: var(--font-weight-medium); }
|
||||||
|
.font-semibold { font-weight: var(--font-weight-semibold); }
|
||||||
|
.font-bold { font-weight: var(--font-weight-bold); }
|
||||||
|
.font-extrabold { font-weight: 800; }
|
||||||
|
.font-black { font-weight: 900; }
|
||||||
|
|
||||||
|
/* Responsive line height utilities */
|
||||||
|
.leading-none { line-height: 1; }
|
||||||
|
.leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
|
||||||
|
/* Breakpoint-specific font size adjustments */
|
||||||
|
@media (min-width: var(--breakpoint-sm)) {
|
||||||
|
.sm\:text-xs { font-size: var(--font-size-xs); }
|
||||||
|
.sm\:text-sm { font-size: var(--font-size-sm); }
|
||||||
|
.sm\:text-base { font-size: var(--font-size-base); }
|
||||||
|
.sm\:text-lg { font-size: var(--font-size-lg); }
|
||||||
|
.sm\:text-xl { font-size: var(--font-size-xl); }
|
||||||
|
.sm\:text-2xl { font-size: var(--font-size-2xl); }
|
||||||
|
.sm\:text-3xl { font-size: var(--font-size-3xl); }
|
||||||
|
.sm\:text-4xl { font-size: var(--font-size-4xl); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-md)) {
|
||||||
|
.md\:text-xs { font-size: var(--font-size-xs); }
|
||||||
|
.md\:text-sm { font-size: var(--font-size-sm); }
|
||||||
|
.md\:text-base { font-size: var(--font-size-base); }
|
||||||
|
.md\:text-lg { font-size: var(--font-size-lg); }
|
||||||
|
.md\:text-xl { font-size: var(--font-size-xl); }
|
||||||
|
.md\:text-2xl { font-size: var(--font-size-2xl); }
|
||||||
|
.md\:text-3xl { font-size: var(--font-size-3xl); }
|
||||||
|
.md\:text-4xl { font-size: var(--font-size-4xl); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-lg)) {
|
||||||
|
.lg\:text-xs { font-size: var(--font-size-xs); }
|
||||||
|
.lg\:text-sm { font-size: var(--font-size-sm); }
|
||||||
|
.lg\:text-base { font-size: var(--font-size-base); }
|
||||||
|
.lg\:text-lg { font-size: var(--font-size-lg); }
|
||||||
|
.lg\:text-xl { font-size: var(--font-size-xl); }
|
||||||
|
.lg\:text-2xl { font-size: var(--font-size-2xl); }
|
||||||
|
.lg\:text-3xl { font-size: var(--font-size-3xl); }
|
||||||
|
.lg\:text-4xl { font-size: var(--font-size-4xl); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-xl)) {
|
||||||
|
.xl\:text-xs { font-size: var(--font-size-xs); }
|
||||||
|
.xl\:text-sm { font-size: var(--font-size-sm); }
|
||||||
|
.xl\:text-base { font-size: var(--font-size-base); }
|
||||||
|
.xl\:text-lg { font-size: var(--font-size-lg); }
|
||||||
|
.xl\:text-xl { font-size: var(--font-size-xl); }
|
||||||
|
.xl\:text-2xl { font-size: var(--font-size-2xl); }
|
||||||
|
.xl\:text-3xl { font-size: var(--font-size-3xl); }
|
||||||
|
.xl\:text-4xl { font-size: var(--font-size-4xl); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-2xl)) {
|
||||||
|
.2xl\:text-xs { font-size: var(--font-size-xs); }
|
||||||
|
.2xl\:text-sm { font-size: var(--font-size-sm); }
|
||||||
|
.2xl\:text-base { font-size: var(--font-size-base); }
|
||||||
|
.2xl\:text-lg { font-size: var(--font-size-lg); }
|
||||||
|
.2xl\:text-xl { font-size: var(--font-size-xl); }
|
||||||
|
.2xl\:text-2xl { font-size: var(--font-size-2xl); }
|
||||||
|
.2xl\:text-3xl { font-size: var(--font-size-3xl); }
|
||||||
|
.2xl\:text-4xl { font-size: var(--font-size-4xl); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breakpoint-specific line height adjustments */
|
||||||
|
@media (min-width: var(--breakpoint-sm)) {
|
||||||
|
.sm\:leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.sm\:leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.sm\:leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.sm\:leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-md)) {
|
||||||
|
.md\:leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.md\:leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.md\:leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.md\:leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-lg)) {
|
||||||
|
.lg\:leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.lg\:leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.lg\:leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.lg\:leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-xl)) {
|
||||||
|
.xl\:leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.xl\:leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.xl\:leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.xl\:leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-2xl)) {
|
||||||
|
.2xl\:leading-tight { line-height: var(--line-height-tight); }
|
||||||
|
.2xl\:leading-normal { line-height: var(--line-height-normal); }
|
||||||
|
.2xl\:leading-relaxed { line-height: var(--line-height-relaxed); }
|
||||||
|
.2xl\:leading-loose { line-height: var(--line-height-loose); }
|
||||||
|
}
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
FLEXBOX UTILITIES
|
FLEXBOX UTILITIES
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue