Contao und CSS Grid

Hallo zusammen,

könnt Ihr einem Contao-Anfänger erklären, wie man in Contao 4 nicht das eigene Contao-Grid, sondern ein "normales" CSS-Grid verwenden kann? Ich hatte mir Module angelegt (Header, Footer, Logo, usw) und diese in einem jeweils 3 Zeilen und Spalten Seitenlayout zugewiesen. Aber das ist ja vermutlich schon der falsche Weg, da die Areas ja über die eigene Grid-Definition kommen sollen und ich es über meine bisherige Herangehensweise zwar hinbekommen habe, das es so aussieht wie es später einmal aussehen soll, aber vermutlich das Contao-eigene Grid verwendet habe, was ich ja aber nicht möchte. Kann mir das jemand grob erklären bzw. Licht ins Thema bringen?

Vielen Dank vorab!


tekki82

Hallo tekki82

Schau dir das hier mal an. --> https://erdmann-freunde.de/produkte/...ngen/euf_grid/

Habe ich mir angeschaut, auch die Videos... Allerdings fehlt mir weiterhin ein bisschen der Einstieg. Kann ich hiermit auch das Seitenlayout als Grid erstellen?

Das heißt du willst, dass die komplette Seite zu ein und demselben Grid gehört? Inklusive Header und Footer? Dann kannst du ja z.B. als Seitenlayout ein einspaltiges ohne Header und Footer auswählen. Dann kannst du innerhalb des gesamten Browserfenster alles per Grid machen.

Meine Seite hat natürlich einen festen Header, der das Logo und das Menü beinhaltet, dann eine Hauptspalte für die verschiedenen Artikel, auf die im Menü verlinkt wird und natürlich auch einen festen Footer (Impressum, Datenschutz usw.). Ich dachte, man müsste das dann so machen... Wie gesagt, mir fehlt da ein bisschen der richtige Einstieg in Kombination mit Contao. Gibt es irgendwo einen Artikel, der das ein wenig beschreibt oder könnt Ihr mir hier ein paar Ansätze liefern? Ich glaube, ich steh auf dem Schlauch!?

Zitat:

---

Zitat von tekki82

Habe ich mir angeschaut, auch die Videos... Allerdings fehlt mir weiterhin ein bisschen der Einstieg. Kann ich hiermit auch das Seitenlayout als Grid erstellen?

---

Hier weiss ich nicht wirklich, worauf du hinauswillst. Was meinst du mit "das Seitenlayout als Grid erstellen"? Du wirst in Contao nicht darum herumkommen, in deinem Theme ein oder mehrere Seitenlayouts zu definieren. Das muss dich aber nicht in deinen Möglichkeiten einschränken. Anstatt das Contao-eigene Grid zu benutzen, kannst du ja beliebige eigene CSS-Dateien in deinem Seitenlayout laden lassen, also auch beliebige Grids. Wobei du dich sicher leichter tun wirst ein Grid zu verwenden, das bereits zu den von Contao normalerweise ausgegebenen Klassen kompatibel ist. Du könntest über eigene Ausgabe-Templates für Module und Inhaltselemente auch die ausgegebenen Klassen an ein vorgegebenes Grid-CSS anpassen. Das kann dann halt bei Major-Updates zu Mehrarbeit führen, weil dann potenziell viele oder alle dieser Ausgabe-Templates geändert werden müssen.

Edit: Du kannst dir ja auch mal die Optimist-Demo installieren, dann kannst du im Backend und Frontend sehen wie CSS-Grid funktionieren kann.

In den generellen CSS Grid Tutorials (ohne Contao-Bezug), die ich mir angesehen habe, wird bereits das Grundlayout der Webseite damit gebaut (Grid Areas z.B. für Header, Inhaltsbereich und Footer) und daher bin ich davon ausgegangen, dass ich in Contao kein Seitenlayout anlegen darf/muss. Das war/ist vermutlich mein gedankliches Problem und daher war der Hinweis, dass ich in Contao nicht drumherum komme ein oder mehrere Seitenlayouts anzulegen, Gold wert. Wenn ich es jetzt richtig verstanden habe: Ich lege weiterhin ein Seitenlayout in Contao an und installiere EuF-Grid, um dann jeweils ein Grid in den jeweiligen Artikeln für meine Bereiche zu nutzen (also pro Bereich in meinem Seitenlayout ein eigenes Grid). Nutze ich rein durch die Benutzung des Seitenlayouts in Contao bereits das Contao-eigene CSS-Grid oder hat das damit gar nichts zu tun?

Zitat:

---

Zitat von tekki82

Nutze ich rein durch die Benutzung des Seitenlayouts in Contao bereits das Contao-eigene CSS-Grid oder hat das damit gar nichts zu tun?

---

Du kannst entweder nur das Grid oder alle von Contao zur Verfügung gestellten CSS- Daten abwählen. Letzteres mache ich zum Beispiel, wenn ich ein Theme selbst entwickle. Dann arbeite ich allerdings auch ohne jegliche andere Grid-Erweiterung oder nutze eine Kombination - Gesamtlayout händisch, Inhaltsgestaltung über eine Erweiterung.
Erweiterungen für Gridsysteme haben in meinen Augen eben den Vorteil, dass sie auch Möglichkeiten mitbringen, dass ein Redakteur Inhalte im Grid platzieren kann.

Hier muss man auch seinen eigenen Weg finden. Etwas hängt es auch von den Kunden/Redakteuren ab, die den Inhalt der Seite mal pflegen sollen. Ich habe viele kleine Kunden, bei denen ich auch die Inhaltspflege übernehme. Dort ist für mich in den allermeisten Fällen ein solche Grid-Erweiterung nicht erforderlich.

Hallo tekki82,

schau dir mal die Dokumentation zu EUF-Grid an:
https://erdmann-freunde.de/dokumenta...ngen/euf-grid/

Und das 2. Video „Änderungen in Version 3”.

Das Contao-Grid kannst du im Seitenlayout aktivieren oder eben auch nicht. Genauso wie das restliche CSS, was Contao mitbringt. Grid ist m.E. per Default sowieso nicht aktiviert. Dann kannst du dein CSS für dein CSS-Grid im Seitenlayout als externe CSS-Datei(en) einbinden und gut ists. Ein Seitenlayout in Contao definiert mindestens einen Ausgabebereich. Den brauchst du auch, weil jedes Modul und jeder Artikel von Contao in irgendeinen Bereich ausgegeben werden muss, sonst bleibt die Seite halt mehr oder weniger leer. Für die Module wird der Ausgabebereich im Seitenlayout festgelegt, für Artikel in den Einstellungen des Artikels (nur interessant, wenn das Artikel-Modul in mehreren Bereichen eingebunden wird).

Anzumerken wäre noch, dass das EuF-Grid nicht über 'Externe Stylesheets' eingebunden wird, sondern unter der Auswahl zur Ladereihenfolge separat aktiviert wird. Das EuF-Grid ist meiner Meinung nach moderner als das von Contao und die Klassennamen orientieren sich m Bootstrap-Grid.

Moin!

Freut mich, dass unsere Grid-Erweiterung so viel Zuspruch bekommt :)

Passenderweise werde ich nächste Woche Freitag ein Webinar zum Thema Grid-Layouts für unsere Contao Themes halten: https://erdmann-freunde.de/wissen/we...en-2020-11-20/

Das Contao Grid Bundle ist der Nachfolger von euf_grid. Vielleicht ist das ja für den Ein oder Anderen interessant. Die Teilnahme ist kostenlos.