Whakerexa

A minimal toolkit for clean, accessible HTML

Quick start Accessibility

What Whakerexa gives you

Semantic HTML first

Wexa styles tags directly. No .btn, no .container, no utility class soup — your markup stays readable.

See it →

CSS Variables

Every color, size and spacing is a variable. Redefine a handful and the whole design follows — themes included.

Explore →

@layer architecture

Your CSS wins over wexa defaults automatically. No !important, no specificity fights — just write your rules.

Learn more →

Accessibility built in

Light, dark and contrast modes. Skip links, ARIA roles, keyboard navigation — from the ground up, not as an afterthought.

See modes →

Modular ES6 JS

Import only what you need. Or use the single-file bundle for offline and file:// environments. No build step.

Bundle docs →

Slides

A full accessible presentation framework. Keyboard control, handout and memo modes, themes — runs in any browser.

See slides →

This page is built with Whakerexa

The documentation does not just describe the framework — it uses it. The side navigation, the cards above, the accessibility controls in the header, the themes/colors/contrast toggle: all of it is Whakerexa, with no custom JavaScript beyond initialization and no CSS written for this page alone.

Each page in the docs is a live example. Open its HTML source and you see exactly how it is done.

What you are looking at right now:

  • Side navigation — menu.css + MenuManager
  • Feature cards — layout.css cards-panel
  • Light / dark / contrast — wexa.css @layer
  • Accessibility controls — AccessibilityManager
  • CSS theme switcher — ThemeManager
  • CTA buttons — button.css .cta-button

Start in three steps

  1. Download — github.com/brigitte-bigi/Whakerexa  ·  Unzip. Done.
  2. Link the CSS — <link rel="stylesheet" href="wexa_statics/css/wexa.css"> and whichever extras you need.
  3. Write semantic HTML. Wexa styles tags directly — no class required for buttons, tables, headings or forms.

Need more? See the Quick start or browse individual component pages from the menu.

ES6 modules vs bundle — which to use?

Modules (wexa.js) require an HTTP server — run python -m http.server 8000 then open http://localhost:8000/. The bundle (wexa.bundle.js) works directly from disk on file://. This index auto-loads the right one.