Webflow Framework

Architektur-Prinzipien

  • Standardisierte Layout-Logik: Keine Einzellösungen im Kernsystem. Jede Sektion nutzt die selben wenigen Kernklassen, wodurch jedes Layout nach einem einzigen, vorhersehbaren Regelwerk konstruiert werden kann.
  • Visuelle Konsistenz: Typografie, Abstände und responsives Verhalten sind fest im System verankert. Jedes Element ist von Haus aus responsiv, was Layout-Brüche auf der gesamten Website garantiert ausschließt.
  • Kontextunabhängige Modularität: Jede Komponente kann in jeder Sektion auf jeder Seite platziert werden. Sie passt sich automatisch an und funktioniert auf jeder Bildschirmgröße perfekt.
  • Umgeht das komplizierte Styling Panel: Elemente können mit vordefinierten Varianten aus einer Dropdown-Liste individualisiert werden.
  • Klare, logische Benennung: Ein radikal minimiertes Klassen-System mit Namen, die Sinn machen. Keine kryptischen Akronyme oder komplizierten Konventionen.
  • Umfassende Asset-Bibliothek: Das alltägliche Bauen von Seiten wird auf einen schnellen Drag-and-Drop-Prozess reduziert.
  • Rücksichtslose Simplizität: Keine komplizierten Workarounds oder unausgereiften Webflow-Spielereien. Nur bewährte Lösungen, die zuverlässige Funktionalität garantieren.
  • Gekapselter Custom Code: Individuelles JavaScript ist strikt an das spezifische Modul gebunden, das es steuert.
  • Keine Spaghetti-Interaktionen: Alle Animations-Trigger sind explizit mit den Modulen verknüpft, zu denen sie gehören. Sie können Elemente verschieben, duplizieren oder löschen, ohne ein Netz aus versteckten Interaktionsabhängigkeiten zu zerstören.

Entdecken Sie das Stylekit weiter unten, oder:

Kern-Layout-Logik

Strikte strukturelle Hierarchie. Immer exakt in dieser Reihenfolge verschachteln:

  1. SECTION (Obligatorisch): Definiert die horizontale Sektion und kann mit Farben (FILL-Element) oder Hintergrundgrafiken (unter IMAGE FRAMES und IMAGE FITS) gefüllt werden. Varianten für Minimalhöhe (Fullscreen), etc.
  2. CONTAINER (Obligatorisch): Definiert die maximale Breite und das Padding (den Innenabstand) rund um den Inhalt. Varianten für maximale Breite und verschiedene Padding-Optionen.
  3. GRID (Optional): Standard 12-Spalten-Raster, wenn Sie Inhalte innerhalb eines Grids anordnen möchten. Varianten für die Ausrichtung der Kind-Elemente.
  4. BLOCK (Optional): Diese Klasse verteilt die Kind-Elemente vertikal nach oben, in die Mitte oder nach unten. (Ausführung: Platzieren Sie immer exakt 3 Divs mit der CONTENT-Klasse innerhalb eines BLOCKs, um Ihre Inhalte oben, mittig oder unten auszurichten). Blöcke haben auch eine Variante mit Padding (um einen Rahmen zu erzeugen) und verschiedene Padding-Größen.
  5. CONTENT (Obligatorisch): Spannt sich über das gesamte Elternelement und umschließt die eigentlichen Inhaltselemente (Text, Bilder, etc.). Standardmäßig linksbündig ausgerichtet. Varianten für zentrierte oder rechtsbündige Ausrichtung.

Hinweis: Wenn Sie Ihre Inhaltselemente einfach nur über den gesamten Container spannen und horizontal ausrichten wollen, benötigen Sie kein GRID, BLOCK oder CONTENT.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Lorem ipsum dolor sit amet

Heading

Lorem ipsum dolor sit amet

BAR

Eine Bar richtet zwei Child-Elemente horizontal aus (eins ganz links, eins ganz rechts). Kann einen Rahmen (Padding) in verschiedenen Größen haben.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

ARRAY HORIZONTAL

