MAST Framework Deep Dive in Webflow: Vom Setup zum System

MAST ist nicht einfach „noch ein Webflow-Framework“ – es ist ein komplett anderer Ansatz, wie du Layouts, Komponenten und Utility-Klassen in Webflow strukturierst.
In dieser Folge gehen wir tief rein: Was unterscheidet MAST von Client-First? Warum setzt Matthias MAST inzwischen überall in Kundenprojekten ein und wann lässt er Komponenten bewusst weg? Du bekommst ein klares Bild davon, wie MAST gedacht ist: Less is more, 12-Column-Grid, komponentenbasierte Workflows, aber trotzdem genug Freiheit für Custom Sections.
Wir sprechen außerdem darüber, wie MAST mit Webflow Components, Slots, Build Mode, Variables/Fluid Design, Phosphor Icons und sogar fertigen Lösungen wie Swiper Slider umgeht – inklusive Praxisblick: Was ist wirklich hilfreich, wo wird’s für Anfänger zu komplex, und wie onboardet man Kunden sinnvoll, ohne dass sie die Seite „kaputtklicken“?

MAST Framework:

• Kostenloses Starter-Cloneable: https://try.webflow.com/MAST *

Matthias Cordes online:

• Website: https://www.matthiascordes.com‍
• LinkedIn: https://www.linkedin.com/in/matthiascordes  

* Affiliate Links

MAST Framework in Webflow: Was es besser macht als Client-First

Wenn du schon länger mit Webflow arbeitest, kennst du das Problem: Projekte starten sauber – und enden nach ein paar Monaten mit einem Klassendschungel. Genau hier setzt das MAST Framework an. Es kombiniert bekannte Prinzipien aus klassischen Frameworks (z. B. ein Grid-System) mit einem Webflow-Workflow, der stark auf Struktur, Wiederverwendbarkeit und Komponenten ausgelegt ist.

In diesem Beitrag zeige ich dir, wie MAST gedacht ist, wo es wirklich glänzt und wann du es pragmatisch „nur als Fundament“ nutzt.

Client-First vs. MAST: Der größte Unterschied

Client-First war für viele der Einstieg in strukturierteres Arbeiten in Webflow: verständliche Namen, klare Regeln, weniger Chaos. MAST geht einen Schritt weiter und wird an vielen Stellen kompakter.

Bei Client-First findest du häufiger sehr beschreibende, lange Namen, damit auch Nicht-Entwickler sofort verstehen, was passiert. MAST reduziert das stärker und setzt auf kurze, technisch eindeutige Benennungen. Das ist für Entwickler oft schneller zu lesen und zu bauen – wirkt aber für manche anfänglich ungewohnt.

Wichtig ist: Es ist keine „besser/schlechter“-Frage, sondern eine Frage, ob du kompaktere Utility-Logik und komponentenorientiertes Denken in deinem Projekt willst.

Komponenten: MAST kann alles – aber du musst nicht alles nutzen

MAST kommt mit einem starken Fokus auf Webflow Components. Das wirkt im Styleguide und in den Layout-Beispielen teils so, als würde man komplette Seiten nur noch aus Komponenten + Slots zusammenstecken.

In der Praxis ist der pragmatische Ansatz meistens der beste:

• Wiederkehrende Sektionen wie Navigation, Footer, FAQ, Benefits-Abschnitte sind perfekte Kandidaten für Komponenten.
• Sehr individuelle Bereiche (z. B. Hero-Bühnen, komplexe Hintergrundgrafiken, Storytelling-Sections) baust du oft schneller „klassisch“ im Designer – aber mit MAST-Klassen als saubere Basis.

Der große Vorteil von Komponenten zeigt sich vor allem dann, wenn Kunden später selbst Inhalte erweitern sollen, ohne dabei aus Versehen Layouts zu zerlegen.

Grid-System: Warum es bei größeren Projekten Klassen spart

Viele schrecken beim ersten Blick auf MAST vor dem Grid-System zurück: row, col, Breakpoint-Klassen wie col sm 12 – wirken erstmal nach „zu viel Framework“.

Der Effekt zeigt sich aber langfristig:

• Bei kleinen Sites mit wenigen Seiten kannst du dir schnell eigene Grid-Layout-Klassen bauen.
• Bei großen Projekten (50–200 Seiten, mehrere Entwickler) eskaliert das: Du suchst ständig nach alten Klassen und baust Dinge doppelt.
• Mit MAST kannst du typische Layouts (Text/Bild, 3er Cards, 2-Spalten, etc.) über ein konsistentes System bauen, ohne jedes Mal neue Layout-Klassen zu erfinden.

Wenn du einmal verstanden hast, wie die Spalten über Breakpoints „stacken“, baust du damit extrem zuverlässig.

Variables und Fluid Design: ein Setup, das sich „aus einem Guss“ anfühlt

MAST setzt stark auf Variablen und nutzt an vielen Stellen fluides Verhalten (z. B. Padding, Typografie). Das bedeutet: Abstände und Größen passen sich je nach Viewport automatisch an, statt dass du an jedem Breakpoint manuell nachziehen musst.

Besonders sinnvoll ist das bei:

• Typografie, weil größere Displays oft mehr Lesbarkeit brauchen
• Section-Padding, damit Layouts auf kleinen Screens nicht „aufgeblasen“ wirken
• Containern, damit der Seitenrand sauber skaliert

Wenn du das einmal sauber auf dein Figma-Design gemappt hast, bekommst du ein System, das sich sehr konsistent anfühlt.

Icons und Komponenten-Bausteine

Ein extrem praktischer Punkt im Alltag ist, wie MAST mit Icons umgeht: statt ständig SVGs zu suchen, zu importieren und zu stylen, kannst du bei bestimmten Setups Icons über ihren Namen austauschen (z. B. aus einer Library wie Phosphor).

Dazu kommen fertige moderne Bausteine, die du sonst oft über Custom Code zusammenfrickelst:

• Slider auf Basis von Swiper
• Modals
• Accordions
• SEO-nahe Elemente wie Breadcrumbs (sauber für Accessibility und Indexierung)

Du kannst diese Bausteine nutzen, musst aber nicht. Genau das macht den Ansatz angenehm: Framework als Fundament, nicht als Zwang.

Kunden-Onboarding: Build Mode ja, aber mit Plan

Webflow bewegt sich stärker Richtung Build Mode, damit Teams Inhalte und Seiten auch ohne „Designer-Level“ bearbeiten können. In der Realität ist es aber wichtig, Kunden nicht zu überfordern.

Ein sinnvoller Weg ist:

• Kunden arbeiten im Build Mode
• sie starten von vorgefertigten Layout-Seiten
• sie löschen/tauschen Inhalte, statt neue Systeme zu erfinden

Komponenten geben dabei Sicherheit, aber Slots und Component Properties können schnell unübersichtlich werden, wenn man nicht weiß, was wohin gehört. Hier lohnt sich ein klares Template-Setup, das Kunden wirklich führt.

Fazit: MAST lohnt sich vor allem, wenn du skalieren willst

MAST ist besonders stark, wenn du Websites baust, die wachsen: mehr Seiten, mehr Leute im Projekt, mehr Wiederverwendung, mehr Übergabe an Marketing oder interne Teams.

Wenn du dagegen sehr kreative, hoch individuelle Layouts baust, wirst du MAST eher als Framework-Basis nutzen und Komponenten nur selektiv einsetzen.

Am Ende gilt: Du musst nicht alles übernehmen. Aber du kannst dir aus MAST extrem viele clevere Patterns abschauen – und deine Projekte damit sauberer, schneller und skalierbarer bauen.