DivDrop Documentation

Overview

DivDrop Documentation v1.0.0

DivDrop is a component-first CSS framework with a reactive JavaScript layer. All CSS classes use the dd- prefix. All CSS custom properties use --dd-. The JavaScript global is window.DD.

Enable dev warnings by setting window.DD_DEV = true before loading the script. Warnings appear in the browser console for invalid attributes or missing elements.

Getting Started

Installation

Add the CSS in <head> and the JS before </body>. No npm, no build step.

<!-- Optional: prevents theme flash on first load -->
<script>
(function(){
  var t = localStorage.getItem('dd-theme');
  if (t) document.documentElement.setAttribute('data-dd-theme', t);
})();
</script>

<!-- CSS in <head> -->
<link rel="stylesheet"
  href="https://divdrop.io/CDN/CSS/Def/divdrop.css">

<!-- JS before </body> -->
<script src="https://divdrop.io/CDN/JS/divdrop.js"></script>

Foundation

Design Tokens CSS

Every visual property flows through CSS custom properties. Override any token in a <style> tag after the CDN link. The inline style tag wins because it loads later in the cascade.

/* Override after the CDN link */
:root {
  --dd-brand:     #5046e4;   /* changes buttons, links, focus rings */
  --dd-bg:        #f9f9f9;   /* page background */
  --dd-radius-md: 6px;       /* tighter border radius */
}

Background tokens

Token	Default (light)	Usage
`--dd-bg`	`#dadada`	Page background
`--dd-surface`	`#d2d2d2`	Panel / card background
`--dd-surface-soft`	`#d6d6d6`	Slightly darker surface
`--dd-surface-muted`	`#c6c6c6`	Table headers, muted areas

Text tokens

Token	Default	Usage
`--dd-text`	`#000`	Primary text
`--dd-text-soft`	`#111`	Slightly dimmed text
`--dd-text-muted`	`#222`	Secondary text, captions
`--dd-text-faint`	`#444`	Placeholders, metadata

Brand / accent tokens

Token	Default	Usage
`--dd-brand`	`#000`	Buttons, links, active states, focus rings
`--dd-border`	`rgba(0,0,0,.22)`	Visible borders
`--dd-border-soft`	`rgba(0,0,0,.14)`	Subtle borders, dividers
`--dd-brand-soft`	`rgba(0,0,0,.08)`	Soft badge bg, hover highlights

Semantic colour tokens

Token	Value	Usage
`--dd-success`	`#1c7c34`	Success states, valid inputs
`--dd-danger`	`#a51d2d`	Error states, destructive actions
`--dd-warning`	`#a66a00`	Warning states
`--dd-info`	`#106f80`	Informational states

Radius tokens

Token	Value
`--dd-radius-xs`	`6px`
`--dd-radius-sm`	`8px`
`--dd-radius-md`	`12px`
`--dd-radius-lg`	`18px`
`--dd-radius-xl`	`26px`
`--dd-radius-full`	`999px`

Header & nav tokens

Token	Usage
`--dd-header-bg`	Header bar background (default: `#000`)
`--dd-header-color`	Header text / link colour
`--dd-header-height`	Header height (default: `72px`)
`--dd-nav-bg`	Nav pill / sidebar background
`--dd-nav-color`	Nav pill / sidebar text
`--dd-logo-height`	Logo image height (default: `36px`)

Foundation

Themes CSS

Set data-dd-theme on your <html> tag. Every component re-renders instantly — no JavaScript required for the visual change.

<html data-dd-theme="midnight">

<!-- 9 built-in themes -->
light · dark · midnight · forest · sand · rose · slate · carbon · paper

Build your own theme

Add a <style> block after the CDN link. You only need to override the tokens you want to change.

<link rel="stylesheet" href="https://divdrop.io/CDN/CSS/Def/divdrop.css">
<style>
[data-dd-theme="mybrand"] {
  --dd-bg:           #1a1a2e;
  --dd-surface:      #16213e;
  --dd-text:         #e8e8f4;
  --dd-brand:        #7c3aed;
  --dd-border:       rgba(124,58,237,.25);
  --dd-border-soft:  rgba(124,58,237,.12);
  --dd-brand-soft:   rgba(124,58,237,.1);
  --dd-header-bg:    #0d0d1a;
  --dd-header-color: #e8e8f4;
  --dd-nav-bg:       #7c3aed;
  --dd-nav-color:    #ffffff;
}
</style>
<html data-dd-theme="mybrand">

