README

Visuelles 12-Spalten-Grid für Contao 5.3+. Redakteure legen Reihen mit 1–4 Spalten per Klick an und passen die Breiten direkt in der Elementliste an – ohne CSS-Klassen zu kennen.

Funktionen

„Neues Grid“ in der Kopfleiste jeder Elementliste (Artikel, News, Events, …) mit den Vorlagen 1, 2, 3 und 4 Spalten (12 · 6/6 · 4/4/4 · 3/3/3/3). Danach wählt man wie gewohnt über das Einfügen-Symbol die Position.
Backend-Vorschau der Reihe mit Spalten nebeneinander:
- − / + pro Spalte – in einer vollen Reihe gibt die Nachbarspalte eine Einheit ab bzw. bekommt sie, freie Einheiten werden zuerst genutzt
- + Spalte (max. 4) – übernimmt freie Einheiten, sonst wird gleichmäßig verteilt
- Inhalt, Bearbeiten, Löschen pro Spalte (Löschen mit Contao-Undo; die Einheiten gehen an die Nachbarspalte)
- Gleiche Höhe und Spaltenabstände L / M / S / – pro Reihe
Verschachtelte Inhaltselemente (Contao 5): Reihe → Spalten → beliebige Elemente. Kein Start/Stop-Paar, das HTML ist immer korrekt geschlossen; Kopieren, Verschieben und Löschen betreffen die Reihe als Ganzes.
Rechteprüfung über die Contao-Voter (inkl. erlaubter Elementtypen der Benutzergruppe), Versionierung aller Änderungen, CSRF-Schutz.

Installation

composer require s-punkt-online/contao-grid-bundle
vendor/bin/contao-console contao:migrate

Regeln

Regel	Wert
Einheiten pro Reihe	12
Spalten pro Reihe	1–4
Breite einer Spalte	1–12 Einheiten, zusammen höchstens 12
Mobil (< 768 px)	Spalten stehen untereinander

Grid-Spalten können nur direkt in einer Grid-Reihe angelegt werden; eine Reihe darf wiederum in einer Spalte liegen (verschachteltes Grid).

Frontend-Markup

<div class="content-grid-row sp-grid sp-grid--gap-m sp-grid--equal-height">
  <div class="sp-grid__row">
    <div class="content-grid-column sp-grid__col sp-grid__col--span-8">…</div>
    <div class="content-grid-column sp-grid__col sp-grid__col--span-4">…</div>
  </div>
</div>

Das Stylesheet bundles/spunktonlinecontaogrid/grid.css wird automatisch eingebunden, sobald eine Grid-Reihe auf der Seite ist.

Anpassen

Was	Wie
Abstände	CSS-Variable `--sp-grid-gap` bzw. die Klassen `sp-grid--gap-{l,m,s,none}` (Standard: 3rem / 1,5rem / 0,75rem / 0)
Breakpoint	eigene Regeln für `.sp-grid__row` und `.sp-grid__col--span-N`
Markup	Templates `content_element/grid_row` und `content_element/grid_column` im Template-Editor überschreiben
Eigenes CSS statt `grid.css`	im Template die Variable `sp_grid_css_file` setzen

Entwicklung

composer install
vendor/bin/phpunit
vendor/bin/ecs check

s-punkt-online / contao-grid-bundle

Package info

Security

Statistics