KLXM Studio – Startseite
Kontakt aufnehmen

Kits

Die Grundlage jedes Projekts.

Kits sind eigenständige Pakete mit Blöcken, Einstellungen und Design-Tokens – der Kern bleibt unverändert und updatefähig.

Kits

Neun Kits – Gestaltung, Blöcke und Datenstruktur für den Start.

Ein Kit ist die Grundlage eines Projekts: Gestaltung, Blöcke, Website-Angaben, Listen und Detailseiten, strukturierte Daten, Startinhalte und Sprachen. Das Design darin stellen Sie im Style-Editor ein; eigene Kits entstehen mit kit:create.

  • Kit „Basis“

    Farbschema der Vorschau
    Desktop
    Mobil

    Neutral · Baukasten

    Kit „Basis“

    Startpunkt für neue Projekte: vier Navigationen, sieben Design-Vorlagen, Dunkelmodus.

  • Kit „Fluid“

    Farbschema der Vorschau
    Desktop
    Mobil

    Breakpointlos

    Kit „Fluid“

    Schrift, Abstände und Raster wachsen stufenlos mit jeder Bildschirmbreite.

  • Kit „Editorial“

    Farbschema der Vorschau
    Desktop
    Mobil

    Magazin & Verband

    Kit „Editorial“

    Zeitungskopf, Rubriken und starke Aufmacher für Verbände und Kultur.

  • Kit „Essenz“

    Farbschema der Vorschau
    Desktop
    Mobil

    Weniger, aber besser

    Kit „Essenz“

    Funktionaler Minimalismus mit einem einzigen Signal und Karten wie Geräte-Paneele.

  • Kit „Praxis“

    Nur hell

    Desktop
    Mobil

    Arztpraxis

    Kit „Praxis“

    Sprechzeiten, Praxisdaten und verschlüsselte Eingänge für Rezept- und Überweisungswünsche.

  • Kit „Nature“

    Farbschema der Vorschau
    Desktop
    Mobil

    Organisch & ruhig

    Kit „Nature“

    Für Höfe, Hofläden, Gärtnereien, Naturschutz und Outdoor – mit erzeugten Landschaften je Jahreszeit.

  • Kit „Modern“

    Farbschema der Vorschau
    Desktop
    Mobil

    Zeitgemäß & selbstbewusst

    Kit „Modern“

    Große Grotesk-Typografie, kräftige Farbflächen und ein Bento-Raster – für Studios, Beratungen und Unternehmen.

  • Kit „Glas“

    Farbschema der Vorschau
    Desktop
    Mobil

    Glas mit Lesbarkeit zuerst

    Kit „Glas“

    Matte Glasflächen über einem weichen Farbfeld – bei „Transparenz reduzieren“ werden sie deckend.

  • Start-Kit

    Farbschema der Vorschau
    Desktop
    Mobil

    Ausgangspunkt

    Start-Kit

    Das kleinste vollständige Kit für eigene Entwicklungen – kommentiert in elf Abschnitten.

Eingebaut

Budgets und Barrierefreiheit.

  • Budgets

    Grundlage der Startseite unter 30 KB CSS und unter 8 KB JavaScript; Block-CSS lädt nur, wo der Block steht.

  • WCAG 2.2 AA

    Kontraste werden im Style-Editor geprüft; Vorlagen hell und dunkel sind abgestimmt.

  • Schriften lokal

    Alle Schriften werden vom eigenen Server geladen.

  • kit:create

    Neues Kit als Kopie des Start-Kits oder einer anderen Vorlage – mit eigenem Präfix, eigenen Blöcken und Einstellungen.

Aufbau eines Kits

Was in einem Kit steckt.

Am Beispiel des Kits „Essenz“: ein Ordner mit klaren Zuständigkeiten – und sieben Schichten, die zusammen die Grundlage eines Projekts bilden.

Ordner

  • themes/essenz/
  • theme.phpBlöcke, Einstellungen, SEO, bedingtes CSS
  • design.phpDesign-Tokens und Vorlagen
  • functions.phpHelfer essenz_*
  • seed.phpStartinhalte
  • blocks/eine PHP-Vorlage je Block
  • faq.php
  • hero.php
  • templates/Layout, Fehlerseite, partials/
  • assets/Quellen, gebaut nach public/themes/essenz
  • css/
  • js/
  • lang/en.php, site/en.php
  • tools/demo.php, demo-content.php, contrast.php
  • docs/manual.phpKapitel fürs Handbuch der Redaktion
  • README.md

