Grundsätzlicher Aufbau

< wrap class="structure">
  < container>
    < inhalt />
  < /container>

  < container>
    < inhalt />
  < /container>
  [...]
< /wrap>

Nutzung im Inhaltsbereich/ Definition im Wrap-Element

< wrap class="structure structure-###"> [...]

### entspricht dabei der Größe aller enthaltenen Container-Elemente in Rastereinheiten.
Folgende Klassen sind für die Nutzung im Inhaltsbereich anstelle von structure-### vorgesehen.

structure-3: 25% Breite/ 4 Zellen
1
2
3
4
structure-4: 33.33% Breite/ 3 Zellen
1
2
3
structure-6: 50% Breite/ 2 Zellen
1
2
structure-9-3: 65% + 35% Breite/ 2 Zellen
1
2
structure-3-9: 25% + 75% Breite/ 2 Zellen
1
2

Nutzung im Inhaltsbereich/ Definition im Container-Element

< wrap class="structure">
  < container class="box-w-###">
[..]

### entspricht dabei der Größe des entsprechenden Container-Elements in Rastereinheiten.
Folgende Klassen sind für die Nutzung im Inhaltsbereich anstelle von box-w-### vorgesehen.

structure-3: 25% Breite/ 4 Zellen
1
2
3
4
5
6
7
structure-4: 33.33% Breite/ 3 Zellen
1
2
3
4
5
structure-6: 50% Breite/ 2 Zellen
1
2
3
4
5

Nutzung ausserhalb des Inhaltsbereichs

< wrap class="structure structure-###"> [...]

### entspricht dabei der Größe aller enthaltenen Container-Elemente in Rastereinheiten.
Ergänzend zu den oben genannten Klassen sind, nach gleicher Logik, folgende Varianten zur Seitenstrukturierung möglich:

  • structure-9-3: 75% + 25% Breite/ 2 Zellen (Standard-Seitenaufbau)
  • structure-6-3-3: 50% + 25% + 25% Breite/ 2 Zellen (Startseiten-Aufbau)
structure-9-3: 75% + 25% Breite/ 2 Zellen
1
2
structure-6-3-3: 50% + 25% + 25% Breite/ 3 Zellen

Bei diesem Element kann die Spalte #2 oder #3 zusätzlich die Klasse toggle-visibility erhalten, sodass sie zwischen 1140px und 767px ausgeblendet wird.

1
2
3

Die Klasse/ das Element content-debug in allen Beispielen dient lediglich der Visualisierung und muss, bei Verwendung, entfernt werden!
Alle weiteren möglichen Klassen sind aktuell nicht für "jeglichen" Kontext abgestimmt. Entsprechend sind die Umbrüche ggf. nicht optimiert.