Overview

The docs are organized into five sections:

• Composites UI patterns that you can use as building blocks for your applications, implemented using all four layers of Semanticus CSS.

• Layer 1 - Semantic Styling

  Beautiful default styles for plain ARIA-centric HTML — no classes needed.

• Layer 2 - Components

  Minimal set of reusable building blocks that extend the Semantic Styling.

• Layer 3 - Variants

  CSS classes that tweak the Semantic Styling and Components

• Layer 4 - Utilities

  Utility classes for spacing, layout, colors, and more — adapted to the Semantic Styling and Components values for a consistent design.

How to go about it

The order is simple:

1. Start with the Composites section to learn how to make use of the Semantic Styling with minimal markup.
2. Add a component or variant when you need a specific UI pattern or visual variation.
3. Add utilities when you need fine-grained control.

This gives you a path from minimal markup to more customized interfaces without abandoning the semantic base.