README

Note

In Version 3.2 wurden die alten Legacy-Elemente entfernt.

Dieses Bundle erweitert Contao um Content-Elemente zum Erzeugen von Flexbox Layouts auf Basis von Bootstrap-Klassen Bootstrap 5. Durch ein öffnendes Element wird ein Layout gestartet und die Spalten konfiguriert. Alle Content-Elemente innerhalb des Layouts werden dann in ein DIV verpackt und mit den entsprechenden CSS-Klassen ausgegeben.

Im Seitenlayout muss das JavaScript-Template js_flex aktiviert werden (dient nur dazu das CSS-Framework zu laden, beinhaltet kein JavaScript), alternativ kann das Bootstrap Framework geladen werden.

Framework-Modus

Über das Feld Framework wird gesteuert, welche CSS-Klassen generiert werden:

• 0 – ohne Framework: Eigene .cell-Klassen (cell, cell-1, cell-2, …). Kein Bootstrap notwendig.
• 1 – Flexbox (Bootstrap): Bootstrap-Klassen wie .col-*, .offset-*. Dokumentiert im Abschnitt „Flex-Layout".
• 2 – Grid: Bootstrap-Grid-Klassen wie .col-*, .row-*. Dokumentiert im Abschnitt „Grid-Layout".

Container-Optionen

Spalten-Optionen

Zellen-Optionen (CSS-Hilfsklassen)

Folgende CSS-Klassen können über das Feld Spalten Klassen auf einzelne Zellen angewendet werden:

Horizontale Ausrichtung (justify-self)

Alle Klassen sind auch mit Breakpoint-Suffix verfügbar: justify-self-sm-*, justify-self-md-*, justify-self-lg-*, justify-self-xl-*, justify-self-xxl-*.

Vertikale Ausrichtung (align-self)

Alle Klassen sind auch mit Breakpoint-Suffix verfügbar: align-self-sm-*, align-self-md-*, align-self-lg-*, align-self-xl-*, align-self-xxl-*.

Dokumentation Flex-Layout

1. Stelle: Sichtbarkeit (optional)

• h, hide, hidden: Blendet eine Zelle aus.
• s, show: Blendet die Zelle ein.

 XL: 4:4:4:h 		letzte Zelle wird ausgeblendet
XXL: 3:3:3:3:s,3 	letzte Zelle wird wieder eingeblendet

2. Stelle: Breite

• 1 - 12: Anzahl der Spalten über die sich die Zelle erstreckt.
• a, auto: Breite der Zelle richtet sich nach dessen Inhalt.
• n, none: ohne Breitenangabe, alle Zellen in einer Zeile sind gleich breit.

3. Stelle: Versatz (optional)

• 0 - 12: Versatz vor der Zelle über Anzahl der 12 Spalten.

MD: 8,2		alle Zellen werden mittig zwei Drittel der Breite angezeigt
XL: 6		alle Zellen werden nebeneinander angezeigt

4. Stelle: Position bzw. Order (optional)

• f, first: Positioniert die Zelle an den Anfang.
• l, last: Positioniert die Zelle an das Ende.
• 1 - 12: Positioniert die Zelle an die angegebene Position.

MD: 6,,1:6,,2:6,,4:6,,3		die dritte und vierte Zelle werden vertauscht
XL: 6,,l:6,,f			erste und zweite Zelle werden vertauscht

Dokumentation Grid-Layout

1. Stelle: Sichtbarkeit (optional)

• h, hide, hidden: Blendet eine Zelle aus.
• s, show: Blendet die Zelle ein.

2. Stelle: Spalte $START / $BREITE

• $START 1-12: Position von links in der die Zelle beginnt. (optional)
• $START a: Position zurücksetzen. (optional)
• $BREITE 1-12: Anzahl der Spalten über die sich die Zelle erstreckt.

Beide Angaben werden durch ein / getrennt:	grid-column: $START / span $BREITE

3. Stelle: Zeile $START / $HÖHE

• $START 1-12: Position von oben in der die Zelle beginnt. (optional)
• $START a: Position zurücksetzen. (optional)
• $HÖHE 1-12: Anzahl der Zeilen über die sich die Zelle erstreckt.

Beide Angaben werden durch ein / getrennt:	grid-row: $START / span $HÖHE

4. Stelle: Position bzw. Order (optional)

• f, first: Positioniert die Zelle an den Anfang.
• l, last: Positioniert die Zelle an das Ende.
• 1 - 12: Positioniert die Zelle an die angegebene Position.

Breite der Spalten: