WBCE CMS Forum

rudi222

Developer

FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hallo zusammen,
hier möchte ich ein Modul zur flexiblen Layouterstellung vorstellen.

Da ich das "Basteln" von Webseiten nur als zweites Hobby mache, ist das Modul aus der Not geboren. Wie bekomme ich eine ansehnliche Webseite, ohne mich Tagelang mit Grid-Systemen und CSS-Codieren rumzuärgern.
Ich habe meine Vorstellungen ChatGPT mitgeteilt und nach überschaubarer Zeit ist das Modul „FlexLayout“ herausgekommen.

Ich denke, das Modul ist weitgehend selbsterklärend. Hier eine kurze Beschreibung:

Reihen:
Im Modul können Reihen angelegt werden. Jede Reihe kann als Typ „Boxed“ oder „Fullwidth“ gewählt werden. Es kann eine Hintergrundfarbe für die Reihe angelegt werden. Die Abstände oben/unten (in px), die Ränder links/rechts und die Abstände zwischen den Spalten können definiert werden (in px oder %).

Spalten:
In der Reihe können mehrere Spalten angelegt werden. In den Spalten kann ein oder mehrere Abschnitte (Sections) eingefügt werden. Die Abschnitte können per DragnDrop verschoben werden (auch in andere Spalten). Die Breite der Spalten (in px oder %) können definiert werden. Die Rehenfolge der Spalten bei den Responsive-Breakpoints können definiert werden.
Die einfügbaren Abschnitte müssen auf der selben Seite angelegt werden.

Reihen-Typen:
Type „Boxed“ sollte mit jedem Template funktionieren. Type „Fullwidth“ benötigt ein Template mit einem Block. Bei meinen Tests haben diese Templates funktioniert: acourdesz, caminar-wbce, capacity, intensivstation, LLook-01, nexus-responsive, verti-blue, webezeheh und zweinullig.
Ich habe einige Templates (z.B. darkspace) mit wenig Aufwand anpassen können.

Wünsche viel Spass bein testen.

Viele Grüße
Rudi

florian

Administrator

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Die einfügbaren Abschnitte müssen auf der selben Seite angelegt werden.

...und dem Block "nicht zeigen" o.ä. zugeordnet sein, sonst erscheinen sie logischerweise einmal im Flexlayout und einmal stumpf untereinander ;-)
Sollte es im Template keinen solchen Block geben, in der info.php des Templates

$block[99]='nicht zeigen';

ergänzen - das war es schon.

Mit PHP 8.4 kommt es zu folgender Deprecated-Meldung im Errorlog:

2026-02-14T12:14:57+00:00 [Deprecated] /modules/flexlayout/ajax_render.php:[154] from /modules/flexlayout/ajax_render.php:[324] fl_render_section "Creation of dynamic property Frontend::$section_id is deprecated"

Noch eine Frage zum Layout "Fullwidth" - welche Anpassungen sind dafür konkret erforderlich? Bei "Darkspace" hängt der FW-Bereich zu weit links (teilweise nicht sichtbar, rechts Lücke) und bei WBCETik/WBCEZon zu weit rechts.

Last edited by florian (14.02.2026 14:39:24)

---

Nicht ärgern. Nur wundern.

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Beim Template Darkspace muss der Block [2] raus. Dann passt es. Zur zeit geht es nur bei Templates mit einem Block bzw. wenn nur ein Block ausgegeben wird.

Der Layout-Typ Fullwidth spannt sich über die berechnete Bildschirmbreite:
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
Das scheint aber noch nicht bei allen Templates zu funktionieren. Das muss ich nochmal prüfen ...

Bei Templates mit seitlicher Begrenzung wie WBCETik macht der Layout-Typ Fullwidth keinen Sinn bzw war auch nicht dafür gedacht.
Mir ging es darum bei Templates wie capacity die volle Bildschirmbreite nutzen zu können.

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Unten nochmal eine aktualisierte Version. Jetzt funktioniert das Fullwidth ohne Änderung der Blöcke.

Desweiteren kann man die Responsive-Breakpoints für Tablet und Mobile definieren.

Last edited by rudi222 (15.02.2026 08:09:02)

florian

Administrator

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Oha, das hat sich ja ordentlich verändert.
Fullwidth funktioniert jetzt ohne Versprünge und der Deprecated-Hinweis ist auch weg.

Anmerkung - das jetzt bitte nicht als Kritik verstehen: Der Content wird im Frontend ja per Ajax reingeladen.
Mit geblocktem JavaScript sieht man also nix.
Auch in Punkto SEO sowie Accessibility könnte das möglicherweise von Nachteil sein.