All themes →

Foundation

Typography CSS

DivDrop uses Inter via Google Fonts. Headings use tight letter spacing and an 8-stop fluid type scale.

Element	Size	Weight	Tracking
`h1`	`clamp(2.8rem, 6vw, 5rem)`	800	-0.045em
`h2`	`clamp(2rem, 4.5vw, 3.25rem)`	800	-0.035em
`h3`	`clamp(1.4rem, 3vw, 1.75rem)`	800	-0.025em
`h4`	`1.2rem`	800	-0.018em
`p`	`1rem`	400	normal — line-height 1.8
`h6`	`0.72rem`	900	+0.12em — uppercase label style

Type scale tokens

--dd-text-xs:    .72rem    /* labels, badges */
--dd-text-sm:    .85rem    /* secondary UI */
--dd-text-base:  1rem      /* body */
--dd-text-lg:    1.15rem   /* lead paragraphs */
--dd-text-xl:    1.35rem   /* subheadings */
--dd-text-2xl:   1.75rem
--dd-text-3xl:   2.25rem
--dd-text-4xl:   3.25rem
--dd-text-5xl:   4.75rem   /* display / hero */

Layout

Containers CSS

Centred max-width wrappers with auto side padding.

Class	Max width
`dd-container` or `dd-shell`	1240px
`dd-container-sm`	860px
`dd-container-lg`	1440px

<div class="dd-container">…</div>
<div class="dd-container-sm">…</div>

Add dd-page to body to offset for the sticky header: <main class="dd-page">

Layout

Grid System CSS

CSS grid utilities. All collapse responsively — dd-grid-3 and dd-grid-4 go to 2 columns at 768px, all go to 1 column at 480px.

Class	Behaviour
`dd-grid`	Grid container, gap 1rem
`dd-grid-2`	2 equal columns
`dd-grid-3`	3 equal columns → 2 at 768px → 1 at 480px
`dd-grid-4`	4 equal columns → 2 at 768px → 1 at 480px
`dd-grid-auto`	Auto-fit, min 240px per column
`dd-split`	Two unequal columns (1.1fr / 0.9fr) → 1 at 768px

<div class="dd-grid dd-grid-3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Layout

Stack & Cluster CSS

Stack — vertical spacing

Class	Gap
`dd-stack`	1rem
`dd-stack-sm`	0.5rem
`dd-stack-md`	1rem (same as default)
`dd-stack-lg`	1.5rem
`dd-stack-xl`	2.5rem

Cluster — horizontal wrapping

<div class="dd-cluster">         <!-- wraps, gap .75rem, align center -->
  <button class="dd-button">One</button>
  <button class="dd-button">Two</button>
</div>
<div class="dd-cluster-between"> <!-- space-between -->
  <span>Left</span>
  <span>Right</span>
</div>

Navigation

Header CSS

dd-header is sticky and black by default. Use dd-header-static to opt out of sticky positioning.

Class	Effect
`dd-header`	Sticky black header, 72px tall, z-index 400
`dd-header-static`	Non-sticky override
`dd-header-dark`	Force dark (redundant — dark is default)
`dd-header-light`	Force themed/light header
`dd-header-inner`	Inner flex row, centred, max-width 1280px
`dd-header-logo`	Logo wrapper column
`dd-header-nav`	Nav column, fills remaining space
`dd-logo`	Logo link element
`dd-logo img`	36px height, auto-inverted to white
`dd-logo-no-invert`	Opt out of auto inversion

<header class="dd-header">
  <div class="dd-header-inner">
    <div class="dd-header-logo">
      <a class="dd-logo" href="/">
        <img src="logo.png" alt="Brand">
      </a>
    </div>
    <nav class="dd-header-nav">
      <a class="dd-nav-link" href="/">Home</a>
      <a class="dd-nav-link" href="/about">About</a>
    </nav>
  </div>
