Architecture

Overview

wexa.css is a CSS framework 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, like it should always be! wexa.css is the main CSS framework of Whakerexa.

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. Fonts, colors, borders, etc., can be overridden by re-defining the corresponding variables, enabling users to achieve a unique style.

CSS Cascade Architecture

wexa.css is built on CSS Cascade Layers (@layer):

reset — universal margin, padding, box-sizing defaults.
base — structural rules, scrollbar, focus outlines, disabled states, typography defaults.
theme — light and dark color palettes, animation variables.
accessibility — contrast mode (WCAG 1.4.12 spacing and ContrastFont), enforced with !important only in that context.

Any CSS you write outside of a layer automatically wins over all wexa rules, regardless of selector specificity. A plain header { background: blue } in your own stylesheet overrides wexa without needing !important or complex selectors.

To create a custom theme, use @layer theme { } in a stylesheet loaded after wexa.css — your values override the defaults within that layer.

@layer reset, base, theme, accessibility;

Custom classes

When using standard HTML5, accessibility is increased. Only three significant classes are introduced in wexa.css, specifically for accessibility:

dark
contrast
external-link

The other classes allow changing the font or the font-weight of any element:

font-sans — default font family
font-serif
font-mono — used by code element
font-pre — used by pre element
font-weight-thin
font-weight-normal — default font weight
font-weight-semibold
font-weight-bold — used by b element
font-weight-black — used by strong element

The `dark` class

As said in its name, the dark class turns the content into dark colors. Only colors are changed.

Dark blockquote example
Made by me!

<section class="dark">
    <p>Only colors are changed.</p>
    <blockquote><p>Dark blockquote example</p></blockquote>
</section>

The `contrast` class

This is a high contrast section. Font, font weight, font size, spacing and a few other properties are changed to make it easier to read. A link is slightly colored differently.

Contrast blockquote example

<section class="contrast">
    <p>High contrast section.</p>
</section>

The `external-link` class

When specified on <a>, external-link adds a small icon indicating the link redirects to an external page. Example:
"You can find Whakerexa on GitHub."

<a class="external-link" href="https://github.com/...">Whakerexa</a>