Ein simples,
responsives
Gridsystem.

themeless verfügt über ein responsives Grid-System. Per CSS-Definitionen können Container in Spalten eingeteilt werden.

Dabei muss die CSS-Klasse "grid" immer vorweg gestellt werden. Danach werden die Klassen für verschiedene Viewports definiert. Im folgenden Beispiel, werden auf dem Desktop 4 Spalten, dem Tablet 2 Spalten und dem Smartphone nur eine Spalte dargestellt:

So kannst du das Grid anwenden

Verändere die Größe deines Browsers, um die Funktion des Grid zu sehen.

<div class="grid grid4Col grid2ColTablet grid1ColSmartphone">
	<div class="exempleBox">Box Nummer 1</div>
	<div class="exempleBox">Box Nummer 2</div>
	<div class="exempleBox">Box Nummer 3</div>
	<div class="exempleBox">Box Nummer 4</div>
</div>
Box Nummer 1
Box Nummer 2
Box Nummer 3
Box Nummer 4

So kannst du die Grid Erweiterung nutzen

Die Grid-Erweiterung macht die Grid-Verwaltung einfach und übersichtlich

  1. Lade die Contao-Erweiterung Custom Elements von Rocksolid herunter
  2. Gehe auf GitHub und lade die aktuelle Version von themeless herunter.
  3. Navigiere in den Ordner /extensions/customElements/ - dort findest du (unter anderem) die Dateien: rsce_themelessGrid.html5, rsce_themelessGridEnd.html5, rsce_themelessGridEnd_config.php, rsce_themelessGrid_config.php
  4. Diese Dateien musst du nun in deiner Contao Instanz in /templates laden. Am einfachst funktioniert dies über ein FTP-Client wie FileZilla
  5. Nun kannst du den Elementtypen GRID-Wrapper [ANFANG] und GRID-Wrapper [ENDE] auswählen.

Alle Standard CSS-Grid-Klassen

grid2Col bis grid6Col Gleichmäßig verteilte Spalten auf allen Geräten
grid2ColTablet bis grid6ColTablet Gleichmäßig verteilte Spalten auf dem Tablet*
grid2ColSmartphone bis grid6ColSmartphone Gleichmäßig verteilte Spalten auf dem Smartphone*
grid-66-33 / grid-66-33-Tablet
grid-66-33-Smartphone		 Zwei Spalten 66,6 % und 33,3 %
grid-33-66 / grid-33-66-Tablet
grid-33-66-Smartphone		 Zwei Spalten 33,3 % und 66,6 %

*abhängig vom Viewport und anpassbar

NEU

Das Grid-System lässt sich nun auch über ein Custom Element anlegen. Dafür:

  1. Custom Elements von Rocksolid über den Contao Manager installieren
  2. Vorlage herunterladen aus GitHub herunterladen und in das Verzeichnis /template deiner Contao Instanz legen