</header>

Components

Buttons CSS JS

Variants

Class	Style
`dd-button`	Default — brand bg, page-bg text
`dd-button-primary`	Explicit primary (same as default)
`dd-button-success`	Green
`dd-button-danger`	Red
`dd-button-warning`	Amber
`dd-button-info`	Teal
`dd-button-light`	Surface background
`dd-button-outline`	Transparent + brand border
`dd-button-soft`	Brand-soft background
`dd-button-ghost`	Fully transparent

Sizes

Class	Height
`dd-button-xs`	Extra small
`dd-button-sm`	Small
(default)	Medium
`dd-button-lg`	Large
`dd-button-xl`	Extra large

Shape modifiers

Class	Effect
`dd-button-block`	Full width
`dd-button-icon`	Square, icon-only

Processing state JS

<button class="dd-button"
  data-dd-processing="Saving…"
  data-dd-duration="2000">Save</button>

<!-- All variants -->
<button class="dd-button">Default</button>
<button class="dd-button dd-button-success">Success</button>
<button class="dd-button dd-button-outline dd-button-lg">Large outline</button>
<button class="dd-button dd-button-soft dd-button-block">Full width</button>
<button class="dd-button dd-button-icon">★</button>
<button class="dd-button" disabled>Disabled</button>

Components

Panels CSS

Class	Effect
`dd-panel`	Base card — lifts on hover
`dd-panel-static`	No hover lift
`dd-panel-dark`	Always-dark panel regardless of theme
`dd-panel-feature`	Subtle brand border accent
`dd-panel-side`	Horizontal layout — image left, body right
`dd-panel-head`	Panel header row
`dd-panel-body`	Panel body padding
`dd-panel-foot`	Panel footer row
`dd-panel-title`	Bold panel heading inside body
`dd-panel-text`	Muted body paragraph inside panel
`dd-panel-media`	Image/media area inside panel

<div class="dd-panel">
  <div class="dd-panel-head">Header</div>
  <div class="dd-panel-body">
    <p class="dd-panel-title">Card title</p>
    <p class="dd-panel-text">Supporting copy.</p>
  </div>
  <div class="dd-panel-foot">
    <button class="dd-button dd-button-sm">Action</button>
  </div>
</div>

Components

Badges CSS

<span class="dd-badge">Default</span>
<span class="dd-badge dd-badge-soft">Soft</span>
<span class="dd-badge dd-badge-success">Success</span>
<span class="dd-badge dd-badge-danger">Danger</span>
<span class="dd-badge dd-badge-warning">Warning</span>
<span class="dd-badge dd-badge-info">Info</span>
<span class="dd-badge dd-badge-light">Light</span>
<!-- Dot indicator -->
<span class="dd-dot dd-dot-success"></span>

Components

Alerts CSS

<div class="dd-alert">Default alert</div>
<div class="dd-alert dd-alert-success">✓ Saved successfully.</div>
<div class="dd-alert dd-alert-danger">✕ Something went wrong.</div>
<div class="dd-alert dd-alert-warning">⚠ Check this first.</div>
<div class="dd-alert dd-alert-info">ℹ Useful information.</div>

Components

Avatar CSS

<!-- Sizes -->
<div class="dd-avatar dd-avatar-sm">AB</div>
<div class="dd-avatar">JD</div>
<div class="dd-avatar dd-avatar-lg">EF</div>
<div class="dd-avatar dd-avatar-xl">
  <img src="photo.jpg" alt="">
</div>
<!-- Group (overlapping) -->
<div class="dd-avatar-group">
  <div class="dd-avatar">A</div>
  <div class="dd-avatar">B</div>
  <div class="dd-avatar dd-avatar-sm">+4</div>
</div>

Components

Progress CSS

<div class="dd-progress">
  <div class="dd-progress-bar" style="--dd-progress:65%"></div>
</div>
<!-- Striped -->
<div class="dd-progress">
  <div class="dd-progress-bar dd-progress-striped" style="--dd-progress:40%"></div>
</div>

Components

Skeleton Loaders CSS

