DSMono

Soft-dark, monochrome UI microframework.

📦 Installation
Add DSMono via CDN.
CSS
<link rel="stylesheet" href="https://cdn.dmx3377.uk/dsmono/dsmono.css">
JS helpers (optional)
<script src="https://cdn.dmx3377.uk/dsmono/dsmono.js"></script>
🟦 Buttons
Base button + functional variants.
<button class="ds-btn success">Success</button>
📦 Cards, Badges, Alerts
Neutral UI with optional status cues.
Card Title
Neutral OK Careful Fail Info

Cards are soft-dark containers for content blocks.

Success alert — everything went fine.
Warning alert — heads up.
Error alert — something broke.
Info alert — useful note.
⌨ Inputs & Forms
Inputs, selects, textareas, search rows.
Normal input
Error input
Select
Textarea
Search bar
⬇ Dropdowns & Toggles
JS enables interaction automatically.
Item 1
Item 2
Item 3
off
🔔 Toast Notifications
Queued toasts via ds.toast().
ds.toast("Saved!", { type: "success", duration: 2500 });
🪟 Modals
ESC closes, click-outside closes, focus trapped.
📑 Tabs
Keyboard arrows supported.
Tab panel one. This is visible by default.
Tab panel two.
Tab panel three.
🪗 Accordion
Click headers to expand/collapse.
Section A
Open by default so you can see it working.
Section B
Hello from B.
Section C
Hello from C.
📊 Progress, Spinner, Skeleton
Status-aware progress bars.
Success 70%
Warn 45%
Error 20%
Info 85%
Loading…
Skeleton
💬 Tooltip, Breadcrumbs, Pagination
Small UI helpers.
🧱 Table & Upload Box
Data + drag-style upload region.
ThingStatus
ExampleRunning
SomethingPaused
AnotherOK
Drag files here or click to upload