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.loader.js" data-base="wexa_statics/"></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"
            type="button" aria-label="Switch contrast" title="Switch contrast" aria-pressed="false"
            onclick="Wexa.accessibility.switchContrastScheme()"></button>
    <button id="btn-color" class="menuitem accessibility"
            type="button" aria-label="Switch light and dark" title="Switch light and dark" aria-pressed="false"
            onclick="Wexa.accessibility.switchColorScheme()"></button>
</nav>

With a local server (recommended)

A browser refuses ES6 modules on file://, where the loader falls back on the bundle. Served over HTTP, a page loads the modules, and only the ones it asks for:

Then open http://localhost:8000/. Nothing to change in the page: the loader reads the protocol and takes the modules from there.

python -m http.server 8000

The loader takes what a page has to say on its own tag: where wexa_statics/ stands, the theme to apply when the address names none, the identifiers whose address carries the theme, and the files to load besides wexa.js. A page that has something of its own to start declares a function bootPage: the loader calls it once everything is there, and hands it the framework and those files.

<script src="wexa_statics/js/wexa.loader.js"
        data-base="wexa_statics/"
        data-default="wexa_theme"
        data-links="btn-back"
        data-extras="js/extras/sortatable.js"></script>