<div class="dd-skeleton dd-skeleton-text"></div>    <!-- line of text -->
<div class="dd-skeleton dd-skeleton-title"></div>   <!-- heading width -->
<div class="dd-skeleton dd-skeleton-circle"></div>  <!-- avatar circle -->
<div class="dd-skeleton dd-skeleton-img"></div>     <!-- image block -->
<div class="dd-skeleton dd-skeleton-btn"></div>     <!-- button shape -->
<div class="dd-skeleton dd-skeleton-avatar"></div>  <!-- avatar size -->
<div class="dd-skeleton dd-skeleton-card"></div>    <!-- card height -->

Components

Divider CSS

<hr class="dd-divider">                      <!-- full line -->
<div class="dd-divider">or</div>            <!-- text in middle -->
<hr class="dd-divider dd-divider-line">     <!-- lighter line -->
<div class="dd-divider-v"></div>           <!-- vertical -->

Overlays

Modal JS

Focus trap included. Escape key closes. Clicking the backdrop closes. Focus is restored to the trigger element on close.

Class	Effect
`dd-modal`	Modal overlay
`dd-modal-sm`	Smaller modal box
`dd-modal-lg`	Larger modal box
`dd-modal-box`	Inner centred box

<button data-dd-modal-open="#myModal">Open</button>

<div id="myModal" class="dd-modal">
  <div class="dd-modal-box">
    <div class="dd-stack">
      <h3>Modal title</h3>
      <p>Modal content.</p>
      <div class="dd-cluster">
        <button class="dd-button" data-dd-modal-close>Confirm</button>
        <button class="dd-button dd-button-soft" data-dd-modal-close>Cancel</button>
      </div>
    </div>
  </div>
</div>

Overlays

Drawer JS

<button data-dd-drawer-open="#myDrawer">Open drawer</button>

<aside id="myDrawer" class="dd-drawer">
  <!-- Left-side by default -->
  <button data-dd-drawer-close class="dd-button dd-button-sm">Close</button>
  <p>Drawer content.</p>
</aside>

<!-- Right-side -->
<aside id="myDrawer" class="dd-drawer dd-drawer-right">…</aside>

Overlays

Toast JS

<!-- HTML attribute trigger -->
<button data-dd-toast="Message sent!">Simple toast</button>
<button data-dd-toast="Saved!" data-dd-toast-type="success">Success</button>
<button data-dd-toast="Error"  data-dd-toast-type="danger">Error</button>
<button data-dd-toast="Note"   data-dd-toast-type="warning">Warning</button>
<button data-dd-toast="Tip"    data-dd-toast-type="info">Info</button>

<!-- Programmatic -->
DD.toast({ title: 'Done', message: 'Saved OK.', type: 'success', duration: 4000 });

Interactive

Tabs JS

<dd-tabs>
  <div class="dd-tabs-list">
    <button class="dd-tab-trigger" data-dd-tab="one">Tab one</button>
    <button class="dd-tab-trigger" data-dd-tab="two">Tab two</button>
    <button class="dd-tab-trigger" data-dd-tab="three">Tab three</button>
  </div>
  <div class="dd-tab-panel" data-dd-tab-panel="one">Content one</div>
  <div class="dd-tab-panel" data-dd-tab-panel="two">Content two</div>
  <div class="dd-tab-panel" data-dd-tab-panel="three">Content three</div>
</dd-tabs>

Interactive

Accordion JS

<!-- Single-open mode: add data-dd-accordion-single to parent -->
<div class="dd-stack dd-stack-sm" data-dd-accordion-single>

  <div class="dd-accordion-item is-open">
    <button class="dd-accordion-trigger">Open by default</button>
    <div class="dd-accordion-panel">Content here.</div>
  </div>

  <div class="dd-accordion-item">
    <button class="dd-accordion-trigger">Closed by default</button>
    <div class="dd-accordion-panel">Content here.</div>
  </div>

</div>

Forms

Form Controls — Underline Style CSS

The default form style uses a bottom-border underline. Clean and minimal.

