Kits
Die Grundlage eines Projekts.
KitIn KLXM Studio das Paket aus Gestaltung und Bausteinen einer Website: Layout, Farben, Schriften und die passenden Blöcke. Ein Kit lässt sich anpassen oder wechseln, die Inhalte bleiben. sind eigenständige Pakete mit BlockBaustein einer Seite, etwa Text, Bild, Galerie, Karte oder Formular. Seiten setzen Sie aus Blöcken zusammen; jeder Block hat Felder für seine Inhalte und Optionen für die Darstellung., Einstellungen und Design-Tokens – der Kern bleibt unverändert und updatefähig.
Allgemein
Für jede Art von Website.
Unternehmen, Organisationen, Projekte – Fluid ist das flexibelste Kit und unsere Empfehlung für den Start: breakpointlos, sehr viel über den Style-Editor einstellbar.
-


Desktop 

Mobil Empfohlen · breakpointlos
Kit „Fluid“
Schrift, Abstände und Raster wachsen stufenlos mit jeder Bildschirmbreite. Zuschaltbar: fließende Seitenwechsel, überstehendes Logo, kompaktes Menü und Einstieg mit Parallax oder Bilderfolge.
-


Desktop 

Mobil Neutral · Musterseiten
Kit „Basis“
Startpunkt für neue Projekte: vier Navigationen, sieben Design-TemplateVorlage für wiederkehrende Seiten oder Dokumente: Aufbau und Gestaltung stehen fest, die Inhalte werden eingesetzt., Dunkelmodus.
-


Desktop 

Mobil Weniger, aber besser
Kit „Essenz“
Funktionaler Minimalismus mit einem einzigen Signal und Karten wie Geräte-Paneele.
-


Desktop 

Mobil Glas mit Lesbarkeit zuerst
Kit „Glas“
Matte Glasflächen über einem weichen Farbfeld – bei „Transparenz reduzieren“ werden sie deckend.
-


Desktop 

Mobil Zeitgemäß & selbstbewusst
Kit „Modern“
Große Grotesk-Typografie, kräftige Farbflächen und ein Bento-Raster – für Studios, Beratungen und Unternehmen.
Branchen & Themen
Für Branchen und Themen.
Mit passenden Blöcken, DatentabelleStrukturierte Inhalte wie Team, Termine, Produkte oder Referenzen: gleich aufgebaute Einträge mit festen Feldern, die auf mehreren Seiten erscheinen können – oft mit eigener Detailseite je Eintrag. und Musterseiten für einen bestimmten Zweck.
-


Desktop 

Mobil Magazin & Verband
Kit „Editorial“
Zeitungskopf, Rubriken und starke Aufmacher für Verbände und Kultur.
-


Desktop 

Mobil Fotografie & Portfolio
Kit „Foto“
Bilder statt Worte: Bühne mit Bildfolge, Bento-Bildstrom, Serien mit Lightbox und leiser Navigation. Mit der Bildauswahl wählen Ihre Kunden ihre Favoriten direkt auf Ihrer Website aus.
-


Desktop 

Mobil Kunst & Ausstellungen
Kit „Galerie“
Künstler, Ausstellungen und Werke als Daten – mit Viewing Room, Preisen auf Anfrage und Besuchsinfos.
-


Desktop 

Mobil Organisch & ruhig
Kit „Nature“
Für Höfe, Hofläden, Gärtnereien, Naturschutz und Outdoor – mit erzeugten Landschaften je Jahreszeit.
-


Desktop 

Mobil Arztpraxis
Kit „Praxis“
Sprechzeiten, Praxisdaten und verschlüsselte Eingänge für Rezept- und Überweisungswünsche. Wahlweise in der Darstellung „Klassisch“ mit einstellbaren Verlaufsfarben.
Weitere Kits auf GitHub
Kits als eigenes Paket.
Neben den mitgelieferten Kits gibt es weitere als eigenes Paket bei KLXM-Opensource auf GitHub – als ZIP in der Verwaltung hochladen oder per Composer installieren. Der Kern bleibt dabei unverändert und updatefähig.
-

