brandvm/webflow-style-guide

Webflow Style-Guide: Ein Layout für jede Website

Der Style-Guide ist die erste Seite, die im Prototyp und in Webflow erstellt wird – vor jeder anderen Seite. Er validiert die Variablen, Tag-Stile und Klassen, bevor irgendetwas von ihnen abhängt, und enthält jede Klasse auf einem Element. So kann Webflows Clean up unused styles niemals eine Klasse löschen, die nur das CMS, ein Skript oder eine noch nicht erstellte Seite verwendet.

Sein Layout ist festgelegt. Ein Projekt liefert nur den Inhalt, nie das Layout:

• sg.css ist das eigene Layout der Seite (die Sg-Klassen).
• scripts/gen-style-guide.mjs schreibt die Seite aus dem Webflow-Snapshot, dem CSS und den Mustern des Projekts.
• scripts/check-style-guide.mjs schlägt fehl, wenn eine Klasse auf der Seite fehlt, die Klassen einer Kombination nie zusammen auf einem Element sind oder das Layout abgewichen ist.
• scripts/sections.mjs ist die Abschnittsliste, die beide Skripte gemeinsam nutzen.
• Jedes Typografie-Muster trägt data-sg-type (seinen Namen), damit das pnpm measure:type des Prototyps die Schriftart wie gerendert bei 1440 und 390 ausgeben kann (Größe, Zeilenhöhe, Laufweite, Schriftstärke), um sie mit dem Typografie-Blatt des Designs zu vergleichen, bevor die Klassen in Webflow kommen.

Die gemeinsamen Regeln gelten (webflow-build › rules.md: Designer first, kein Commit oder Push ohne OK) und in Webflow die eigenen Regeln des Builds: eine Freigabe vor jedem Batch.

Das Layout

Rahmen. Eine fixe Sidebar links listet die nummerierten Abschnitte als Links zu ihnen; der gerade gelesene Abschnitt wird hervorgehoben. Eine Inhaltsspalte rechts. Bei 991px und darunter wird die Sidebar zu einem Streifen mit Links unter der Navigation, der horizontal scrollt.

Für Neulinge geschrieben. Die Seite muss für jemanden verständlich sein, der die Website noch nie gesehen hat: einen Kunden oder einen Entwickler am ersten Tag.

• Die Übersicht beginnt mit dem Zweck der Seite, vier Karten zur Nutzung (finden, eine Zeile lesen, wiederverwenden vor dem Hinzufügen, hier hinzufügen), die Website auf einen Blick (Anzahlen), ihre Schriftarten, ihre Variablensammlungen und die Breakpoints.
• Jeder Abschnitt beginnt mit seiner Nummer, seinem Titel und einer Zeile, die sagt, wofür er ist und wie man ihn nutzt (der Text steht in scripts/sections.mjs, bei jeder Website gleich).
• Muster von Buttons, Formularen und Komponenten sitzen auf einem Panel; Klassennamen in einem Chip; lange Tabellen behalten ihren Namen im Blickfeld, während sie scrollen.
• Jedes Label verwendet die eigene Schriftart der Website. Keine Monospace: Eine Designer-Klasse enthält eine Schriftfamilie, und eine System-Monospace-Schriftart bringt ihre eigene durchgestrichene Null mit.
• Der Rahmen bezieht seine Farben von der Seite (neutrale Linien und Panels mit niedriger Deckkraft), sodass er auf einer hellen oder dunklen Website gleich aussieht.

Abschnitte, immer in dieser Reihenfolge, mit diesen Namen und IDs. Ein Abschnitt ohne Inhalt wird weggelassen; es wird nichts hinzugefügt, umbenannt oder umsortiert.

#	Abschnitt	ID	Quelle
1	Übersicht	overview	generiert: Seitenverwendung, Anzahlen, Schriftarten, Sammlungen, Breakpoints
2	Farben	colors	jede Farbvariable außerhalb von Colors Semantic
3	Designs	themes	Abschnitt, jede Klasse, die einen Colors Semantic Modus setzt, und die Tabelle der Rollen pro Modus
4	Typografie	typography	jede Klasse, die einen Typografie-Stile-Modus setzt, die nativen Tag-Stile (Überschriften, Absätze, Links), die Schriftmerkmale des Body-Stils und die Schriftgrößenskala
5	Hilfsklassen	utilities	Größen-, Gewichts-, Laufweiten-, Text- und Max-Breite-Klassen
6	Abstände, Radius und Layout	spacing	die Abstands- (jeweils mit einem Balken seiner Größe), Radius- und Layout-Variablen
7	Buttons und Links	buttons	Muster
8	Formulare	form-elements	Muster (Elemente verwenden section=forms; Webflow lehnt forms als Element-ID ab)
9	Komponenten	components	Muster
10	Seitenabschnitte	page-sections	Muster, angezeigt in halber Bildschirmgröße
11	Andere Klassen	other-classes	generiert: jede Klasse, die nichts von oben anwendet