<div class="dd-form">
  <div class="dd-field-row">
    <div class="dd-field">
      <label class="dd-label">First name</label>
      <input class="dd-input" type="text" placeholder="Jane">
    </div>
    <div class="dd-field">
      <label class="dd-label">Last name</label>
      <input class="dd-input" type="text" placeholder="Smith">
    </div>
  </div>
  <div class="dd-field">
    <label class="dd-label">Email</label>
    <input class="dd-input" type="email" placeholder="jane@co.com">
    <span class="dd-help">We will never share this.</span>
  </div>
  <div class="dd-field">
    <label class="dd-label">Role</label>
    <select class="dd-select">
      <option>Designer</option>
      <option>Developer</option>
    </select>
  </div>
  <div class="dd-field">
    <label class="dd-label">Message</label>
    <textarea class="dd-textarea" placeholder="…"></textarea>
  </div>
  <label class="dd-control">
    <input type="checkbox"> I agree to the terms
  </label>
  <label class="dd-control">
    <input type="radio" name="plan" value="free"> Free
  </label>
  <button class="dd-button">Submit</button>
</div>

Forms

Form Controls — Box Style CSS

Bordered box inputs. Use dd-input-box, dd-select-box, dd-textarea-box.

<div class="dd-field">
  <label class="dd-label">Company</label>
  <input class="dd-input-box" type="text" placeholder="Acme Inc.">
</div>
<div class="dd-field">
  <label class="dd-label">Plan</label>
  <select class="dd-select-box">
    <option>Starter</option>
    <option>Pro</option>
  </select>
</div>
<div class="dd-field">
  <label class="dd-label">Notes</label>
  <textarea class="dd-textarea-box"></textarea>
</div>

Forms

Form Validation JS

Add data-dd-validate to a <form>. Validation runs on submit and on blur. Errors have role="alert" so screen readers announce them. Fields are linked to errors via aria-describedby.

<form class="dd-form" data-dd-validate>
  <div class="dd-field">
    <label class="dd-label">Name</label>
    <input class="dd-input-box" type="text"
           required
           data-dd-message="Name is required.">
  </div>
  <div class="dd-field">
    <label class="dd-label">Email</label>
    <input class="dd-input-box" type="email"
           required minlength="5">
  </div>
  <button type="submit" class="dd-button">Submit</button>
</form>

<!-- Validation state classes (set by JS, or manually) -->
<input class="dd-input-box is-valid">
<input class="dd-input-box is-invalid">
<span class="dd-field-error" role="alert">Error message</span>

Tables

Tables CSS

<!-- Always wrap in dd-table-wrap for responsiveness -->
<div class="dd-table-wrap">
  <table class="dd-table">
    <thead>
      <tr><th>Name</th><th>Status</th><th>Plan</th></tr>
    </thead>
    <tbody>
      <tr><td>Jane</td><td>Active</td><td>Pro</td></tr>
    </tbody>
  </table>
</div>

<!-- Modifiers -->
<table class="dd-table dd-table-striped">…</table>
<table class="dd-table dd-table-hover">…</table>
<table class="dd-table dd-table-striped dd-table-hover">…</table>

JavaScript

JavaScript Overview JS

DivDrop JS auto-initialises on DOMContentLoaded. The global DD object is available immediately. window.DivDrop is an alias. Enable dev warnings: window.DD_DEV = true before the script.

DD.version          // '1.0.0'
DD.themes           // ['light','dark','midnight','forest','sand','rose','slate','carbon','paper']
DD.setTheme(name)   // switch theme + save to localStorage
DD.store(initial)   // create reactive store
DD.binder(store)    // create DOM binder
DD.globalStore(i)   // single-page store — auto-mounts binder
DD.action(name, fn) // register named action
DD.dispatch(name, d)// fire action
DD.on(event, fn)    // event bus subscribe
DD.off(event, fn)   // event bus unsubscribe
DD.emit(event, data)// event bus emit
DD.router(routes)   // hash router
DD.navigate(path)   // programmatic navigation
DD.toast(opts)      // show toast notification
DD.setBellCount(n)  // update nav bell badge

JavaScript

Reactive Store JS

const store = DD.store({ count: 0, name: 'DivDrop' });

