dexter/BTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
BTerminal/.claude/rules/18-relative-units.md
Hibryda 906e967aa0 style(v3): add relative-units rule and convert sidebar CSS from px to rem 
Add .claude/rules/18-relative-units.md enforcing rem/em for layout CSS
(px only for icons/borders). Convert GlobalTabBar.svelte and App.svelte
sidebar styles from px to rem. Change rail-btn color to --ctp-subtext0.
2026-03-08 00:27:20 +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.