Die Zeile. Jedes Element auf der Seite ist eine Sg Row: links sein Name, wie der Designer ihn zeigt, seine CSS-Klasse und eine Notiz in einfachen Worten (woran es bindet, seine Werte pro Breakpoint, seine Zustände); rechts das Live-Muster. Ein Abschnitt ist eine Überschrift und eine Liste von Zeilen. Tabellen mit Werten (Rollen pro Modus, Schriftgrößenskala, Abstände, Layout) sitzen im Muster einer Zeile als eine Sg Table: die Namensspalte, dann eine Spalte pro Modus oder Wert.

Keine Projektklasse im Rahmen. Der Rahmen verwendet nur Sg-Klassen, sodass die Seite unabhängig von der Schriftgrößenskala oder dem Abschnittsabstand eines Projekts gleich aussieht. Projektklassen erscheinen in den Mustern.

Variablen sind ein Standard, keine Grenze

Die Seite zeigt, was die Website hat. Die Sammlungen, Namen und Startwerte der Vorlage (webflow-build conventions §4, inklusive Geist als Standardschriftart) sind das Standardlayout und die Standardverwendung von Variablen; ein Projekt kann Werte ändern sowie Variablen, Modi und Sammlungen hinzufügen, umbenennen oder entfernen.

• Jede Farbvariable außerhalb der semantischen Sammlung ist ein Farbfeld; jede Klasse, die einen Modus setzt, ist eine Design- oder Typzeile; jede Sammlung, die der Generator nicht nach Rolle kennt, wird als Tabelle unter „Abstände, Radius und Layout“ angezeigt.
• Eine Website, die die Standardsammlungen anders benennt, gibt dies in design/style-guide/config.json an, z. B. { "collections": { "semantic": "Themes", "typeStyles": "Type Styles" } } (Schlüssel: semantic, typeStyles, typeRole, typeScale, spacing, radius, layout).
• Was fest bleibt, ist das Layout: der Rahmen, die Abschnittsreihenfolge, die Zeile.

Muster (Abschnitte 7 bis 10)

Zwei Möglichkeiten, eines bereitzustellen; beide erzeugen dieselbe Zeile.

1. Von einer echten Seite, damit es mit ihr synchron bleibt. Ummantle das Markup auf der Seite:

<!-- sg:start section=components | name=Card | class=.card | note=Used in lists and on the home page -->
<a class="card" href="/work/item" data-card>…</a>
<!-- sg:end -->

2. Von Hand, für das, was keine Seite allein zeigt (Button-Zustände, Formular-Teile). Eine Datei pro Abschnitt in design/style-guide/items/, jedes Element ein Header-Kommentar gefolgt von seinem Markup:

<!-- sg: section=buttons | name=Button Is Secondary | class=.button.is-secondary | note=Combo on Button -->
<a class="button is-secondary" href="#buttons">Secondary</a>

• section ist buttons, forms, components oder page-sections; name ist erforderlich; class und note sind optional.
• Bevorzuge einen echten Seitenblock für Komponenten und Seitenabschnitte. Ein von Hand kopiertes Muster weicht von der Seite ab, und bei früheren Builds hatten aus handkopierten Vorschauen erstellte Komponenten ihre Skript-Hooks verloren.
• Der Generator entfernt IDs, for, data-*-Hooks und ID-Referenzen aus einem Muster und markiert es als inert: Es ist ein Bild der Komponente, keine funktionierende Kopie, sodass kein Skript sich anheftet und nichts den Fokus erhält.
• Die Seite ist noindex, daher ist eine zweite h1 auf ihr in Ordnung: Der Typografie-Abschnitt zeigt eine echte als Muster des Tag-Stils „Alle H1-Überschriften“, und ein Muster kann eine enthalten.
• Ein page-sections-Muster wird in halber Größe in einem versiegelten Rahmen angezeigt. Entferne es, sobald seine Seite in Webflow existiert: Die Seite behält dann ihre Klassen. Die Abschnitte 1 bis 9 bleiben dauerhaft.
• Keine Inline-style-Attribute: Der Webflow-Importierer verwandelt jedes in eine überflüssige Kombinationsklasse. Farbfelder, Radius-Boxen und Abstandsbalken verwenden stattdessen eine generierte Kombination pro Variable.

Im Prototyp (erste Seite)

