Contao Erweiterung, die einfache Strukturen für Grid-Systeme bietet:
- Row-Elemente (für Inhalts-Elemente und Formulare)
- Spalten-Elemente (für Inhalts-Elemente und Formulare)
- Selektoren für Spalten-Breiten sowie Offset-, Pull- und Push-Werte
- Konfigurationsarray für Bootstrap und Foundation
https://github.com/menatwork/MultiColumnWizard
- zunächst muss die Erweiterung MultiColumnWizard installiert werden.
- anschließend kann die Erweitunerung DMA SimpleGrid installiert werden.
- Im Contao-Backend befinden sich im Bereich Einstellungen nun neue Einstellungsmöglichkeiten für die Simple Grid-Erweiterung
- Auswahl des zu verwendenden Frameworks oder Grid-System (CSS- und weitere Dateien werden nicht installiert, da hier jeder seine eigenen Ansprüche hat)
- Auswahl der zu verwendenden Selektoren
- Anschließend sollten bei den einzelnen Inhaltselementen Select-Felder zur jeweiligen Auswahl der Grid-Einstellungen zur Verfügung stehen.
- CSS etc. werden durch diese Erweiterung nicht mitgebracht. Jeder kann es auf seine eigene Art und Weise in Contao integrieren
- Kombinierte Grid-Einstellungen werden nicht auf vollständige Zeilen etc. validiert
- Alle Grids können aufgrund ihrer Struktur nicht abgebildet werden. Insbesondere verschachtelte Div-Strukturen (wie sie beispielsweise bei YAML verwendet werden) lassen sich nicht realisieren.
Standardmäßig wird diese Erweiterung mit dem Support für das Contao Grid, das Grid von Bootstrap 3, Bootstrap 4, Foundation 6 und unsemantic sowie dem GoldenRatio Grid von uns ausgeliefert. Über eigene config.php-Dateien können weitere Grid-Systeme unterstützt werden (hier als Beispiel die Konfiguration für das Foundation-Grid):
$GLOBALS['DMA_SIMPLEGRID_CONFIG']['foundation'] = array
(
'name' => 'Foundation',
'config' => array
(
'hasRows' => true,
'hasColumns' => true,
'hasColumnOffset' => true,
'hasColumnOffsetRight' => false,
'hasColumnPush' => true,
'hasColumnPull' => true,
'hasRowClasses' => true,
'hasColumnClasses' => true,
'row-class' => 'row',
'column-class' => 'columns',
'columns-sizes' => array('1','2','3','4','5','6','7','8','9','10','11','12'),
'columns-config' => array
(
'small' => array
(
'name' => 'small',
'column-class' => 'small-%d',
'offset-class' => 'small-offset-%d',
'push-class' => 'small-push-%d',
'pull-class' => 'small-pull-%d'
),
'medium' => array
(
'name' => 'medium',
'column-class' => 'medium-%d',
'offset-class' => 'medium-offset-%d',
'push-class' => 'medium-push-%d',
'pull-class' => 'medium-pull-%d'
),
'large' => array
(
'name' => 'large',
'column-class' => 'large-%d',
'offset-class' => 'large-offset-%d',
'push-class' => 'large-push-%d',
'pull-class' => 'large-pull-%d'
)
),
'additional-classes' => array
(
'row' => array('expanded'),
'columns' => array
(
'end' => 'end',
'small-centered' => 'small-centered',
'medium-centered' => 'medium-centered',
'large-centered' => 'large-centered'
)
)
)
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent