Webflow vereinfacht

1. FLO standardisiert das Layouting mit der absoluten Mindestanzahl an Klassen, die für jedes denkbare Design erforderlich sind.
2. Ein umfassendes Stylekit enthält alle Standardelemente (wie Typografie, Buttons etc.) und bietet Varianten für Größe, Farbe und Stil. Dabei nutzen wir einfache Konventionen wie alphabetische Größenangaben (XXS–XXL) oder klare Bezeichnungen (z. B. Style 01, Style 02).
3. Variablen für Schriftgrößen, Abstände, Farbpaletten und andere Basiswerte ziehen sich durch das gesamte Framework.

Layouting

Es gibt 6 (+3) Layout-Klassen und 21 Inhalts-Klassen. Diese besitzen Varianten mit einfachen Namen (S, L, XXL etc.). Sie fügen ein Element ein, wählen eine Klasse aus der Liste und fertig.

Beispiele:

• Überschriften: Globale Klasse: Heading. Varianten für Größen: XS bis XXL.
• Buttons: Globale Klasse: Button. Varianten für Stile: Style 01 – Style 05.
• Spacer (Abstände): Globale Klasse: Spacer. Varianten für Größen: XS bis XXL.
• Container: Globale Klasse: Container. Varianten für Breite und Padding: Narrow, Wide, Less Padding, More Padding etc.
• Sektionen: Globale Klasse: Section. Varianten: Fullscreen, Sticky etc.

Keine kontextspezifischen Klassen mehr. Kein „homepage-aboutsection-about section2-v3-padding2-full-background-blue-blue02-sticky“.

Nur Section / Sticky. Wenn Sie einen Hintergrund möchten, fügen Sie ein Fill-Element ein und wählen eine Farbe. Oder ein Bild.

Warum so wenige Klassen?

Es gibt keine unendlichen Möglichkeiten, Elemente in einer Box anzuordnen. Oben links, zentriert, unten rechts, gleichmäßig verteilt... richtig? Warum also sollte jedes Layout einen neuen Satz Klassen benötigen? Tut es nicht.

Hier sind die Klassen, mit denen FLO jedes mögliche Layout erreicht:

1. Layout-Klassen

• Section: Definiert eine Sektion vertikal. Varianten enthalten Mindesthöhen (z. B. Fullscreen) und Padding-Optionen für spezielle Anwendungsfälle.
• Container: Definiert die maximale Breite des Inhalts und fügt seitliches Padding hinzu. Varianten für die maximale Breite (Narrow/Full) und verschiedene Padding-Optionen.
• Grid: Ein 12-Spalten-Raster, um Kind-Elemente anzuordnen und das Verhalten auf Mobilgeräten zu steuern.
• Block: Füllt die volle Höhe des Elternelements aus. Wird genutzt, um Inhalte zu verteilen (Oben, Mitte, Unten) und kann Rahmen verschiedener Größen mit Padding hinzufügen.
• Content Wrapper: Das Div, in das Sie den Inhalt setzen. Richtet den Inhalt aus (Links, Zentriert, Rechts).
• Spacer: Wir verwenden physische Spacer-Divs, weil es am intuitivsten ist. Varianten von XXS bis XXL.

2. Layout-Helfer

• H-Flex / V-Flex: Für Listen von Elementen mit festem Abstand (Icons, Tags), mit automatischem Zeilenumbruch. Varianten für die Gap-Größe.
• Clip: Ähnlich wie ein horizontales Array, bricht aber nie vertikal um. Perfekt für [Icon + Text].
• Bar: Horizontale Leiste, die zwei Inhaltsteile links und rechts anordnet. Schaltet auf Mobilgeräten automatisch auf vertikal um.

Voila. Jedes Layout, das Sie sich vorstellen können – mit nur 9 globalen Klassen.

3. Inhaltselemente

• Typografie: Heading (XXS–XXL), Paragraph (S–XL), Text (S–XL), Block Quote, List, Rich Text. Alle haben Inverted-Varianten für dunkle Hintergründe.
• Buttons: 6 Button-Stile + weitere Link-Typen.
• Hintergründe: Fill-Klasse, Varianten für jede Farbe der Palette. Bildhintergründe mit optionalem Parallax-Effekt.
• Formulare: Inputs, Radios, Checkboxen, Labels – in einem Raster ausgerichtet.
• Icons: Reguläre Icons und „Boxed“-Icons (mit Rahmen). Größen XS bis XL.

4. Medien (Bilder & Video)

• Image Frame: Ein Wrapper, der Overlays ermöglicht. Steuert Seitenverhältnisse, verschiedene Formen oder die Nutzung als Hintergrund.
• Image Fill: Füllt den Image Frame aus. Varianten für verschiedene Passformen (Contain, Cover etc.).
• Video: Als Hintergrund oder innerhalb des Inhalts. Extern gestreamt (kein Performance-Verlust beim Laden). Inklusive Auto-Muting-Logik.
• Image Overlay: Dunkelt Bilder ab, um die Lesbarkeit von Text zu gewährleisten.

Die Praxis: Der Workflow

So erstellen Sie eine neue Sektion:

1. Öffnen Sie das Components Panel.
2. Ziehen Sie eine vorgefertigte Section per Drag-and-drop auf die Canvas.
3. Lösen Sie die Instanz (Unlink).
4. Löschen Sie nicht benötigte Inhalte.
5. Wählen Sie Varianten für Layout- und Inhaltselemente, um den Look anzupassen.
6. Tauschen Sie Bilder und Texte aus.

‍Fertig.

Die Ausnahmen

Einige Module nutzen spezielle Klassen, da das Kernsystem hier kontraproduktiv wäre:

• Navigation: Die Navbar und das mobile Menü benötigen spezifische Styles.
• Custom Code Module: Komplexe interaktive Elemente bringen eigene Klassennamen mit. Dennoch nutzen auch diese die globalen Variablen für Abstände, Farben und Schriftarten, damit alles wie aus einem Guss wirkt.

Diese Website (und jede andere, die ich mit FLO baue) enthält zudem einige spezielle globale und Combo-Klassen für einzigartige Design-Lösungen. Das ist exakt so vorgesehen. Bauen Sie das Fundament mit den Kern-Klassen und erstellen Sie Spezial-Klassen für besondere Anforderungen. Nutzen Sie einfach die verfügbaren Variablen für Größe und Farbe, rühren Sie die Kern-Klassen nicht an, und alles wird perfekt funktionieren.