Skip to content

Why Foundation

Foundation solves a specific problem: several independent projects were repeating the same low-level mechanics with slightly different names, styles and decisions.

What problem it solves

  • Repeated breakpoints and SCSS scales.
  • Small helpers like cx duplicated across repositories.
  • Protected media handled inconsistently.
  • Metadata, canonical URLs, sitemaps and static HTML solved multiple times.
  • Focus, Escape and scroll lock primitives copied between modals, drawers and overlays.

Why it exists

It was extracted after those patterns were validated in real projects. It did not start as an aspirational library; it became useful once the repetition was clear.

SCSS baseSpacing, radius, z-index, motion, breakpoints and mixins.
TypeScriptcx, guards, DOM targets and keyboard helpers.
AccessibilityFocus, Escape, scroll lock, protected media and selectors.
SEO & BuildCanonical URLs, sitemaps, HTML metadata and escaping.

What it is not

Foundation is not a framework, not a visual Design System and not a component library. It does not know project domains, routes, specific metadata, logos, final colors or business rules.