Component catalog

Cookbook for building steampunk Bootstrap screens.

Each block below includes a live demo and a markup sample. The classes stay close to Bootstrap conventions and add only the theme-specific layer.

Core Components

Buttons and Badges

Elite Tier

<button class="btn btn-ds">Primary Command</button>
<button class="btn btn-outline-ds">Secondary</button>
<span class="ds-badge">Elite Tier</span>

Forged Tabs

<ul class="nav nav-tabs ds-tabs">
  <li class="nav-item"><button class="nav-link active">Loadout</button></li>
  <li class="nav-item"><button class="nav-link">Skills</button></li>
  <li class="nav-item"><button class="nav-link">Codex</button></li>
</ul>

Parchment Card

Use this for journals, lore, mission text, or recipe instructions.

Filed under

Workshop Notes

Replace bright UI chrome with a reading surface that still feels part of the same machine-made world.

<div class="ds-card parchment">
  <h3>Parchment Card</h3>
  <p>Journal or lore content.</p>
</div>

Meters and Stats

Steam Pressure 74%

Arc Capacity 52%

<div class="ds-stat">
  <span>Steam Pressure</span>
  <span>74%</span>
</div>
<div class="ds-meter"><span style="width: 74%"></span></div>

Form Controls

<input class="form-control ds-input" placeholder="Machine ID">
<select class="form-select ds-input">
  <option>Artificer</option>
</select>

Gear Toggle

Steam Relay Shift the gear to arm the mechanism.

<label class="ds-gear-toggle">
  <input class="ds-gear-toggle-input" type="checkbox" checked>
  <span class="ds-gear-toggle-track">
    <span class="ds-gear-toggle-knob"><i class="fa-solid fa-gear"></i></span>
  </span>
  <span class="ds-gear-toggle-copy">
    <span class="ds-gear-toggle-title">Steam Relay</span>
    <span class="ds-gear-toggle-note">Shift the gear to arm the mechanism.</span>
  </span>
</label>

Data Table

Module	Discipline	Status	Output
Aether Forge Foundry wing / Mk-IV	Engineering	Stable	92%
Vault Relay Archive conduit	Logistics	Queued	67%

<div class="ds-table-wrap">
  <table class="table ds-table align-middle">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Pagination

<ul class="pagination ds-pagination">
  <li class="page-item active"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

Progress Glass Ball

46%

64%

100%

<div class="ds-orb-stack">
  <div class="ds-orb" data-value="76" style="--orb-color:#1837b1;--orb-color-deep:#07104d;">
    <div class="ds-orb-viewport">
      <div class="ds-orb-liquid"></div>
    </div>
    <div class="ds-orb-surface"></div>
  </div>
  <div class="ds-orb-value">76%</div>
</div>

Timeline

06:10 / Normal

Hull Integrity

The hull is intact and ready for deployment.
06:40 / bg-primary

Steam Core Primed

Pressure climbs through the lower vaults as the foundry wakes.
07:05 / bg-secondary

Machine Casing Sealed

Outer plates were riveted shut before the relay chamber was reopened.
07:45 / bg-success

Archive Link Stabilized

Signal passes the brass gate and reaches the second register chamber.
08:20 / bg-warning

Boiler Threshold Reached

Operators throttled the pressure band before the gauge passed the amber line.
09:00 / bg-danger

North Trench Pressure Drop

Maintenance crews were dispatched before the valve train locked down.
09:35 / bg-info

Cooling Lens Calibrated

A clear line of telemetry was restored across the condenser array.
10:15 / bg-light text-dark

Final Entry Archived

The day’s record was stamped and filed into the upper brass cabinet.
10:50 / bg-dark

Core Chamber Dormant

Residual heat fell below threshold and the trench lights dimmed to idle.

<ol class="ds-timeline">
  <li class="ds-timeline-item">
    <span class="ds-timeline-time">06:10 / Ignition</span>
    <div class="ds-timeline-card bg-primary">
      <div class="ds-timeline-title">Steam Core Primed</div>
      <p class="ds-timeline-copy">Pressure climbs through the lower vaults.</p>
    </div>
  </li>
  <li class="ds-timeline-item">
    <span class="ds-timeline-time">10:40 / Sensor</span>
    <div class="ds-timeline-card bg-info">...</div>
  </li>
</ol>

Accordion

Front and trailing gears flank the title, and they counter-rotate whenever a section opens or closes.

This pattern works well for FAQs, settings panes, mission lists, or any menu stack that needs more cinematic chrome.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the accordion-body, though the transition does limit overflow.

<div class="accordion ds-accordion" id="forgeAccordion">
  <div class="accordion-item">
    <h4 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panelOne">
        <span class="accordion-gear accordion-gear-start"><i class="fa-solid fa-gear"></i></span>
        <span class="accordion-title">Foundry Logs</span>
        <span class="accordion-copy">Visible by default</span>
        <span class="accordion-gear accordion-gear-end"><i class="fa-solid fa-gear"></i></span>
        <span class="accordion-chain"><i class="fa-solid fa-link"></i><i class="fa-solid fa-link"></i></span>
      </button>
    </h4>
    <div id="panelOne" class="accordion-collapse collapse show">...</div>
  </div>
</div>

Assembly Notes

Required Includes

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css" rel="stylesheet">
<link href="./assets/css/toolkit.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script src="./assets/js/toolkit.js"></script>

Usage Guidance

Start from standard Bootstrap layout markup and add the `ds-*` classes selectively.
Use parchment cards for reading surfaces and dark steel cards for controls or chrome-heavy modules.
Apply `data-animate` to any block that should rise in during page load.
Use the themed accordion when you want mechanical motion without adding decorative free-floating gear blocks.