heimseiten / contao-lesbares-css-framework-bundle

7.1.0 2026-10-30 20:14 UTC

Requires

• php: ^8.1
• contao/core-bundle: ^5.3

GPL-3.0-or-later

• heimseiten.de - Webdesign aus Köln

• framework
• css
• backend
• styles
• contao

Published on Packagist.org on 2026-10-30 21:05 UTC

README

Stellt ein „lesbares" CSS-Framework (deutsche, sprechende Klassennamen) bereit und macht die Klassen im Backend an Artikeln und Inhaltselementen auswählbar – ohne Konfiguration im Backend. Die gewählten Klassen werden in das normale cssID-Klassenfeld des Elements geschrieben (und live mitaktualisiert, während man auswählt).

Installation

composer require heimseiten/contao-lesbares-css-framework-bundle
vendor/bin/contao-console contao:migrate

Ohne weitere Konfiguration ist das mitgelieferte Framework aktiv: Die CSS wird im Frontend geladen und alle Klassen erscheinen – nach Kategorien gruppiert – im Auswahlfeld „Lesbare CSS-Klassen".

Konfiguration (optional)

Alles über config/config.yaml – nichts davon ist Pflicht:

heimseiten_contao_lesbares_css_framework:
    # Das mitgelieferte Framework parsen und im Frontend laden.
    # false = nur eigene Klassen verwenden (mein Framework wird weder geladen noch angeboten).
    builtin: true

    # Einzelne Kategorien aus dem Auswahlfeld ausblenden ("nur Teile").
    # Verfügbare Kategorien: TEXT, BILDER, LISTEN, LINKS, SPALTEN, FORMULARE, FLÄCHEN,
    # KACHELN, BREITE, HÖHE, ABSTÄNDE, FARBEN, SCROLLING, ICONS, animierterUnterstrich
    exclude_categories: ['FARBEN']

    # Eigene CSS-Dateien, deren Klassen zusätzlich auswählbar werden.
    sources:
        - '%kernel.project_dir%/files/mein-theme/eigene-klassen.css'

    # Tooltips im Auswahlfeld: eigene Beschreibungen als JSON ("Klasse": "Text").
    # Klassen ohne Beschreibung zeigen ihre CSS-Regel, z. B. „CSS: { text-align: right; }“.
    descriptions:
        - '%kernel.project_dir%/files/mein-theme/klassen-beschreibung.json'

    # CSS-Dateien, die nicht zur Auswahl stehen, aber festlegen, was eine Klasse bewirkt
    # (für die Tooltips; das mitgelieferte Grid-Framework ist automatisch dabei).
    describe_sources:
        - '%kernel.project_dir%/files/mein-theme/theme.css'

Tooltips

Fährt man im Auswahlfeld mit der Maus über eine Klasse, erscheint nach etwa 0,1 Sekunden, was sie bewirkt (der Tooltip des Browsers und der von Contao warten rund eine Sekunde). Er sieht aus wie der Contao-Tooltip und folgt dem hellen und dunklen Backend. Die Texte kommen aus descriptions, sonst aus der CSS-Regel der Klasse. Beschreibungen bitte nicht als CSS-Kommentar in eine sources-Datei schreiben: jeder Kommentar dort wird zur Kategorie.

Eigene Klassen definieren

Lege eine CSS-Datei an und gruppiere die Klassen über Kommentar-Marker – genau diese Titel werden zu den Kategorien im Auswahlfeld:

/************ EIGENE FLÄCHEN ************/
.MeinKastenHervorgehoben { ... }
.MeinKastenDezent       { ... }

Trage die Datei unter sources ein. Die Klassen tauchen dann unter „EIGENE FLÄCHEN" auf. Das Laden dieser eigenen CSS übernimmt weiterhin dein Projekt/Theme – das Bundle liest sie nur für das Auswahlfeld aus.

Hinweis: Technische Selektoren (.mod_*, .ce_*, .rte, .icon …) werden automatisch herausgefiltert; ein Klassenname, der in mehreren Kategorien vorkommt, erscheint nur einmal.