Skip to content

Releases: markc/dcs.spa

v1.0.0 — Dual Carousel Sidebar

19 Apr 09:05
@markc markc
v1.0.0
d6a20d2

Choose a tag to compare

View all tags
v1.0.0 — Dual Carousel Sidebar Latest
Latest

DCS (Dual Carousel Sidebar) is a modular CSS/JS design system: dual carousel sidebars, OKLCH colour schemes, dark/light modes, mobile-first responsive layout, marketing components. Zero dependencies. No build step. Drop the four files in and go.

See the live showcase at dcs.spa.

Core framework

  • base.css — generic, colour-agnostic framework using CSS cascade layers (reset, tokens, base, components, utilities, animations).
  • base.js — single Base object, delegated click listener, localStorage state.
  • site.css — opinionated marketing theme with OKLCH tokens and hero / section / particles components.
  • site.js — optional particle field, scroll-reveal animations.
  • md.js — optional lightweight Markdown renderer for doc sites.

Six OKLCH colour schemes

Ocean (default, H=220), Crimson (H=25), Stone (H=60), Forest (H=150), Sunset (H=45), and Mono (C=0 pure grayscale). Dark/light modes via html.dark / html.light toggle or system preference. Consistent lightness/chroma across schemes — only the hue changes.

Dual Carousel Sidebars

  • Full-height off-canvas sidebars, independently pinnable on desktop (≥1280 px).
  • Each sidebar hosts a horizontal panel carousel with chevron + dot navigation.
  • Slide and Fade transition modes.
  • Chevron-driven wrap is directional — next always slides left, prev always slides right, even at the ends.
  • Autonomous open/close — opening one sidebar does not close the other.
  • Independent width control (10–100% per side, 10% increments) with a container-query that collapses the Appearance panel into a single column at narrow widths.

Built-in panels

  • Navigation — sidebar nav with active states and collapsible groups.
  • Appearance — theme toggle, Slide/Fade mode, Left/Right width spinners, colour-scheme dots.
  • Tree + Doc Viewer — hierarchical tree widget that renders Markdown files from docs/_doc/ into the main content area with a back-to-showcase restore.

Marketing components

Hero (with background image + overlay, shimmer-text, badges), content sections, service cards, pricing tables, CTAs, glass-morphism topnav, animated particle field, footer.

Usage patterns

  • Marketing / brochure site — base.css + site.css + both scripts.
  • Documentation site — base.css + a theme from themes/ + md.js.
  • Laravel + React (Inertia) — import the OKLCH tokens into a Tailwind v4 @theme block.

Install

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="site.css">
<script src="base.js"></script>
<script src="site.js"></script>

No package manager, no bundler. Ship-ready files in docs/.

MIT License · Copyright © 2015–2026 Mark Constable

Assets 2
Loading