CRT Style Guide

A modern Web Component Library with retro CRT aesthetic
Built with Lit, TypeScript and Vite

🖥️ View Live Demo

✨ Features

📁 Project Structure

crtstyleguide/
├── src/
│   ├── components/
│   │   ├── atoms/           # Basic building blocks (Button, Input, Badge, etc.)
│   │   ├── molecules/       # Composite components (Card, Modal, Table)
│   │   └── organisms/       # Complex UI areas (MusicStation)
│   ├── styles/
│   │   ├── design-tokens.css  # CSS Custom Properties
│   │   └── index.css          # Global Styles
│   ├── utils/               # Helper functions
│   └── index.ts             # Library Entry Point
├── styleguide/              # Living Style Guide App
│   ├── index.html
│   ├── main.ts
│   ├── template.ts
│   └── style.css
├── public/
│   └── fonts/               # IBM Plex Mono font files
├── vite.config.ts           # Dev & Style Guide Build
├── vite.lib.config.ts       # Library Build
└── tsconfig.json

🚀 Quick Start

Installation

npm install

Development Server

npm run dev

Opens the Style Guide at: http://localhost:5175/styleguide/

📜 Available Scripts

🧩 Component Overview

Atoms (Basic Building Blocks)

Molecules (Zusammengesetzt)

Organisms (Komplex)

🎵 Music Player Tracks (Lyrics)

Lyrics werden direkt im Track-Objekt übergeben:

<crt-music-player
  .tracks=${[
    {
      title: 'VERROSTETE TERMINALS',
      artist: 'PATIMWEP',
      url: 'patimwep - Verrostete Terminals.mp3',
      lyrics: '[INTRO]\nSTATIC IN THE WIRES\nNEON HISS AND SOFT DESIRES\n\n[HOOK]\nVERROSTETE TERMINALS\nSIGNAL LOST, RETURNING CALLS',
    },
  ]}
></crt-music-player>

🎨 Design Tokens

Die Library verwendet CSS Custom Properties für konsistentes Theming:

:root {
  /* Primärfarben */
  --crt-primary: #33ff33;
  --crt-primary-light: #44ff44;
  --crt-primary-dark: #22cc22;
  
  /* Hintergründe */
  --crt-bg-dark: #0a0a0a;
  --crt-bg-darker: #000000;
  --crt-bg-light: #1a1a1a;
  
  /* Status-Farben */
  --crt-success: #00ff00;
  --crt-warning: #ffff00;
  --crt-error: #ff0000;
  --crt-info: #00ffff;
  
  /* Glow-Effekte */
  --crt-glow-sm: 0 0 5px rgba(51, 255, 51, 0.3);
  --crt-glow: 0 0 10px rgba(51, 255, 51, 0.5);
  --crt-glow-lg: 0 0 20px rgba(51, 255, 51, 0.7);
  
  /* Typografie */
  --crt-font-family: 'VT323', 'Courier New', monospace;
}

🔧 Eigene Komponenten erstellen

1. Komponente anlegen

// src/components/atoms/my-component.ts
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('crt-my-component')
export class MyComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
      color: var(--crt-text-primary);
      font-family: var(--crt-font-family);
    }
    
    .container {
      padding: var(--crt-spacing-md);
      border: var(--crt-border);
      box-shadow: var(--crt-glow);
    }
  `;

  @property({ type: String }) label = 'Hello CRT';

  render() {
    return html`
      <div class="container">
        ${this.label}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'crt-my-component': MyComponent;
  }
}

2. Exportieren

// src/components/atoms/index.ts
export { MyComponent } from './my-component';

3. Im Style Guide dokumentieren

Füge die Komponente in styleguide/components-register.ts hinzu.

📦 Als NPM-Paket veröffentlichen

Build erstellen

npm run build:lib

Paket veröffentlichen

npm publish

In anderen Projekten nutzen

Installation:

npm install @patimweb/crtstyleguide

JavaScript/TypeScript einbinden:

// Alle Komponenten importieren (registriert automatisch die Custom Elements)
import '@patimweb/crtstyleguide';

// Oder einzelne Komponenten
import { Button, Card, Modal } from '@patimweb/crtstyleguide';

CSS einbinden:

// In deiner Haupt-JS/TS-Datei
import '@patimweb/crtstyleguide/styles';
// oder
import '@patimweb/crtstyleguide/styles.css';

Oder direkt im HTML:

<link rel="stylesheet" href="node_modules/@patimweb/crtstyleguide/dist/lib/components.css">

Komponenten verwenden:

<crt-button variant="primary">Click me</crt-button>
<crt-button variant="secondary" size="small">Small Button</crt-button>

<crt-card>
  <h2 slot="header">Titel</h2>
  <p>Inhalt der Karte</p>
</crt-card>

<crt-input label="Username" placeholder="Enter username"></crt-input>

<crt-alert variant="success">Erfolgreich gespeichert!</crt-alert>

Mit Framework (z.B. React):

import '@patimweb/crtstyleguide';
import '@patimweb/crtstyleguide/styles';

function App() {
  return (
    <div>
      <crt-button onClick={() => alert('Clicked!')}>
        CRT Button
      </crt-button>
    </div>
  );
}

🛠️ Technologie-Stack

• Lit - Web Components Library
• TypeScript - Type-safe JavaScript
• Vite - Build Tool & Dev Server
• ESLint - Code Linting

📄 Lizenz

Apache License 2.0 - siehe LICENSE für Details.

_{Built with 💚 and lots of neon glow
© 2026 Patrick Weppelmann}