Introduction

Pattern-level utilities for layout and simple motion.

Axoloth packages recurring structures such as app shells, sidebars, bento grids, intrinsic compositions, semantic controls, and motion presets into reusable CSS classes. It gives projects a structural foundation without deciding their visual identity.

What Axoloth Is / Is Not

A layout toolkit, not a Tailwind replacement.

Axoloth is pattern-level rather than atomic. It does not provide a class for every CSS property, breakpoint prefixes such as md:, a complete brand theme, or a build-time purge engine.

Install

Use npm or a CDN link.

npm install @quertys/axoloth-styleCopy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quertys/axoloth-style@0.9.0/src/axoloth.css">Copy

Choose a CSS entry point

axoloth.css imports every Axoloth CSS module. It does not inspect your markup, tree-shake selectors, or remove unused CSS automatically. Use it when a page needs several Axoloth features.

For a smaller, focused setup, import only the modules the page needs. Do not combine these entries with axoloth.css, because the full entry already includes them.

import '@quertys/axoloth-style/layout.css';
import '@quertys/axoloth-style/motion.css';Copy

import '@quertys/axoloth-style/semantic.css';
import '@quertys/axoloth-style/surface.css';
import '@quertys/axoloth-style/tabs.css';Copy

Vanilla Quick Starts

Start with CSS, then add behavior only when needed.

CSS only

Layout, surfaces, semantic controls, and CSS motion work without JavaScript. Axoloth classes provide structure; a local class keeps the project-specific visual identity.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quertys/axoloth-style@0.9.0/src/axoloth.css">

<main class="axo-page">
  <section class="axo-container axo-section">
    <article class="axo-card axo-surface axo-rise project-card">
      Axoloth structure + project-owned styling
    </article>
  </section>
</main>Copy

CSS + Axoloth Behavior

Interactive components need the separate behavior package. CSS does not initialize data-axo-* attributes automatically; import and initialize the behavior used by the page.

<div class="axo-tabs" data-axo-tabs>
  <div class="axo-tab-list" aria-label="Sections">
    <button class="axo-tab" type="button" data-axo-tab="preview">Preview</button>
    <button class="axo-tab" type="button" data-axo-tab="source">Source</button>
  </div>
  <section class="axo-tab-panel" data-axo-tab-panel="preview">Preview panel</section>
  <section class="axo-tab-panel" data-axo-tab-panel="source">Source panel</section>
</div>

<script type="module">
  import { initTabs } from 'https://cdn.jsdelivr.net/npm/@quertys/axoloth-behavior@0.6.0/src/tabs.js';
  initTabs();
</script>Copy

Composition Recipes

Each recipe includes a live preview, complete HTML, the Axoloth classes and variables it uses, and an explicit boundary for project-owned CSS. No recipe adds a new utility.

Examples

Generated Reference

This searchable table is generated from the same registry used by Axoloth IntelliSense.

Motion Examples

Simple animation presets stay in the example folders.

Use this section as the anchor for motion examples such as rise, fade, pop, lift, glow, and shimmer.

Semantic Controls

Forms, buttons, nav, and page structure.

Semantic examples should prove that plain HTML can look organized with Axoloth utilities while still allowing project-specific styling.