Listet Inhalte horizontal mit einem wählbaren Abstand (Gap) auf. Bricht automatisch in eine neue Zeile um, wenn die Maximalbreite des Elternelements erreicht ist.

ARRAY VERTICAL

Listet Inhalte vertikal mit einem wählbaren Abstand auf.

CLIP

Fixiert zwei Elemente nebeneinander mit einem wählbaren Abstand. Kann einen Rahmen haben. Bricht nicht um!

This is some text inside of a div block.
This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Cards

Standardisierte Karten-Konstruktionen, die die BLOCK- und CONTENT-Logik nutzen.

Inhalts-Elemente

Innerhalb von CONTENT platzieren

SPACER

Um auf Utility-Klassen oder Combo-Klassen für jedes Element zu verzichten (was die Modularität reduzieren und das System verkomplizieren würde), nutzt FLO dedizierte Spacer. Platzieren Sie diese intuitiven Blöcke einfach zwischen Elementen, um Abstände zu definieren. Varianten für Höhenabstufungen.

FILL

Füllt das Layout-Element, in das es platziert wird, mit einer Hintergrundfarbe aus der globalen Farbpalette. Wird meist verwendet, um eine SECTION oder gerahme BLOCKs, BARs oder CLIPs einzufärben.

Typographie

Hier finden Sie alle Standard-Typografie-Elemente in verschiedenen Größen. Alle Texte kommen in regulären und invertierten (Inverted) Farben für helle und dunkle Hintergründe

Wichtig: Die Klasse HEADING ist unabhängig vom H-Tag. Nutzen Sie jede Größen-Klasse in Kombination mit jedem beliebigen Heading-Level (H1-H6), um eine semantische Hierarchie für SEO aufzubauen, ohne das visuelle Design zu beeinflussen.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

01
01
01
01
01
Eyebrow
Eyebrow
Text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

RICH TEXT / RICH TEXT INV

Enthält das globale Styling für alle Inhaltstypen, die vom nativen Webflow Rich-Text-Element bereitgestellt werden (in dunklen und hellen Versionen).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Caption
Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5a
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Caption
Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript


Input Form

Gestylte native Webflow-Eingabeformulare und Labels, strukturiert über das GRID für einfaches Layouting.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Buttons

Buttons in einer Vielzahl verschiedener Stile.

ICON & ICON BOX

Icons mit und ohne Rahmen. Workflow: Nutzen Sie immer die Webflow SVG-Import-App, um Icons einzufügen. So übernehmen diese automatisch die Palettenfarben und müssen nicht extern umgefärbt werden.

IMAGE FRAME & IMAGE FIT

FLO steuert Bilder über eine Verbund-Architektur (unter anderem, damit Sie Inhalte und Overlays über den Bildern platzieren können). IMAGE FRAME diktiert das Seitenverhältnis und teilweise die Position (z.B. position:absolute für einen Hintergrund) sowie die Maximalbreite. IMAGE FIT füllt den Frame und hat verschiedene Einpassungs-Optionen (Cover, Contain, verschiedene Ausrichtungen). Kommt in einer großen Auswahl an Varianten.

Background Image

Parallax Background Image

CMS Lists

Standard-Komponenten innerhalb einer CMS-Liste. Verbinden Sie diese mit jeder beliebigen CMS-Collection, um Einträge aufzulisten.

CMS Cards

Für Card-Layouts.

CMS Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CMS Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CMS Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CMS Slider

Angetrieben durch Finsweet Attributes (nutzt individuelle, kleingeschriebene Klassen).

CMS Accordion

Basiert auf nativen Webflow-Dropdowns und -Interaktionen.

01

Accordion Heading

Plus
01

Accordion Heading

Plus
01

Accordion Heading

Plus

CMS Contact Info

FLO nutzt die "Contact Info" CMS-Collection für Kontaktinformationen, sodass Sie diese nur einmal für die gesamte Website festlegen müssen.

Kontakt

Ben Löcsei
Grafikdesigner & Webflow Spezialist
ben@digitalpragmatist.de
Webflow Partners IconLinkedIN IconNCF Icon