dexter/BTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
BTerminal/.claude/rules/53-relative-units.md
Hibryda ee198a2fdb chore: reorganize rules files — consolidate duplicates 
Migrates legacy rule numbering (18, 20) to standardized sequence (53, 54) and adds new 18-preexisting-issues.md for handling pre-existing issues during development. This consolidates duplicate rule coverage across the old and new numbering schemes.

Files changed:
- Removed: 18-relative-units.md (moved to 53-relative-units.md)
- Removed: 20-testing-gate.md (moved to 54-testing-gate.md)
- Added: 18-preexisting-issues.md (new)
- Added: 53-relative-units.md (renamed from 18)
- Added: 54-testing-gate.md (renamed from 20)
2026-03-12 06:47:47 +01:00

842 B
Raw Blame History

Relative Units (CSS)

Use relative units (em, rem, %, vh, vw) for layout and spacing. Pixels are acceptable only for:

  • Icon sizes (width/height on <svg> or icon containers)
  • Borders and outlines (1px solid ...)
  • Box shadows

Rules

  • Layout dimensions (width, height, max-width, min-width): use em, rem, %, or viewport units.
  • Padding and margin: use em or rem.
  • Font sizes: use rem or em, never px.
  • Gap, border-radius: use em or rem.
  • Media queries: use em.
  • When existing code uses px for layout elements, convert to relative units as part of the change.
  • CSS custom properties for typography (--ui-font-size, --term-font-size) store px values because they feed into JS APIs (xterm.js) that require pixels. This is the only exception beyond icons/borders.