Makler & Hausverwaltung
Kit „Immobilien“
Objekte nach OpenImmoBranchenstandard zum Austausch von Immobilienangeboten zwischen Maklersoftware und Portalen bzw. Websites.openimmo.de (öffnet in neuem Tab) mit Filtern und Energieausweis-Angaben, Exposé auf Anfrage über ein verschlüsseltes Formular samt Widerrufsformular, Suchaufträge, Bewertungen und Schadensmeldungen – auf Basis von Fluid.
-
Als ZIP hochladen
Das Release-ZIP von GitHub laden und unter Grundeinstellungen → Kits hochladen – oder auf dem Server mit kit:install. Geprüft werden Pfade, Kit-Name, Core-Version und PHPWeit verbreitete Programmiersprache für Websites. KLXM Studio ist in PHP geschrieben und läuft deshalb auf fast jedem üblichen Webhosting.php.net (öffnet in neuem Tab)-Syntax.
Release v0.1.0: Als ZIP hochladen -
Per Composer
Kits sind Composer-Pakete vom Typ klxm-studio-kit und bringen ihre fertig gebauten Assets mit – kein Build auf dem Server.
-
Alle Kits bei KLXM-Opensource
Weitere Kits erscheinen als eigene Repositories bei KLXM-Opensource – MIT-lizenziert wie der Kern.
Kits auf GitHub: Alle Kits bei KLXM-Opensource
Entwickler
Der Ausgangspunkt für eigene Kits.
Das kleinste vollständige Kit und ein Beispiel, wie ein Kit mit Tailwind oder UIkit arbeitet.
-


Desktop 

Mobil Tailwind CSS & UIkit
Kit „Frameworks“
Dieselben Blöcke mit Tailwind CSSSprache für das Aussehen von Webseiten: Farben, Schriften, Abstände und das Verhalten auf verschiedenen Bildschirmgrößen. 4 oder UIkit 3 – die Vorlage für eigene Kits mit Framework.
-


Desktop 

