Semanticus CSS

Appearance

Semanticus CSSARIA-centric, semantic HTML

enhanced by atomic utilities.

Get Started
Docs
GitHub
Semanticus CSS

Semantic First

Style plain HTML elements without adding classes. Clean, readable markup that looks beautiful out of the box.

Accessibility

ARIA-first patterns ensure accessible interfaces by default; core behavior works without JavaScript and can be enhanced progressively.

Best of Both Worlds

Use semantic styles, utility classes, or both — whatever fits the situation. No rigid paradigms.

Lightweight

Minimal CSS footprint with zero JavaScript dependency. ~22 KB gzipped for lightning-fast page loads.

Consistent Design

Predictable styling across your project. Semantic and utility layers share the same CSS variables and design tokens.

Customizable

Override CSS variables to create your own themes, or choose from a list of pre-built color palettes and adjustable sizing options.

Install ​

Add Semanticus CSS to your project via CDN, manual download, or npm:

Include these lines directly from a CDN in your HTML <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@goncalvesjoao/semanticus-css@0.1.0/dist/semanticus.css">

<!-- costumize it with a palette or size variation if needed -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@goncalvesjoao/semanticus-css@0.1.0/dist/semanticus.palette.blue.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@goncalvesjoao/semanticus-css@0.1.0/dist/semanticus.size.slim.css">

How It Works ​

Semanticus CSS is built on three complementary layers:

1. Semantic Styling ​

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

live preview
editable html
<article>
  <h1>Hello World</h1>
  <p>
    This is a paragraph with
    <strong>bold</strong> and <em>italic</em> text.
  </p>
  <button>Click me</button>
</article>

2. Variants ​

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

live preview
editable html
<button class="ghost">Ghost</button>
<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>

3. Utilities ​

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

live preview
editable html
<footer class="py-4 text-center text-bg-contrast-subtle">
  <p class="mb-0">Star us on GitHub!</p>
</footer>