Download the PHP package tdoescher/flex-bundle without Composer
On this page you can find all versions of the php package tdoescher/flex-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package flex-bundle
Flexbox-/Grid-Layout System (kompatibel mit Bootstrap)
[!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
| Feld | Beschreibung |
|---|---|
| Ausrichtung horizontal | Setzt justify-content-* auf dem Container (start, end, center, around, between, evenly) |
| Ausrichtung vertikal | Setzt align-items-* auf dem Container (start, end, center, baseline, stretch) |
| Spaltenabstand | Setzt gx-* (horizontal, Bootstrap g-0 bis g-5) |
| Zeilenabstand | Setzt gy-* (vertikal, Bootstrap g-0 bis g-5) |
| Container Klassen | Beliebige zusätzliche CSS-Klassen für den Container-DIV |
Spalten-Optionen
| Feld | Beschreibung |
|---|---|
| Spalten Klassen | Eigene CSS-Klassen je Spalte, Syntax identisch zu den Breakpoint-Feldern: Zellen durch : getrennt, mehrere Klassen pro Zelle durch , getrennt |
| Wiederholen | Wiederholt das Segmentierungsmuster, wenn mehr Kindelemente vorhanden sind als Zellen definiert wurden |
Zellen-Optionen (CSS-Hilfsklassen)
Folgende CSS-Klassen können über das Feld Spalten Klassen auf einzelne Zellen angewendet werden:
Horizontale Ausrichtung (justify-self)
| Klasse | Beschreibung |
|---|---|
justify-self-start |
Richtet die Zelle horizontal am Anfang aus |
justify-self-end |
Richtet die Zelle horizontal am Ende aus |
justify-self-center |
Richtet die Zelle horizontal mittig aus |
justify-self-around |
Horizontale Ausrichtung: space-around |
justify-self-between |
Horizontale Ausrichtung: space-between |
justify-self-evenly |
Horizontale Ausrichtung: space-evenly |
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)
| Klasse | Beschreibung |
|---|---|
align-self-auto |
Setzt die vertikale Ausrichtung zurück |
align-self-start |
Richtet die Zelle vertikal am Anfang aus |
align-self-end |
Richtet die Zelle vertikal am Ende aus |
align-self-center |
Richtet die Zelle vertikal mittig aus |
align-self-baseline |
Richtet die Zelle an der Textbasislinie aus |
align-self-stretch |
Dehnt die Zelle auf die volle Höhe aus |
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.
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.
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.
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.
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.
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.
