Semanticus CSS

Appearance

Overview ​

The docs are organized into four main sections:

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

  • Layer 1 - Semantic Styling

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

  • Layer 2 - Variants

    Minimal set of CSS classes that add visual variation to the Semantic Styling.

  • Layer 3 - Utilities

    Utility classes for spacing, layout, colors, and more — adapted to the Semantic Styling and Variants 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 variants when a component needs an alternative appearance.
  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.