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.

Neutral · Baukasten

Kit „Basis“

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

Kit „Fluid“

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

Kit „Editorial“

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

Kit „Essenz“

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

Kit „Praxis“

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

Kit „Nature“

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

Kit „Modern“

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

Kit „Glas“

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

Start-Kit

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

Hell, dunkel, mobil

Auf jedem Gerät.

Ein Klick vergrößert. Die Demo-Inhalte sind frei erfunden.

– vergrößern

Kit „Essenz“ im Dunkelmodus
– vergrößern

Kit „Editorial“ im Dunkelmodus
– vergrößern

Kit „Nature“ im Dunkelmodus „Waldnacht“
– vergrößern

Kit „Nature“ mit der Vorlage „Herbst“
– vergrößern

Kit „Modern“ im Dunkelmodus
– vergrößern

Kit „Glas“ im Dunkelmodus

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

Design

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

Felder und eine PHP-Vorlage je Block.
Datenstruktur

Website-Formular, Listen und Detailseiten.
SEO

Titel, Beschreibung und JSON-LD.
Startinhalte

Seiten, Tabellen und Bilder beim ersten Aufruf.
Sprachen

Feste Texte über lt() mit Übersetzungen.
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 Meta · § 2 Abschnitte

Name, Version, Core-Version; Hintergründe und Container.
§ 3 SEO & JSON-LD · § 4 Projekt

Titel, Beschreibung, Organisation; Begriffe, Checks, App-Icon.
§ 5 Assets · § 6 Design

CSS/JS nur, wo nötig; Design-Tokens, Vorlagen, Navigationsvarianten, hell/dunkel.
§ 7 Website · § 8 Blöcke · § 9 Daten

Zentrales Formular; Beispielblöcke plus Kern-Blöcke; Listen und Detailseiten.
§ 10 Startinhalte · § 11 Sprachen

Startseite und Unterseite; Übersetzungen in lang/.

– vergrößern

Startseite des Start-Kits (Demo)

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.

Quelltext holen

git

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

02
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
```
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/.
04
Bauen

Kopiert die Quellen aus assets/ nach public/themes/meinkit und verkleinert sie.
shell
```
cd tools && pnpm run build && cd ..
```
05
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 aufnehmen Anrufen

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

Telefon: +49 2841 889998-0
E-Mail: info@klxm.de
Website: klxm.de (öffnet in neuem Tab)

Die Grundlage jedes Projekts.

Kit „Basis“

Kit „Fluid“

Kit „Editorial“

Kit „Essenz“

Kit „Praxis“

Kit „Nature“

Kit „Modern“

Kit „Glas“

Start-Kit

Budgets

WCAG 2.2 AA

Schriften lokal

kit:create

Design

Blöcke

Datenstruktur

SEO

Startinhalte

Sprachen

Logik

Quelltext holen

Kit anlegen

Tokens und Blöcke anpassen

Bauen

Prüfen