Quick start

Minimal setup

Three lines in <head> are enough to get Whakerexa styles:

wexa.css is the foundation: typography, colors, light/dark mode, accessibility layers.
layout.css adds panels and card grids — include it only if you use them.
menu.css handles navigation bars — include it only if you use a nav.

<link rel="stylesheet" href="wexa_statics/css/wexa.css">
<link rel="stylesheet" href="wexa_statics/css/layout.css">
<link rel="stylesheet" href="wexa_statics/css/menu.css">

Minimal HTML page

A standard HTML5 page — Whakerexa styles it without any extra classes:

Semantic HTML only — no Whakerexa-specific classes required. Typography, colors, and light/dark mode work immediately.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="wexa_statics/css/wexa.css">
    <script src="wexa_statics/js/wexa.bundle.js"></script>
</head>
<body>

<header>
    <h1>My page</h1>
</header>

<main>
    <p>Your content here.</p>
</main>

<footer>
    <p>My footer.</p>
</footer>

</body>
</html>

Add accessibility controls

To expose light/dark and contrast switching to users, add a nav after the header with the two accessibility buttons:

<nav class="nav-wexa top" aria-label="Accessibility">
    <button id="btn-contrast" class="menuitem accessibility"
            aria-label="contrast" aria-pressed="false"
            onclick="Wexa.accessibility.switchContrastScheme()"></button>
    <button id="btn-color" class="menuitem accessibility"
            aria-label="color" aria-pressed="false"
            onclick="Wexa.accessibility.switchColorScheme()"></button>
</nav>

With a local server (recommended)

ES6 modules are blocked on file://. Serve the files over HTTP:

Then open http://localhost:8000/ and replace the bundle with the module loader.

python -m http.server 8000

Module loader — use instead of wexa.bundle.js when serving over HTTP.

<script type="module" src="wexa_statics/js/wexa.js"></script>