Webflow Framework

Architektur-Prinzipien

  • Standardisierte Layout-Logik: Keine zusammengeklebten Einzellösungen. Jede Sektion nutzt die selben wenigen Kernklassen, wodurch jedes Layout nach einem einzigen, vorhersehbaren Regelwerk konstruiert werden kann.
  • Unzerstörbare 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.
  • Zero-Code Anpassungen: Schluss mit dem Kampf gegen CSS-Eigenschaften. Layouts können per Drag-and-Drop neu angeordnet und 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 – nur direkte Logik.
  • Umfassende Asset-Bibliothek: Das alltägliche Bauen von Seiten wird auf einen schnellen Drag-and-Drop-Prozess reduziert.
  • Rücksichtslose Einfachheit: Keine aufgeblähten Workarounds oder unausgereiften Webflow-Spielereien. Nur saubere, bewährte Lösungen, die fehlerfreie und leicht verständliche Funktionalität garantieren.
  • Gekapselter Custom Code: Individuelles JavaScript ist strikt an das spezifische Modul gebunden, das es steuert. Kein Durchsuchen globaler Seiteneinstellungen, kein Zerschießen der Website durch das Löschen eines losen Skripts.
  • Keine Spaghetti-Interaktionen: Alle Animations-Trigger sind explizit mit den Modulen verknüpft, zu denen sie gehören. Element 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 oder BLOCK – nutzen Sie einfach die CONTENT-Klasse, um Ihre Elemente zu umschließen.

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
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 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


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.

Accordion Heading

Plus

Accordion Heading

Plus

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
Designer & Webflow Entwickler
ben@ditalpragatist.de
Webflow Partners IconLinkedIN IconNCF Icon