PORTFORMANCE
STYLEGUIDE
Client-First ist ein von Finsweet entwickeltes Set an Richtlinien und Strategien, das dir dabei hilft, Webflow-Webseiten zu erstellen.
Struktur‑Klassen
Definierte und flexible Kernstruktur, die wir auf allen oder den meisten Seiten verwenden können.
Erlätuerung
Struktur-Klassen definieren im Client-First-System den grundlegenden Seitenaufbau deiner Website. Verwende sie für Bereiche, die sich auf jeder oder fast jeder Seite wiederholen – also Header, Footer und Inhaltsabschnitte. Du legst damit fest, wie diese Bereiche strukturiert sind und stellst sicher, dass sie immer einheitlich und automatisch responsive erscheinen.
Überschriften
HTML‑Tags definieren die Standardstile für Überschriften. Verwende Überschriften‑Klassen, wenn der Typografie‑Stil nicht dem Standard‑HTML‑Tag entspricht.
Erlätuerung
Überschriften-Klassen legen im Client-First-System fest, wie deine Überschriften aussehen. Nutze zunächst die standardmäßigen HTML-Tags (<h1> bis <h6>), die automatisch Schriftgröße und Abstände definieren. Erst wenn dein Design andere Größen oder Stile verlangt, verwendest du Klassen wie .heading-style-h1 um die Überschrift genau anzupassen. Änderungen erledigst du dann zentral an der jeweiligen Klasse – und alle Überschriften, die diese Klasse nutzen, übernehmen automatisch das neue Design.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Text‑Klassen
Text‑Klassen, wenn der Typografie‑Stil nicht dem Standard‑HTML‑Tag entspricht.
Erlätuerung
Im Client‑First‑System nutzt du HTML‑Tags (z. B. <p>, <small>, <span>) für die semantische Struktur und ihre Default‑Stile. Weicht dein Design jedoch von diesen Standardeinstellungen ab (z. B. andere Schriftgröße, Zeilenhöhe oder Schriftstärke), greifst du auf Text‑Klassen zurück. Diese utility‑basierten Klassen erlauben dir, zentral definierte Typografie‑Varianten überall im Projekt einzusetzen, ohne jedes Element einzeln zu stylen.
Text Sizes
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
Text Alignments
Farben
Wiederkehrende Text‑ und Hintergrundfarben verwalten.
Erlätuerung
Im Client‑First‑Framework legst du deine Marken‑ bzw. Design‑Farben nicht direkt in jedem Element fest, sondern definierst sie zentral als Utility‑Klassen. So gibt es beispielsweise je eine Klasse für die Primär‑, Sekundär‑ und Akzentfarbe sowohl für Text als auch für den Hintergrund. Dadurch stellst du sicher, dass alle Elemente dieselben Farben nutzen und du bei einer Farbänderung nur an einer Stelle ansetzen musst.
Text Colors
Background Colors
Max widths
Verwende die CSS‑Eigenschaft max-width, um inneren Inhalt auf eine maximale Breite zu begrenzen.
Erlätuerung
Im Client‑First‑Framework unterscheidet man zwischen den Container‑Klassen für das Hauptlayout und den Max‑Width‑Utility‑Klassen für einzelne, verschachtelte Inhalte. Container‑Klassen definieren das generelle Seiten‑Layout mit automatischem Zentrieren und festgelegten max-width‑Werten. Max‑Width‑Klassen wendet man auf innere Elemente an, wenn diese innerhalb des Containers zusätzlich auf eine bestimmte Breite beschränkt werden sollen. So bleibt das Grundlayout flexibel, und du kannst gezielt einzelne Bereiche weiter eingrenzen.
Paddings
Utility‑Spacing‑System – Padding‑Klassen. [padding-richtung] + [padding-größe].
Erlätuerung
Im Client‑First‑Framework ist das Utility‑Spacing‑System ein zentraler Baustein, um Abstände (innerer Abstand = Padding) konsistent und wartbar zu gestalten. Statt für jedes Element individuell Werte zu setzen, verwendest du zwei Utility‑Klassen:
Padding‑Richtung: z. B. padding-top, padding-right, padding-bottom, padding-left.
Padding‑Größe: z. B. padding-small, padding-medium, padding-large.Durch das Stapel‑Prinzip („zuerst Richtung, dann Größe“) setzt Client‑First sicher, dass CSS‑Spezifität nicht durcheinandergerät und du Abstände auf einen Schlag global anpassen kannst.
Direction Classes
Size Classes
Margins
Utility‑Spacing‑System – Margin‑Klassen. [margin‑richtung] + [margin‑größe].
Erlätuerung
Im Client‑First‑Framework sorgt das Utility‑Spacing‑System nicht nur für inneren Abstand (Padding), sondern auch für äußeren Abstand (Margin). Margin‑Klassen definieren, wie weit ein Element von seinen Nachbarn entfernt ist. Durch die Trennung in Richtungs‑ und **Größen‑**Klassen stellst du sicher, dass dein CSS konsistent bleibt und sich Abstände später zentral anpassen lassen – ganz ohne einzelne Overrides.
Direction Classes
Size Classes
Spacers
Ein einheitliches Abstandshalter‑System für das gesamte Projekt.
Erlätuerung
Im Client‑First‑Framework nutzt du Spacers, um bewusst Leerräume zwischen Komponenten einzufügen – ganz ohne direkt mit Margin oder Padding jedes Mal neu zu rechnen. Ein Spacer ist im Grunde ein leeres Div‑Element, dem du zwei Utility‑Klassen zuweist:
Eine Richtungs‑Klasse (horizontal oder vertikal)
Eine Größen‑Klasse (z. B. klein, mittel, groß)
So stellst du sicher, dass alle Abstände überall im Projekt nach demselben System ablaufen und du später nur an einer Stelle – in deiner zentralen Spacer‑Definition – die Werte ändern musst.
Symbole (Icons)
Vereinheitliche Icon‑Größen. icon-height setzt die Höhe von Icons. icon-1x1 setzt sowohl Höhe als auch Breite von Icons.
Erlätuerung
Im Client‑First‑Framework sorgen Icon‑Utility‑Klassen dafür, dass alle Symbole in deinem Projekt immer die gleichen Proportionen haben und sich zentral steuern lassen.Mit der Klasse icon-height legst du nur die Höhe fest; die Breite passt sich automatisch proportional an.Mit icon-1x1 definierst du quadratische Icons, indem du Höhe und Breite gleichzeitig setzt.
Dadurch vermeidest du Inkonsistenzen, wenn du Icons aus verschiedenen Quellen oder in unterschiedlichen Formaten einsetzt – alle folgen einem einheitlichen Größenschema.
Nützliche Utility‑Systeme
Utility‑Klassen, die wir in den meisten unserer Projekte gerne einsetzen, um schneller zu entwickeln.
Erlätuerung
Im Client‑First‑Framework sind Utility‑Systeme Sammlungen von kleinen, spezialisierten Klassen (z. B. für Abstände, Typografie, Farben, Display‑Einstellungen, Schatten, Rahmen), die sich gezielt kombinieren lassen. Anstatt für jedes neue Element individuelle Styles zu schreiben, greifst du auf diese bewährten Sets zurück – das beschleunigt den Aufbau, sorgt für Konsistenz und erleichtert spätere Anpassungen.
Webflow‑Elemente
Native Webflow‑Elemente mit angewendeten Client‑First‑Klassen.
Erlätuerung
Im Client‑First‑Framework nutzt du weiterhin die nativen Webflow‑Elemente (z. B. Section, Container, Div Block, Link Block, Collection List), versiehst sie aber konsequent mit den vordefinierten Client‑First‑Klassen. So bleibt die semantische Struktur erhalten und alle Styling‑Regeln laufen über dein Utility‑ und Struktur‑System. Das sorgt dafür, dass sich Änderungen am Layout oder Theme später zentral anpassen lassen – und nicht verteilt in einzelnen Elementen.
Example of a form component using Folders
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
