WUSY concepts

WUSY is a -Web Ui System- provides a stable HTML reset, structural frames, layouts and reusable UI components. Themes define their appearance without changing their behavior like “optimized basic kit” but thought for stable, yet advanced and long-lasting user interfaces.

This is a tester, and you are in a little presentation, we strongly suggest to read the official documentation into the official site.

The reset

The reset removes browser-specific spacing and presentation, establishes predictable sizing and gives native HTML elements a neutral starting structure. Without a theme, the page remains usable but intentionally carries almost no visual identity.

Document: html and body define the viewport and its scrolling behavior. When present, body-mainframe constrains the interface and its inner scroll area.
Content: Articles, sections, headings, paragraphs, lists and tables keep their native meaning while receiving consistent box sizing, spacing and alignment defaults.
Media: Images, audio, video, figures and embedded content remain bounded by their container and can be placed through WUSY frames and layouts.
Controls: Native form elements remain the base. WUSY components extend them only when dedicated state or behavior is required.

CSS layers

Every WUSY rule belongs to a named cascade layer. Their declared order is stable, regardless of the order in which the related stylesheets are loaded.


                    @layer wusy {
                        @layer reset, frames, components, layouts, states, theme, debug;
                    }

reset: Normalization and neutral defaults for native HTML elements.
frames: Passive WUSY structures that organize content without owning a JavaScript lifecycle.
components: Interfaces with dedicated state, events or JavaScript behavior.
layouts: Page composition, Grid, Flow and the rules that assign space or position to frames and components.
states: Shared interaction, visibility and feedback states.
theme: Typography, colors, borders, spacing details and every other visual customization.
debug: Diagnostics that must remain visible over the complete interface.

CSS theme contract

The theme contract provides a shared visual vocabulary without deciding where each property is applied. Variables describe recurring design properties, while theme selectors assign them to elements and components.

Variables describe reusable properties of the design.
The theme decides where those properties are applied.
Component names do not become part of the contract.

The contract remains deliberately small. It contains only the primitives required to compose a coherent theme without reproducing the theme itself as a collection of component variables.

Font families and semantic text dimensions.
Tone palette, stored as relative RGB channels and consumed through rgb().
Opacity and spacing scales.
Outer and inner border dimensions.
Base radius and blur values.
Animation durations.

Where a rule belongs

Normalize a native element in reset.
Describe a passive structural custom element in frames.
Style a scripted UI and its internal parts in components.
Control placement, direction or responsive dimensions in layouts.
Define a shared state such as active, disabled or hidden in states.
Choose the visual result in theme.
Expose a problem temporarily in debug.

Layouts follow components so an explicit layout rule can determine a component's outer size. Themes follow states so they can present those states without redefining their behavior.