Schichten

  1. Design

    Design-Tokens, Vorlagen und Navigationsvarianten – im Style-Editor einstellbar.

  2. Blöcke

    Felder und eine PHP-Vorlage je Block.

  3. Datenstruktur

    Website-Formular, Listen und Detailseiten.

  4. SEO

    Titel, Beschreibung und JSON-LD.

  5. Startinhalte

    Seiten, Tabellen und Bilder beim ersten Aufruf.

  6. Sprachen

    Feste Texte über lt() mit Übersetzungen.

  7. Logik

    Helfer-Funktionen mit eigenem Präfix.

Schicht für Schicht

Echte Ausschnitte aus dem Kit „Essenz“.

  • Design

    Jeder Token wird eine CSS-Variable oder eine Klasse am <html>; Kontrastpaare prüft der Style-Editor. Dazu Vorlagen wie „Signalorange“ oder „Graphit“ und Varianten für den Kopfbereich.

    themes/essenz/design.php
    $color('accent', 'Signal (Füllfarbe)', '--e-a', '#D85B19', '#F0782F', ['with' => 'background', 'min' => 3],
…
['name' => 'header', 'label' => 'Kopfbereich', 'type' => 'choice', 'class' => 'hdr-{value}', 'default' => 'bar', 'preview' => 'nav',

  • Blöcke

    Die Definition beschreibt Felder, Varianten und strukturierte Daten; die Vorlage gibt aus – mit Inline-Editing über $b->edit().

    themes/essenz/theme.php · blocks/faq.php
    'faq' => [
    'label' => 'Fragen & Antworten', 'icon' => 'question', 'group' => 'Inhalt',
    'variants' => ['split' => 'Überschrift links, Fragen rechts', 'stacked' => 'Untereinander'],

<summary class="faq__q">… <span class="faq__qt"<?= $b->edit("items.$i.q") ?>><?= e($it['q']) ?></span>

  • Datenstruktur

    Das Formular „Website“ legt die zentralen Angaben fest – Name, Adresse, Zeiten; Blöcke und Vorlagen lesen sie mit setting(). Detailseiten entstehen als Vorlage je Datentabelle.

    themes/essenz/theme.php
    'settings' => [
    'title' => 'Website',
    'groups' => [
        ['id' => 'stammdaten', 'label' => 'Stammdaten', 'fields' => [
            ['name' => 'org_name', 'label' => 'Name (Unternehmen, Verein, Büro …)', 'type' => 'text', 'required' => true,

  • SEO

    Welche Angaben Seitentitel, Beschreibung und Vorschaubild speisen – und welche Funktion die Organisation als JSON-LD liefert. Blöcke erklären ihre Daten selbst (z. B. FAQPage).

    themes/essenz/theme.php
    'seo' => [
    'home_title' => 'site_title',
    'title_suffix' => 'site_title_suffix',
    'title_suffix_fallback' => 'org_name',
    'description' => 'default_meta_description',
    'og_image' => 'og_default_image',
],
'jsonld' => 'essenz_jsonld',
…
'jsonld' => ['type' => 'faq', 'items' => 'items', 'question' => 'q', 'answer' => 'a'],

  • Startinhalte

    Beim ersten Aufruf einer neuen Website spielt das Kit Einstellungen und Seiten ein – und optional mehr, etwa Musterseiten mit Tabellen und Bildern.

    themes/essenz/seed.php
    'after' => function () {
    require_once __DIR__ . '/tools/demo-content.php';
    essenz_demo_install();
},

  • Sprachen

    Feste Texte stehen auf Deutsch im Template und werden über lt() in der Sprache der Seite ausgegeben.

    templates/layout.php · lang/site/en.php
    <a class="skip" href="#main"><?= e(lt('Zum Inhalt springen')) ?></a>

'Datenschutz' => 'Privacy',

  • Logik

    Helfer mit dem Präfix des Kits – kit:create benennt ihn für abgeleitete Kits automatisch um.

    themes/essenz/functions.php
    function essenz_name(bool $short = false): string
{
    $name = trim((string) setting('org_name'));
    $shortName = trim((string) setting('short_name'));
    if ($short && $shortName !== '') return $shortName;
    return $name !== '' ? $name : ($shortName !== '' ? $shortName : site_name());
}

Start-Kit

Aufbau des Start-Kits.

Der vollständige Ordner – theme.php ist in elf kommentierte Abschnitte gegliedert.

themes/starter

  • themes/starter/
  • assets/
  • css/
  • _base.cssReset, Typografie, Abschnitte, Buttons
  • _tokens.cssDesign-Tokens + Rollen, hell/dunkel
  • blocks.cssnur bei Beispielblöcken
  • core.cssVariablen für Kern-Blöcke
  • site.cssimmer geladen
  • js/
  • site.jsProgressive Enhancement
  • video.jsZwei-Klick-Video
  • blocks/
  • cards.php
  • cta.php
  • downloads.php
  • faq.php
  • hero.php
  • text.php
  • text_image.php
  • video.php
  • lang/
  • site/
  • en.php
  • en.php
  • templates/
  • partials/
  • editor.phpEditor-Mount
  • footer.php
  • header.php
  • section.php
  • video-embed.phpZwei-Klick, MP4, Poster
  • error.php
  • layout.php
  • maintenance.php
  • offline.php
  • tools/
  • contrast.phpWCAG-Prüfung
  • demo-content.phpStartseite + Unterseite
  • build.mjsoptionaler Build-Hook
  • CHANGELOG.md
  • composer.jsonStub „klxm-studio-kit“ (Paket-Installation geplant)
  • functions.phpHelfer starter_*
  • LICENSE
  • README.md
  • seed.phpStartinhalte
  • theme.phpDefinition in 11 kommentierten Abschnitten

theme.php · § 1–11

  1. § 1 Meta · § 2 Abschnitte

    Name, Version, Core-Version; Hintergründe und Container.

  2. § 3 SEO & JSON-LD · § 4 Projekt

    Titel, Beschreibung, Organisation; Begriffe, Checks, App-Icon.

  3. § 5 Assets · § 6 Design

    CSS/JS nur, wo nötig; Design-Tokens, Vorlagen, Navigationsvarianten, hell/dunkel.

  4. § 7 Website · § 8 Blöcke · § 9 Daten

    Zentrales Formular; Beispielblöcke plus Kern-Blöcke; Listen und Detailseiten.

  5. § 10 Startinhalte · § 11 Sprachen

    Startseite und Unterseite; Übersetzungen in lang/.

Start-Kit

Eigenes Kit in wenigen Schritten.

Das Start-Kit ist das kleinste vollständige Kit: Systemschrift, eine Akzentfarbe, hell und dunkel, sechs Beispielblöcke plus Video und Downloads – Startseite ≈ 15,7 KB CSS und 0,4 KB JavaScript.

  1. Quelltext holen

    git
    git clone https://github.com/klxm/studio.git
cd studio

  2. Kit anlegen

    Kopie des Start-Kits (Standard) mit eigenem Präfix für Funktionen und Einstellungen; --from wählt ein anderes Kit als Vorlage.

    shell
    php bin/console kit:create meinkit
php bin/console kit:create meinkit --from=basis   # oder ein anderes Kit

  3. Tokens und Blöcke anpassen

    theme.php ist in elf kommentierte Abschnitte gegliedert: § 6 Design-Tokens, § 8 Blöcke (Felder + Vorlage in blocks/), § 11 Sprachen in lang/.

  4. Bauen

    Kopiert die Quellen aus assets/ nach public/themes/meinkit und verkleinert sie.

    shell
    cd tools && pnpm run build && cd ..

  5. Prüfen

    Health-Prüfung („Kit kompatibel“) und Kontraste aller Voreinstellungen nach WCAG 2.2 AA, hell und dunkel.

    shell
    php bin/console health
php themes/meinkit/tools/contrast.php

Start-Kit auf GitHub (öffnet in neuem Tab)

Kontakt

Sprechen Sie mit KLXM Crossmedia.

Vorführung, Einsatz in Ihrer Agentur oder technische Fragen – wir antworten persönlich.

Kontakt aufnehmenAnrufen
KLXM Crossmedia GmbH
Am Schürmannshütt 40g
47441 Moers
Deutschland