store.get('count')                    // → 0
store.set('count', 5)                 // set value
store.update('count', n => n + 1)    // update with function
store.patch({ count: 3, name: 'DD' }) // set multiple keys
store.subscribe('count', (val, prev) => console.log(val, prev))
store.watch(['count','name'], (key, val) => {})
store.derived('doubled', () => store.get('count') * 2)
store.snapshot()                      // plain object copy
store.reset()                         // back to initial values

For most single-page use cases use DD.globalStore() — it creates the store, auto-mounts the binder, and makes it available as DD._store.

JavaScript

Data Binding HTML attrs

<!-- Two-way input binding -->
<input data-dd-bind="userName" type="text">
<input data-dd-bind="isDark"   type="checkbox">

<!-- One-way output -->
<span data-dd-output="userName"></span>
<img  data-dd-output-attr="src:avatarUrl">

<!-- Conditional display -->
<div data-dd-if="isLoggedIn">Welcome!</div>
<div data-dd-if="role==admin">Admin panel</div>
<div data-dd-if="role!=admin">Not admin</div>

<!-- Toggle visibility class -->
<div data-dd-show="isVisible">…</div>

<!-- Toggle class on truthy -->
<div data-dd-class="isDark:dark-mode">…</div>

<!-- Initialise -->
<script>
const store = DD.globalStore({
  userName: '',
  isDark:   false,
  isLoggedIn: false,
  role: 'user'
});
store.subscribe('isDark', v =>
  document.documentElement.setAttribute('data-dd-theme', v ? 'dark' : 'light')
);
</script>

JavaScript

List Rendering — data-dd-repeat HTML attr

<!-- HTML template -->
<ul data-dd-repeat="users">
  <template>
    <li>
      <strong data-dd-key="name"></strong>
      <span data-dd-key="role"></span>
    </li>
  </template>
</ul>

<!-- JS -->
<script>
const store = DD.globalStore({
  users: [
    { name: 'Jane', role: 'Designer' },
    { name: 'Alex', role: 'Developer' },
  ]
});
// Update → DOM re-renders automatically
store.update('users', list => [
  ...list, { name: 'Sam', role: 'Manager' }
]);
</script>

Use data-dd-key-attr="href:url" to bind to element attributes in the template.

JavaScript

Hash Router JS

DD.router({
  '/':           () => store.set('page', 'home'),
  '/about':      () => store.set('page', 'about'),
  '/users/:id':  ({ id }) => store.set('userId', id),
  '*':           () => store.set('page', '404'),
});

// Navigate programmatically
DD.navigate('/about');

// Link trigger — no # prefix needed in the attr value
<a data-dd-route="/about">About</a>

// Listen to route changes
DD.on('dd:route', ({ path, params }) => console.log(path));

When the route changes, any open modals and drawers are closed automatically.

JavaScript

Actions JS

// Register
DD.action('user.save', (data, store) => {
  console.log('Saving:', data);
  store.set('saved', true);
});

// Dispatch programmatically
DD.dispatch('user.save', { name: 'Jane' });

// HTML trigger
<button data-dd-on-click="user.save"
        data-dd-payload='{"id":42}'>Save</button>

// Other HTML triggers
<input  data-dd-on-change="search.run">
<input  data-dd-on-input="filter.update">
<form   data-dd-on-submit="form.submit">

JavaScript

Event Bus JS

// Subscribe
DD.on('dd:theme-change', ({ theme }) => console.log(theme));
DD.on('dd:route',        ({ path, params }) => {});
DD.on('dd:modal-open',   e => {});
DD.on('dd:modal-close',  e => {});

// Custom events
DD.on('app:ready', data => {});
DD.emit('app:ready', { user: 'Jane' });

// Unsubscribe
const handler = data => {};
DD.on('app:event', handler);
DD.off('app:event', handler);

JavaScript

Theme API JS

// Programmatic
DD.setTheme('forest');   // validates, sets attr, saves to localStorage
DD.themes;               // ['light','dark','midnight','forest',…]

// HTML attribute — set theme on click
<button data-dd-set-theme="midnight">Go Midnight</button>

// Toggle button — cycles light ↔ dark
<button data-dd-theme-toggle aria-label="Toggle dark mode">🌙</button>

// Listen to changes
DD.on('dd:theme-change', ({ theme }) => console.log(theme));

JavaScript

