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;

Sizes, and where the rule stops

Every size is written as a coefficient of --font-size, never in rem nor in em: a browser does not recompute those when the contrast mode changes the size of the text, so a component written with them keeps the dimensions of a mode it has left.

One place cannot follow that rule: the condition of a media query. It is evaluated before any variable is resolved, so a breakpoint is a number of pixels and stays calibrated on a text of 16. In contrast mode the text is written larger while the breakpoints do not move, and a layout gets tight slightly before its threshold. Container queries do not help: their em resolve against the same value a browser does not recompute.

What decides a threshold in JavaScript has no such limit, and counts in font sizes: the bibliography hides its two columns of digits under 38.75 of them, which is 620 pixels for a text of 16 and 698 for a text of 18.

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>