Last edited by florian (15.02.2026 09:25:02)

---

Nicht ärgern. Nur wundern.

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Danke für die Anmerkungen. Der Funktionsumfang ist für mich erstmal Ausreichend. Dann steht jetzt das Serverseitige rendern ohne ajax an.

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hier nochmal ein Update:

Für "Fullwidth" getestete Templates: Acourdesz, capacity, distinctive, fg-grey, intensivstation, King Content, LLook-01, nexus responsive, solid-state, Verti-Blue, WeBeCeEh (eingeschränkt), zweinullig.

Changelog:

1.6.2.2 - 17.02.2026
- Breakpoint inputs fixed
- Tablet/Mobile side padding fixed (SSR)
- Stable baseline

1.6.2.1
- SSR-first (Content ohne JS sichtbar)
- Ajax nur noch Fallback
- Kein Fullwidth-Portal
- Templates mit Sidebar offiziell “nicht supported”
- Frontend/Backend stabil
- Accordion / Module funktionieren

FlexLayout 1.6.2.2 – Template-Vorgaben

FlexLayout ist ein Layout-Modul, das eigene Rows/Columns rendert (boxed/fullwidth) und andere WBCE-Sections darin ausgibt. Damit das zuverlässig funktioniert, müssen Templates ein paar Bedingungen erfüllen.

Unterstützter Template-Typ

Unterstützt: Templates mit einem Content-Block (Block 1).
Nicht unterstützt: Templates mit fester Seitenspalte (Block 2), wenn diese im Layout mitläuft.
Wenn FlexLayout genutzt wird, muss die Sidebar im Template entfernt/abgeschaltet werden.

Pflicht: Ausgabe der Inhalte
Das Template muss mindestens Block 1 ausgeben, klassisch:

```php
<?php echo page_content(1); ?>
```

Weitere Blöcke (z.B. Headerbilder Block 3) sind ok, solange sie nicht das Content-Layout seitlich verschieben oder einklemmen.

## Layout-Container: was erlaubt ist

Der Container, in dem `page_content(1)` liegt, darf die Breite normal begrenzen (z.B. `max-width` für boxed Inhalte). FlexLayout macht fullwidth selbst.

✅ ok:

* `max-width: ...`
* `margin: 0 auto`
* normale `padding-left/right` für boxed Layout

❌ nicht ok (typische Fullwidth-Killer):

* `overflow-x: hidden/auto/scroll` auf `html`, `body` oder dem Haupt-Wrapper
* `transform` (auch `transform: translateZ(0)`) auf einem Parent-Container von `page_content(1)`
* `position: relative` + negative Offsets / ungewöhnliche `left/right` Konstrukte, die den Content verschieben
* feste Grid-Layouts, die Block 1 und Block 2 zusammen als “Gesamtbreite” behandeln

## Fullwidth-Vorgabe

Fullwidth funktioniert zuverlässig nur, wenn der Content nicht “geclippt” oder in einem transformierten Parent steckt.

Wichtig:

* `body` sollte keinen seitlichen Margin haben (`body { margin:0; }`)
* horizontales Clipping muss aus sein (kein `overflow-x:hidden` am Body/Wrapper)

Wenn ein Template zwingend `overflow-x:hidden` braucht (wegen eigener Effekte), ist Fullwidth nicht garantiert.

CSS-Konflikte vermeiden

Templates dürfen FlexLayout-Elemente nicht global überschreiben. Besonders kritisch:

* `.fl-row-inner` darf nicht auf `display:block`/`display:grid` gesetzt werden
* `.fl-col` darf nicht global `width:100%` oder `float:left` bekommen

Wenn das Template sehr “aggressives” CSS hat (z.B. `div { width:100% }` oder `.row > div { float:left }`), muss es angepasst werden.

Empfehlung: “FlexLayout-kompatibler” Template-Modus

Wenn du ein Template “kompatibel” machen willst:

1. Sidebar/Block2 entfernen oder komplett deaktivieren
2. `overflow-x` nicht blockieren
3. keinen `transform` auf Wrapping-Containern um `page_content(1)`
4. globale Layout-Regeln nicht auf `.fl-*` anwenden

---

Kurzfassung für Tester

* FlexLayout braucht 1-Spalten-Templates (ohne Sidebar).
* Fullwidth geht nur ohne `overflow-x:hidden`/`transform` um den Content.
* Wenn Spalten untereinander landen: Template-CSS überschreibt FlexLayout.

---

Slugger

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Weil ich das gerade am testen bin.