Toast API JS

// Simple
DD.toast('Message sent!');

// With options
DD.toast({
  title:    'Success',           // optional bold heading
  message:  'File saved.',       // body text (required)
  type:     'success',           // success | danger | warning | info
  duration: 4000,                // ms — default 3000
});

// Types: (default) | success | danger | warning | info

JavaScript

All data-dd-* Attributes HTML

Attribute	Effect
`data-dd-theme`	On `<html>` — sets active theme
`data-dd-set-theme="name"`	On any element — sets theme on click
`data-dd-theme-toggle`	Cycles light ↔ dark on click
`data-dd-bind="key"`	Two-way input ↔ store
`data-dd-output="key"`	Store → element textContent
`data-dd-output-attr="attr:key"`	Store → element attribute
`data-dd-if="key"`	Show/hide on truthy — supports `==` and `!=`
`data-dd-show="key"`	Show/hide via `.is-visible` class
`data-dd-class="key:className"`	Toggle class on truthy
`data-dd-repeat="key"`	List rendering from store array
`data-dd-key="prop"`	Inside repeat template — bind text
`data-dd-key-attr="attr:prop"`	Inside repeat template — bind attribute
`data-dd-on-click="action.name"`	Fire action on click
`data-dd-on-change="action.name"`	Fire action on change
`data-dd-on-input="action.name"`	Fire action on input
`data-dd-on-submit="action.name"`	Fire action on form submit
`data-dd-payload='{}'`	JSON payload sent with action
`data-dd-route="/path"`	Navigate to hash route on click
`data-dd-modal-open="#id"`	Open modal by id
`data-dd-modal-close`	Close nearest modal
`data-dd-drawer-open="#id"`	Open drawer by id
`data-dd-drawer-close`	Close nearest drawer
`data-dd-dropdown-toggle`	Toggle dropdown menu
`data-dd-popover="#id"`	Toggle popover by id
`data-dd-accordion-single`	On accordion parent — single open at a time
`data-dd-toast="message"`	Show toast on click
`data-dd-toast-type="success"`	Toast type: success \| danger \| warning \| info
`data-dd-processing="Label"`	Button loading state on click
`data-dd-duration="2000"`	Processing duration in ms
`data-dd-scroll-to="#id"`	Smooth scroll to element
`data-dd-clipboard="text"`	Copy text to clipboard on click
`data-dd-clipboard="#id"`	Copy element text content
`data-dd-confirm="Are you sure?"`	Confirm dialog before proceeding
`data-dd-confirm-type="danger"`	Confirm dialog type
`data-dd-validate`	On `<form>` — enables built-in validation
`data-dd-message="text"`	Custom validation error message on field
`data-dd-tooltip="text"`	CSS tooltip (no JS)
`data-dd-tooltip-pos="bottom"`	Tooltip position: top \| bottom \| left \| right
`data-dd-sticky`	Make element sticky on scroll
`data-dd-sticky-offset="80"`	Top offset in px for sticky
`data-dd-lazy`	Lazy-load image — use `data-src` instead of `src`
`data-dd-nav-toggle`	Hamburger — toggles nav panel open/closed
`data-dd-bell`	On nav bell element — opens notification panel
`data-dd-bell-count="5"`	Number shown in bell badge

JavaScript

Custom HTML Elements JS

dd-typewriter

<!-- Looping multi-phrase mode -->
<dd-typewriter
  speed="150"
  delete-speed="65"
  pause="2400"
  phrases='["Build fast.","Zero deps.","Ship today."]'>
</dd-typewriter>

<!-- Once mode — types once like an AI model, cursor blinks at end -->
<dd-typewriter once="true" speed="42">
  Your full sentence types out once.
</dd-typewriter>

<!-- Attributes -->
<!-- speed="150"        ms per character -->
<!-- delete-speed="65"  ms per deletion -->
<!-- pause="2400"       ms pause after each phrase -->
<!-- loop="false"       type once (looping mode) -->
<!-- once="true"        single-pass AI mode -->
<!-- caret="false"      hide blinking cursor -->

dd-counter

