opencd: initial framework seed — README with CD specs, design system, semantic HTML patterns, and A-Team call to arms
This commit is contained in:
commit
1ae235fd61
GPG key ID:
159D6AD58C8E55E9
1 changed files with 194 additions and 0 deletions
194
README.md
Normal file
194
README.md
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
# 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."*
|
||||
Loading…
Add table
Add a link
Reference in a new issue