1. Der Prototyp-Ordner existiert (webflow-prototype › Project setup) und sein Webflow-Snapshot ist aktuell (pnpm css).
2. pnpm style-guide. Es schreibt design/style-guide/index.html und src/css/style-guide.css. Bearbeite niemals eine der beiden Dateien von Hand.
3. Füge die Muster des Projekts hinzu (Button- und Formular-Elemente; Komponenten- und Seitenblöcke, sobald Seiten erstellt werden) und führe es erneut aus.
4. pnpm check:style-guide, bis es erfolgreich ist.
5. Die Person überprüft die Seite bei 1440, 820, 667 und 390 und genehmigt sie bevor die erste Inhaltsseite gestartet wird.
6. Ab dann erhält jede neue Klasse oder Komponente ihre Zeile im selben Arbeitsgang: Muster hinzufügen, pnpm style-guide, pnpm check:style-guide.

In Webflow (erste Seite)

Nachdem Variablen, Tag-Stile, Klassen und das Repo-Bundle vorhanden sind und vor jeder anderen Seite. Eine Freigabe pro Batch.

1. Seite. /design/style-guide im design-Ordner, auf der standardmäßigen Shell (webflow-build conventions §1). noindex, nofollow im Kopf-Code der Seite; von der Seitensuche und der Sitemap ausgeschlossen (die Sitemap-Einstellung erfordert einen Site-Plan: auf einer Website ohne diesen hält das noindex-Tag sie aus der Suche heraus, und der Ausschluss wird gesetzt, sobald der Plan existiert); Links darauf führen einen vollständigen Seitenaufruf durch.
2. Sg-Klassen. Eine vom Starter duplizierte Website hat sie bereits. Andernfalls der schnellste Weg, der alle Werte behält: Importiere den Rahmen mit dem WHTML-Builder und übergib sg.css als dessen css (Variablen und calc() durch reine Werte ersetzt, rgb(r g b / a) als rgba() geschrieben). Der Importierer erstellt jede Klasse mit Langform-Eigenschaften, Zuständen und Breakpoints, benannt nach ihrem Slug; benenne jede danach in den Namen um, den der Designer sehen soll (Sg Row, Sg Row Meta, Sg Table Key…). Die .w--current-Regeln werden zum Current-Zustand von Sg Sidebar Link, den das Style-Tool selbst nicht schreiben kann. Dies funktioniert nur, solange die Klasse neu ist: für eine bereits existierende Klasse erstellt der Importierer ein nummeriertes Duplikat (webflow-build/lessons/mcp.md).
3. Variable Kombinationen. Für jede Farbvariable die Kombination Sg Swatch Color + Is … mit Bindung background-color; für jede Radius-Variable Sg Radius + Is … mit Bindung border-radius; für jede Abstandsvariable Sg Bar + Is … mit Bindung width. Das generierte src/css/style-guide.css listet sie auf, eine pro Zeile.
4. Baue Abschnitt für Abschnitt aus der generierten Seite, nur mit Klassen. Erstelle jede Klasse und Kombination, bevor du Markup importierst (der Importierer verwirft eine gesamte Klassenliste, wenn eine Klasse fehlt). Verlinke dann jeden Sidebar-Link mit seinem Abschnitt (Link-Typ: Seitenabschnitt), damit Webflow den aktuellen markiert.
5. Zeilen für Komponenten sind Komponenten-Instanzen, keine Kopien ihres Markups.
6. Überprüfe auf Staging: Jede Klasse der Website erscheint auf der veröffentlichten Seite oder in der Shell, und jede Kombination auf einem Element (eine Kombination, deren Klassen nur getrennt vorkommen, wird dennoch von der Bereinigung gelöscht); die Sidebar hebt den sichtbaren Abschnitt hervor; noindex ist im Kopf. Erst dann ist Clean up unused styles sicher.

Auf einer bestehenden Website

Eine nicht aus der Vorlage erstellte Website kann dieselbe Seite erhalten: Erstelle einen Prototyp-Ordner aus dem Prototyp-Starter des webflow-prototype-Skills, erstelle einen Snapshot der Website und folge dann „Im Prototyp“ und „In Webflow“. Ihre Sg-Klassen existieren noch nicht; erstelle sie in Schritt 2.

Tore (Gates)

• Styleguide-Prototyp genehmigt [Person]: vor der ersten Inhaltsseite des Prototyps.
• Styleguide-Basis fertig [Claude prüft, Person genehmigt]: Die Webflow-Seite enthält jede Klasse, die bisher existiert; veröffentlicht und auf drei Breiten geprüft.
• Styleguide-Abschlussprüfung [Claude prüft]: Bei der Build-Übergabe ist pnpm check:style-guide erfolgreich und die veröffentlichte Seite enthält jede Klasse.

Das Layout ändern

Das Layout ändert sich hier, für jede Website gleichzeitig, niemals in einem einzelnen Projekt: Bearbeite sg.css, die Abschnittsliste oder den Generator in der Vorlage, aktualisiere die Starter-Seite im selben Arbeitsgang und veröffentliche es (webflow-build › rules.md › Contributing). Projekte erhalten es mit pnpm update-skills und pnpm style-guide.