FlexLayout 1.6.2.2 — PHP 8.5 Bugfix
ajax_render.php · Stand: 23. März 2026

Modul

FlexLayout — Modul zur flexiblen Layout-Gestaltung
Autor: rudi222
Forum: FlexLayout Entwicklungs-Thread

Fehlermeldung (Florian, 14.02.2026)

[Deprecated] /modules/flexlayout/ajax_render.php:[154]
from /modules/flexlayout/ajax_render.php:[324]
fl_render_section
"Creation of dynamic property Frontend::$section_id is deprecated"

Ursache

PHP 8.2+ deprecates das dynamische Setzen von Properties auf Klassen die diese nicht deklarieren.
In ajax_render.php wurde $GLOBALS['wb']->section_id direkt gesetzt ohne vorher zu prüfen ob die Property existiert.

render_ssr.inc.php hatte denselben Fix bereits korrekt mit property_exists() — ajax_render.php war nicht konsistent.

Fix — ajax_render.php

// vorher
if (isset($GLOBALS['wb']) && is_object($GLOBALS['wb'])) {
    $GLOBALS['wb']->section_id = $sid;
}

// nachher
if (isset($GLOBALS['wb']) && is_object($GLOBALS['wb']) && property_exists($GLOBALS['wb'], 'section_id')) {
    $GLOBALS['wb']->section_id = $sid;
}

Ergebnis

"Great news. No errors reported" — kein Eintrag im Errorlog nach dem Fix.
Getestet mit 2-Spalten-Layout, Boxed-Modus, Template WBCEZon.

Umgebung

• FlexLayout Version: 1.6.2.2

• WBCE: 1.6.5

• PHP: 8.5.2

Last edited by Slugger (23.03.2026 23:09:59)

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.6.5 • BE: 2.1.0 • PHP: 8.x * Alle • BE: Argos
Status Projekt 1-4:  OK

Slugger

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

FlexLayout — Feedback & Entwicklungsvorschläge
Konstruktives Feedback · März 2026

Hallo rudi222,

zunächst ein großes Dankeschön für FlexLayout!
Eine sehr gute Idee, ein Layout-Modul das ohne Bootstrap auskommt, responsive ist und
trotzdem keine Template-Änderung erfordert.
Wir haben es ausgiebig getestet und möchten dir ein paar
konstruktive Gedanken mitgeben, damit chatGPT das noch einmal vergleichen kann.
Vielleicht kommt er zum selben Ergebnis.

Was bereits sehr gut funktioniert

• SSR-First Ansatz — Inhalte ohne JavaScript sichtbar ✅

• Drag & Drop im Backend — intuitiv bedienbar ✅

• Boxed und Fullwidth Reihen — flexibel einsetzbar ✅

• Responsive Breakpoints konfigurierbar ✅

• Kein Bootstrap nötig — läuft mit jedem Template ✅

Was uns also Claude und mir aufgefallen ist

1. Inline-CSS ist sehr komplex

Der aktuelle Output erzeugt sehr lange Inline-Styles mit verschachtelten CSS Custom Properties:

--fl-col-w:calc((100% - (1 * var(--fl-gap-active, var(--fl-gap, var(--fl-gap-default))))) * 50 / 100)

Das funktioniert — ist aber schwer lesbar, schwer debuggbar und
gibt Designern wenig Angriffsfläche für eigene Anpassungen.

2. CSS-Klassen als Gestaltungshooks fehlen

Das Modul gibt feste Klassen aus (fl-row, fl-col, fl-embedded usw.)
aber es fehlen optionale Modifier-Klassen die der Redakteur im Backend wählen kann —
z.B. für Kachel-Design, Hero-Bereich oder Info-Box.

Entwicklungsvorschläge

Vorschlag 1 — Inline-CSS vereinfachen

Spaltenbreiten als direkte CSS-Werte statt verschachtelter Custom Properties:

/* einfacher, klarer, wartbarer */
.fl-col { width: 50%; }

Vorschlag 2 — Modifier-Klassen im Backend wählbar machen

Optionales Klassen-Feld je Reihe und Spalte im Backend:

• Reihe: z.B. fl-row--highlight, fl-row--hero, fl-row--card

• Spalte: z.B. fl-col--card, fl-col--center

Designer steuert dann das Aussehen zentral per CSS — Redakteur wählt nur die Klasse.
Das entspricht exakt dem WBCE-Prinzip: Inhalt und Design trennen.

Vorschlag 3 — frontend.css ausbauen

Sinnvolle Basis-Styles mitliefern damit das Modul "out of the box" schön aussieht:

/* Beispiel Basis-Styles */
.fl-col { box-sizing: border-box; }
.fl-row--highlight { background: #f0f4f8; padding: 2rem 0; }
.fl-col--card { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

Vorschlag 4 — Dokumentation der CSS-Klassen

Eine kurze Übersicht welche Klassen das Modul ausgibt und
wie Designer sie nutzen können — das macht FlexLayout
für Template-Bauer und Agenturen viel attraktiver.

Mein Plan

Ich habe das Modul gerade als Testlauf in einem aktuellen Projekt und arbeite die Vorschläge schrittweise durch.

Danke für deine Arbeit.

März 2026

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.6.5 • BE: 2.1.0 • PHP: 8.x * Alle • BE: Argos
Status Projekt 1-4:  OK

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hallo Slugger,

herzlichen Dank für Deinen Beitrag und das Feedback.

Leider bin ich in den letzten Wochen aus Zeitgründen nicht viel weiter gekommen.
Punkt 2: Die CSS-Klassen im Backend sind aber aktuell schon umgesetzt. Werde es zeitnah hier einstellen.

Danke und Gruß
Rudi

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hier die aktuelle Version mit der Möglichkeit CSS-Klassen im Backend einzugeben.

VG Rudi

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hallo Zusammen,

für die Zukunft dieses Moduls habe ich die angedachten Spezifikationen festgehalten (anbei als PDF) und möchte sie hier zur Diskussion stellen:

# FlexLayout – Planung Phase 1 (Diskussionsentwurf)

Ich möchte die nächste Entwicklungsstufe von FlexLayout planen und würde dazu gerne Meinungen und Ideen sammeln.

Aktuell befindet sich das Modul noch in einer frühen Phase. Deshalb wäre jetzt noch ein guter Zeitpunkt, grundlegende Architekturentscheidungen sauber zu treffen, bevor sich technische Altlasten festsetzen.

Der Fokus von Phase 1 liegt bewusst NICHT auf einem kompletten Page Builder oder Drag & Drop, sondern zunächst auf einer Modernisierung der CSS- und Layout-Architektur.

---

# Ausgangslage

Das aktuelle System arbeitet intern noch stark mit:

* komplexen Inline-CSS-Variablen
* verschachtelten `calc()`-Berechnungen
* dynamisch erzeugten CSS-Ausdrücken
* vielen einzelnen WYSIWYG-Abschnitten

Das funktioniert grundsätzlich, wird aber langfristig:

* schwer wartbar
* schwer debugbar
* unnötig komplex
* für Designer schwer nachvollziehbar

Ziel ist deshalb eine deutlich klarere und modernere Architektur.

---

# Ziele von Phase 1

## Technische Ziele

* modernes, wartbares CSS-System
* weniger Inline-CSS
* saubere Klassenstruktur
* verständliche HTML-Ausgabe
* einfachere Debugbarkeit
* besseres Responsive-System
* langfristig stabile Architektur

---

## Nicht-Ziele

Folgende Themen gehören ausdrücklich NICHT zu Phase 1:

* kompletter Page Builder
* Drag & Drop
* neue Datenbankarchitektur
* eigene Contentstruktur
* verschachtelte Modulsysteme
* Elementor-/Gutenberg-Klon

Diese Themen können später diskutiert werden, stehen aber aktuell nicht im Fokus.

---

# Geplante Grundstruktur

Beispielhafte Zielstruktur:

```html
<div class="fl">
    <div class="fl-row">
        <div class="fl-col fl-md-6"></div>
        <div class="fl-col fl-md-6"></div>
    </div>
</div>
```

Die Layoutlogik soll hauptsächlich über Klassen erfolgen und nicht mehr über komplexe Inline-CSS-Ausdrücke.

---

# Geplantes Klassensystem

## Basisobjekte

```css
.fl
.fl-row
.fl-col
```

---

## Grid-System

Geplant ist ein klassisches 12-Spalten-System.

Beispiele:

```css
.fl-12
.fl-6
.fl-4
```

Responsive Varianten:

```css
.fl-sm-12
.fl-md-6
.fl-lg-4
```

---

# Breakpoint-Vorschlag

| Kürzel | Bereich |
| ------ | ------- |
| sm     | ≥576px  |
| md     | ≥768px  |
| lg     | ≥992px  |
| xl     | ≥1200px |

---

# Modernes Gap-System

Statt komplizierter Margin-/Calc-Konstruktionen soll modernes CSS-Gap verwendet werden.

Beispiele:

```css
.fl-gap-none
.fl-gap-xs
.fl-gap-s
.fl-gap-m
.fl-gap-l
.fl-gap-xl
```

---

# Modifier-Klassen

Zusätzliche Layoutsteuerung über Modifier-Klassen.

Beispiele:

```css
.fl-justify-center
.fl-justify-between
.fl-align-center
.fl-wrap
.fl-nowrap
```

---

# Inline-CSS deutlich reduzieren

Die aktuelle starke Nutzung von Inline-CSS soll massiv reduziert werden.

Über Klassen gelöst werden sollen zukünftig:

* Breiten
* Responsive Verhalten
* Gaps
* Alignment
* Standardabstände

Inline-CSS nur noch für:

* Sonderfälle
* freie Einzelwerte
* benutzerdefinierte Spezialwerte

---

# PHP soll keine CSS-Mathematik mehr erzeugen

Aktuell entstehen intern teilweise komplexe CSS-Berechnungen direkt in PHP.

Langfristig soll PHP hauptsächlich nur noch Klassen erzeugen.

Also eher:

```php
$classes[] = 'fl-md-6';
```

statt:

```php
calc((100% - ...
```

Die eigentliche Layoutlogik soll im CSS liegen.

---

# HTML-Ausgabe vereinfachen

Ziel ist eine möglichst saubere und verständliche DOM-Struktur.

Also eher:

```html
<div class="fl-row">
    <div class="fl-col">
```

und möglichst wenig unnötige Wrapper.

---

# Keine dauerhafte Legacy-Architektur

Da FlexLayout aktuell noch keine große installierte Basis besitzt, soll bewusst keine dauerhafte Doppelarchitektur aufgebaut werden.

Stattdessen:

* saubere neue Architektur
* kontrollierbare Migration bestehender Projekte
* keine jahrelange Mitnahme alter CSS-Logik

---

# Technische Basis

Für Phase 1 soll weiterhin Flexbox verwendet werden.

CSS Grid wäre langfristig interessant, würde aber den Umbau deutlich vergrößern.

Ziel von Phase 1 ist zunächst Stabilisierung und Vereinfachung der bestehenden Architektur.

---

# Wichtiger Punkt: Backend / UX

Parallel dazu wurde diskutiert, wie das Modul langfristig besser nutzbar werden könnte.

Aktuell benötigt jede einzelne Spalte einen eigenen WYSIWYG-Abschnitt, was bei größeren Layouts schnell unübersichtlich wird.

Eine mögliche spätere Richtung wäre deshalb:

* FlexLayout als intelligenter Layout-Manager
* bessere Gruppierung von Sections
* Bearbeitung direkt innerhalb der Layoutstruktur
* weniger sichtbares Section-Chaos

Wichtig:
Das ist aktuell noch Zukunftsmusik und ausdrücklich NICHT Bestandteil von Phase 1.

---

# Ziel der Diskussion

Mich interessiert insbesondere:

* Einschätzung zur geplanten CSS-Architektur
* sinnvolle Klassennamen
* Responsive-Konzept
* Grid-/Gap-System
* mögliche Problemstellen
* Ideen zur langfristigen Wartbarkeit
* Erfahrungen aus ähnlichen Projekten

Kritik und Gegenargumente ausdrücklich willkommen.

florian

Administrator

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Guter Ansatz.
- Bei CSS(grid) ggf. nicht das Rad neu erfinden, sondern auf etwas Schlankes, Vorhandenes aufbauen (https://github.com/iolla-net/Fitrgrid, https://pure-css.github.io/ o.ä.)
- Sinnvolle Klassennamen: fl könnte ggf. schon anderweitig benutzt sein, besser --mod-flexlayout-...
- Backend: Zugriff auf Abschnitte seitenübergreifend (vgl. Sectionpicker-Modul), Auswahl mit select2, Metadaten (Seitentitel/Abschnittsname) im Select

Last edited by florian (15.05.2026 14:43:07)

---

Nicht ärgern. Nur wundern.

rudi222

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hi zusammen,

nach einigem Austausch mit Chat-GPT und Rückfragen bei Claude habe ich beschlossen das Project FlexLayout erstmal ruhen zu lassen.

Ich habe beschlossen die einfache Umsetzung eines flexiblen Layouts wieder WBCE-konformer auf ein Section-Modul umzustellen. Das beendet dann auch das Secions-Chaos bei FlexLayout.

Für das neue Modul "FlexSection" lege ich einen neuen Beitrag an.

Danke und Gruß
Rudi

Last edited by rudi222 (18.05.2026 11:40:39)