194 lines
No EOL
7.2 KiB
Markdown
194 lines
No EOL
7.2 KiB
Markdown
# 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
|
||
<link rel="stylesheet" href="https://unpkg.com/opencd@latest/opencd.css">
|
||
```
|
||
|
||
```html
|
||
<main class="cd-jewel-case">
|
||
<nav class="cd-spine">
|
||
<span class="spine-label">OPENCD · TRENTUNA RELEASE</span>
|
||
<span class="spine-track">01 · jewel-case</span>
|
||
</nav>
|
||
|
||
<section class="leaflet-content">
|
||
<h1>Your Content Here</h1>
|
||
<p>This is the inner booklet area with visible CD tray grid.</p>
|
||
</section>
|
||
|
||
<aside class="human-advisory">
|
||
<span class="advisory-label">HUMAN MADE</span>
|
||
<span class="advisory-text">designed with physical care</span>
|
||
</aside>
|
||
</main>
|
||
```
|
||
|
||
---
|
||
|
||
## 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
|
||
<!-- Pure semantic structure -->
|
||
<article class="cd-jewel-case">
|
||
<header class="cd-spine" role="navigation">
|
||
<h2 class="spine-label">OPENCD · ALBUM TITLE</h2>
|
||
</header>
|
||
|
||
<main class="leaflet-content">
|
||
<article><!-- your content --></article>
|
||
</main>
|
||
|
||
<footer class="back-tray">
|
||
<section class="tray-credits">
|
||
<!-- credits / tracklist -->
|
||
</section>
|
||
</footer>
|
||
</article>
|
||
```
|
||
|
||
---
|
||
|
||
## 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."* |