Mobil Ausgangspunkt
Start-Kit
Das kleinste vollständige Kit für eigene Entwicklungen – kommentiert in elf Abschnitten.
Fluid im Style-Editor
Ein Kit, viele Gesichter.
Jede Aufnahme zeigt dieselbe Seite mit demselben Kit – nur die Einstellungen im Style-Editor sind anders: Farben, Schriften, Kopfbereich, Buttons und Karten, hell und dunkel. Ohne eine Zeile Code.
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Dunkles Farbschema
Smartphone, hell und dunkel
Video · 0:46
Ändern und sofort sehen.
Vorlage wählen, dann Akzentfarbe, Schrift, Buttons, Karten und Kopfbereich anpassen – die Vorschau zeigt jede Änderung sofort. Online geht sie erst mit „Speichern“.
Transkript anzeigen: Video: Fluid im Style-Editor
Der Style-Editor des Kits „Fluid“: links Einstellungen, rechts die Vorschau. Vorlage „Kanzlei“: Serifenschrift, eckige Buttons, zentrierter Kopf. Vorlage „Handwerk“: Terrakotta, runde Buttons, schwebender Kopf. Vorlage „Tech-Startup“: dunkel, Glas-Karten, Raster im Hintergrund. Vorlage „Gesundheit“: gut lesbare Schrift, Infoleiste, deutliche Links. Zurück zu „Fluid Standard“ – jetzt im Detail anpassen. Akzentfarbe ändern – hell und dunkel. Der Kontrast wird gleich geprüft. Schrift für Überschriften: Fraunces statt Inter. Buttons: rund statt eckig. Karten: mit Schatten statt mit Rahmen. Kopfbereich: schwebende, abgerundete Leiste. Vorschau im dunklen Farbschema – alles ohne eine Zeile Code.
Individuelles Kit
Ihr eigenes Kit – von KLXM Crossmedia.
Nichts Passendes dabei? Wir entwickeln Ihr Kit passend zu Ihrem Erscheinungsbild – mit eigenen Blöcken, Datentabellen und Musterseiten für Ihre Branche, BarrierefreiheitWebsites so gestalten und programmieren, dass alle Menschen sie nutzen können – auch mit Seh-, Hör- oder motorischen Einschränkungen, mit Screenreader oder nur per Tastatur.bundesfachstelle-barrierefreiheit.de (öffnet in neuem Tab) und updatefähig. Sprechen Sie uns an.
Kit statt Theme
Mehr als eine Oberfläche.
Ein Theme ändert, wie eine Website aussieht. Ein Kit legt fest, was sie kann – Gestaltung, Inhalte, Daten und Regeln in einem Paket. Der Kern bleibt unberührt und updatefähig.
Ein Theme
- Tauscht Farben, Schriften und Layout
- Funktionen kommen aus Plugins – jedes mit eigener Logik und eigenen Updates
- Inhalte und Datenstruktur bleiben generisch
- Anpassungen gehen beim Update gern verloren
- Am Ende sehen viele Projekte gleich aus
Ein Kit
- Enthält alles, was das Projekt braucht: Design, Blöcke, Website-Angaben, Listen, Detailseiten, SEOSuchmaschinenoptimierung: Maßnahmen, damit eine Website bei Google & Co. gut gefunden wird – von hilfreichen Inhalten und Seitentiteln über schnelle Ladezeiten bis zu sauberer Technik.developers.google.com (öffnet in neuem Tab), Startinhalte und Sprachen
- Datenstruktur passend zum Projekt – Sprechzeiten für die Praxis, Termine für den Verein
- Erweiterbar mit eigenen Blöcken, Feldern und Erweiterungen per Composer
- Individuell im Style-Editor – ohne eine Zeile Code
- Eigene Kits mit kit:create, versioniert im eigenen Repository
Was ein Kit ausmacht
Alles drin. Erweiterbar. Individuell.
-
Alles drin
Die Redaktion arbeitet vom ersten Tag an mit echten Feldern statt mit Freitext – Öffnungszeiten, Termine, Ansprechpartner, JSON-LDFormat für strukturierte Daten im Code einer Seite: Es beschreibt Suchmaschinen maschinenlesbar, worum es geht – etwa Organisation, Veranstaltung oder Artikel (Vokabular von schema.org).developers.google.com (öffnet in neuem Tab) für Suchmaschinen.
-
Erweiterbar
Neue Blöcke, Listen und Erweiterungen kommen dazu, wenn das Projekt wächst. Der Kern bleibt updatefähig, das Kit gehört Ihnen.
-
Individuell
Vorlagen, Style-Editor und Dunkelmodus für den schnellen Weg – oder ein eigenes Kit auf Basis des Start-Kits für den eigenen Auftritt.
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; die Schriftverwaltung des Kerns installiert sie einmal für die ganze Installation.
-
kit:create
Neues Kit als Kopie des Start-Kits oder einer anderen Vorlage – mit eigenem Präfix, eigenen Blöcken und Einstellungen.
-
Als Paket
Zusätzliche Kits per Composer oder als ZIP über Grundeinstellungen → Kits installieren; die Seite zeigt Herkunft, Version und nutzende Websites.
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
kits/essenz/theme.phpBlöcke, Einstellungen, SEO, bedingtes CSSdesign.phpDesign-Tokens und Vorlagenfunctions.phpHelfer essenz_*seed.phpStartinhalteblocks/eine PHP-Vorlage je Blockfaq.phphero.phptemplates/Layout, Fehlerseite, partials/assets/Quellen, gebaut nach public/kits/essenzcss/js/lang/en.php, site/en.phptools/demo.php, demo-content.php, contrast.phpdocs/manual.phpKapitel fürs Handbuch der RedaktionREADME.md
Schichten
-
Design-Tokens, Vorlagen und Navigationsvarianten – im Style-Editor einstellbar.
-
Felder und eine PHP-Vorlage je Block.
-
Website-Formular, Listen und Detailseiten.
-
Titel, Beschreibung und JSON-LD.
-
Seiten, Tabellen und Bilder beim ersten Aufruf.
-
Feste Texte über lt() mit Übersetzungen.
-
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.
kits/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().
kits/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.
kits/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).
kits/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.
kits/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.
kits/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.
kits/starter
kits/starter/assets/css/_base.cssReset, Typografie, Abschnitte, Buttons_tokens.cssDesign-Tokens + Rollen, hell/dunkelblocks.cssnur bei Beispielblöckencore.cssVariablen für Kern-Blöckesite.cssimmer geladenjs/site.jsProgressive Enhancementvideo.jsZwei-Klick-Videoblocks/cards.phpcta.phpdownloads.phpfaq.phphero.phptext.phptext_image.phpvideo.phplang/site/en.phpen.phptemplates/partials/editor.phpEditor-Mountfooter.phpheader.phpsection.phpvideo-embed.phpZwei-Klick, MP4, Postererror.phplayout.phpmaintenance.phpoffline.phptools/contrast.phpWCAGInternationale Richtlinien des W3C für barrierefreie Webinhalte. Stufe AA der WCAG 2.1 ist die Grundlage der europäischen Norm EN 301 549 und damit der Anforderungen nach dem BFSG.w3.org (öffnet in neuem Tab)-Prüfungdemo-content.phpStartseite + Unterseitebuild.mjsoptionaler Build-HookCHANGELOG.mdcomposer.jsonStub „klxm-studio-kit“ (Paket-Installation geplant)functions.phpHelfer starter_*LICENSEREADME.mdseed.phpStartinhaltetheme.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/.
-
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-Opensource/studio.git cd studio -
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/.
-
Bauen
Kopiert die Quellen aus assets/ nach public/kits/meinkit und verkleinert sie.
shell cd tools && pnpm run build && cd .. -
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 kits/meinkit/tools/contrast.php
Kontakt
Sprechen Sie mit KLXM Crossmedia.
Vorführung, Einsatz in Ihrem Projekt oder eine Erweiterung nach Ihren Wünschen – sprechen Sie uns an. Wir antworten persönlich.
Am Schürmannshütt 40g
47441 Moers
Deutschland
- Telefon
- +49 2841 889998-0
- info@klxm.de
























