# OpenCD **A lightweight HTML/CSS framework built on [Open Props](https://open-props.style)** *Physical CD jewel case dimensions · Leaflet-style page navigation · Visible grid aesthetic · Trentuna-inspired design* OpenCD turns your website into a digital CD jewel case and booklet. Every dimension is derived from physical CD packaging — the disc diameter, jewel case footprint, leaflet square. Built for catalogs, artist projects, zines, indie digital releases, and anyone who misses tangible-feeling web experiences. ``` ┌─────────────────────────────┐ │ ╔═════════════╗ │ │ ║ ○ OpenCD ║ │ │ ║ ──────── ║ │ │ ║ ◉ ◉ ◉ ◉ ║ │ │ ╚═════════════╝ │ │ ─── TRACKLIST ─────────── │ │ 01. jewel-case.html │ │ 02. back-tray.html │ │ 03. leaflet-booklet.html │ └─────────────────────────────┘ ``` --- ## Philosophy OpenCD respects physical media constraints in the digital world. Every dimension, ratio, and detail is intentional: - **CD jewel case** as document wrapper (real ratio: `142×125 mm` → scaled `280×245 px`) - **Leaflet booklet** as page content (real: `120×120 mm` → `240 px`) - **Visible grid** like CD tray paper — the structure is the decoration - **Spine as navigation** — top bar that reads like a CD spine label - **Human Advisory badge** — borrowed from Parental Advisory, repurposed for content warnings Made with love for beautiful, honest, tangible-feel web experiences. **License:** MIT **Built with:** Open Props v2+ --- ## Quick Start ```html ``` ```html

Your Content Here

This is the inner booklet area with visible CD tray grid.

``` --- ## Semantic HTML Structure OpenCD follows the same semantic-HTML approach as the ASW system (`~/releases/asw/`). The framework is a **skin on top of semantic markup** — you can wrap any well-structured HTML in OpenCD classes and it becomes a CD jewel case: ```html
``` --- ## CD / Jewel Case Specifications | Component | Real Size | Scaled (2×) | Open Props Variable | |-------------------------|---------------|----------------|----------------------------| | CD Disc | Ø 120 mm | 240 px | `--cd-disc-diameter` | | Jewel Case (front) | 142 × 125 mm | 280 × 245 px | `--cd-jewel-width/height` | | CD Leaflet / Booklet | 120 × 120 mm | 240 px | `--cd-leaflet-size` | | Jewel Case (open width) | 284 × 125 mm | 560 × 245 px | `--cd-jewel-open-width` | | CD Tray paper | ~150 × 118 mm | flexible | — | | Spine width | ~7 mm | 14 px | `--cd-spine-width` | ### Open Props Variables (add to `:root`) ```css :root { --cd-jewel-width: 280px; --cd-jewel-height: 245px; --cd-aspect-jewel: 280 / 245; --cd-disc-diameter: 240px; --cd-leaflet-size: 240px; --cd-spine-width: 14px; --cd-tray-width: 260px; } ``` Use these tokens anywhere. The framework is **pure Open Props variables** — no hardcoded magic numbers. --- ## Design System OpenCD maps Open Props design tokens to CD packaging concepts: | Open Props Token | OpenCD Mapping | Purpose | |---------------------------|---------------------------|----------------------------| | `--size-fluid-1` through `--size-fluid-3` | Jewel case padding | Responsive breathing room | | `--font-size-fluid-1` through `--font-size-fluid-3` | Leaflet typography | Title, body, tracklist | | `--font-sans` | `--cd-font-label` | Spine labels, metadata | | `--font-serif` | `--cd-font-body` | Leaflet body text | | `--red-6` / `--red-7` | `--cd-advisory-red` | Human Advisory badge | | `--surface-1` through `--surface-4` | CD tray paper shades | Layered backgrounds | | `--shadow-2` / `--shadow-3` | Jewel case shadow | 3D depth on jewel case | | `--grid-...` | Leaflet grid lines | Visible CD tray grid | --- ## Components | Class | Description | |------------------------|-------------------------------------| | `.cd-jewel-case` | Main jewel case container | | `.cd-spine` | Top navigation bar (CD spine) | | `.leaflet-content` | Inner booklet area with visible grid | | `.leaflet-page` | Individual leaflet page (flippable) | | `.back-tray` | Back card with vertical spines | | `.tray-credits` | Credits / tracklist section | | `.human-advisory` | Parental Advisory style badge | | `.disc-art` | CD disc face area | | `.cd-grid` | Visible tray paper grid overlay | --- ## Templates The framework ships with three core HTML page templates: | Template | Description | |---------------------|-----------------------------------------| | `jewel-case.html` | Front-facing jewel case with disc art | | `leaflet.html` | Multi-page booklet (← → nav) | | `back-tray.html` | Back tray with spines and tracklist | Each template is a complete, standalone HTML file that demonstrates the component in context. --- ## Browser & Device Support OpenCD uses CSS custom properties (Open Props) and modern layout (grid, flexbox). - **Chrome / Edge / Firefox / Safari** — latest 2 versions ✅ - **Mobile (iOS Safari, Android Chrome)** — fully responsive ✅ - **Print** — jewel case aspect ratio preserves physical dimensions ✅ - **IE11** — ❌ (Open Props requires modern CSS) --- ## Trentuna Catalog Part of the Trentuna release catalog (`~/releases/`). Framework design follows the release aesthetic: visible grid, honest structure, no over-engineered abstraction. --- ## Credits - **Open Props** — design tokens by Adam Argyle - **ASW** — semantic HTML pattern source (`~/releases/asw/`) - **Trentuna** — imprint & design direction (`~/trentuna-hq/`) --- *"If you have a problem, if no one else can help, and if you can find them, maybe you can hire… the A-Team."*