<dd-counter to="4200" suffix="+" duration="1400">0</dd-counter>
<dd-counter to="99"   suffix="%" duration="1000">0</dd-counter>
<dd-counter to="14.5" prefix="$" decimals="1">0</dd-counter>
<!-- Triggers on scroll into view -->

dd-reveal

<dd-reveal effect="fade">…</dd-reveal>
<dd-reveal effect="fly-left">…</dd-reveal>
<dd-reveal effect="fly-right">…</dd-reveal>
<dd-reveal effect="zoom">…</dd-reveal>
<dd-reveal effect="blur">…</dd-reveal>

<!-- Stagger with delay -->
<dd-reveal effect="fly-left" style="--dd-reveal-delay:0ms">…</dd-reveal>
<dd-reveal effect="fly-left" style="--dd-reveal-delay:100ms">…</dd-reveal>
<dd-reveal effect="fly-left" style="--dd-reveal-delay:200ms">…</dd-reveal>

dd-marquee

<!-- Horizontal scrolling ticker -->
<dd-marquee speed="40">
  Item one &nbsp;&bull;&nbsp; Item two &nbsp;&bull;&nbsp; Item three
</dd-marquee>

<!-- Vertical -->
<dd-marquee direction="up" speed="30" style="height:120px">
  <div>Line one</div>
  <div>Line two</div>
</dd-marquee>

dd-tabs (custom element alias)

<!-- dd-tabs is an alias for the tabs component -->
<dd-tabs>
  <div class="dd-tabs-list">
    <button class="dd-tab-trigger" data-dd-tab="a">Tab A</button>
    <button class="dd-tab-trigger" data-dd-tab="b">Tab B</button>
  </div>
  <div class="dd-tab-panel" data-dd-tab-panel="a">Content A</div>
  <div class="dd-tab-panel" data-dd-tab-panel="b">Content B</div>
</dd-tabs>

Utilities

Display & Flex CSS

Class	Property
`dd-hidden`	`display:none`
`dd-block`	`display:block`
`dd-flex`	`display:flex`
`dd-inline-flex`	`display:inline-flex`
`dd-grid-d`	`display:grid`
`dd-items-center`	`align-items:center`
`dd-items-start`	`align-items:flex-start`
`dd-justify-center`	`justify-content:center`
`dd-justify-between`	`justify-content:space-between`
`dd-flex-col`	`flex-direction:column`
`dd-flex-1`	`flex:1`
`dd-flex-wrap`	`flex-wrap:wrap`
`dd-flex-nowrap`	`flex-wrap:nowrap`

Utilities

Spacing CSS

Scale: 0=0 · 1=.25rem · 2=.5rem · 3=1rem · 4=1.5rem · 5=3rem

Prefix	Property	Values
`dd-mt-{0–5}`	margin-top	0–5
`dd-mb-{0–5}`	margin-bottom	0–5
`dd-mx-auto`	margin inline auto	—
`dd-p-{0–5}`	padding all	0–5
`dd-px-{2–4}`	padding inline	2–4
`dd-py-{2–4}`	padding block	2–4
`dd-gap-{0–5}`	gap	0–5

Utilities

Typography Utilities CSS

Class	Effect
`dd-text-center`	text-align: center
`dd-text-right`	text-align: right
`dd-truncate`	Ellipsis overflow
`dd-uppercase`	text-transform: uppercase
`dd-muted`	color: var(--dd-text-muted)
`dd-brand-text`	color: var(--dd-brand)
`dd-fw-{300–900}`	font-weight (300, 400, 500, 600, 700, 800, 900)
`dd-fs-xs` … `dd-fs-2xl`	font-size from type scale

Utilities

Responsive Utilities CSS

Class	Hides at
`dd-hide-sm`	≤ 576px
`dd-hide-md`	≤ 768px
`dd-hide-lg`	≤ 1024px
`dd-hide-xl`	≤ 1280px

Class	Shows at
`dd-show-sm`	≤ 576px only
`dd-show-md`	577–768px
`dd-show-lg`	769–1024px

Grid breakpoints

Breakpoint	Effect
768px	`dd-grid-3` and `dd-grid-4` → 2 columns. `dd-split` → 1 column.
480px	All grids → 1 column. Mobile touch targets → 44px.