Whakerexa exists to keep HTML readable and accessible without a heavy framework: semantic tags first, minimal classes, customization via CSS variables, and optional JS for behavior only. No private services, no tracking, works online and offline (bundle for file:// when needed).

This documentation is demo + reference: view the page, then read its HTML.

Overview

Whakerexa offers CSS frameworks and JavaScript for any HTML content. It is intended to be as simple as possible to make accessible web content, and to minimize the use of CSS classes for enhancing the readability of HTML code.

It was designed to be easily customizable, allowing users to adjust properties such as fonts, colors, borders, etc., effortlessly. Most of the properties are stored into variables which makes possible to re-define them, then to obtain a custom different style, enabling users to achieve a unique style easily.

It can be combined with the use of `WhakerPy`, an open source library to create dynamic HTML content; it's a light web application framework.

Get it

Download Whakerexa: https://sourceforge.net/projects/whakerexa/

Start

Beginner path: open one page below, view the result, then read the HTML of that page.

Online documentation

Open the hosted docs in your browser: Open online docs

Run locally (recommended)

Browsers block ES6 modules on file://. Run a tiny local server:

python -m http.server 8000

Then open: http://localhost:8000/docs/

Open directly (file://)

If you NEED TO open the docs from disk, use pages that rely on wexa.bundle.js. This index auto-loads the bundle when opened in file://.

Documentation

CSS foundations

UI components

Content / document helpers

Utilities

Internal JS utilities

Implementation helpers (example: dom-loader.js) are not beginner pages. Document them only if users need the API.

About ES6 modules and the bundle

Whakerexa is implemented as native ES6 modules. In a normal application, each feature (menus, dialogs, progress bars, accessibility helpers) is imported dynamically with import statements and loaded by the browser from separate files.

This modular architecture is ideal for maintainable web applications, but it requires a module-capable HTTP server and cannot be used directly with file:// URLs. To simplify quick tests, offline usage, and teaching examples, Whakerexa also provides a bundle: a single JavaScript file named wexa.bundle.js.

The bundle packs the main Whakerexa modules into one file and exposes them on a global namespace. You can then write standard scripts without any ES6 import, while still using the same components (for example MenuManager, AccessibilityManager, DialogManager, and ProgressBar).

Extras