V1 zu V2 Anleitung

Die wichtigsten Neuerungen in Client-First V2.

V2 Updates

In V2 wird alles noch deutlicher erklärt

Wir führen das Konzept “[Thema]-Strategie” ein.

Die wichtigste Neuerung in Client-First V2 ist die Art und Weise, wie wir Client-First-Konzepte erklären. In V1 fehlte es an der Organisation des Inhalts und an klaren Erklärungen für einige Themen.

V2 führt eine neue Methode zur Organisation der Inhalte ein, die uns hilft, Client-First besser zu verstehen. Zu jedem Thema gibt es eine genauere Erklärung.

Die wichtigeren Themen sind als "Strategien" organisiert:

Folders

Folders (“Ordner”) werden neu definieren, wie wir Klassen in unserem Webflow-Projekt visualisieren.

Folders in Client-First ermöglichen es uns, die Klassen in einer flexiblen Ordnerstruktur zu organisieren.

Verwende den Unterstrich, um Custom Class Ordner zu erstellen. Verwende nur Bindestriche, um Utility Class Ordner zu erstellen.

Folders funktionieren nur mit Client-First und der Finsweet Extension. Erfahre mehr in Folders.

Komponenten sind besser definiert

In V2 werden wir genauer sein, wenn wir Komponenten verwenden – und noch genauer, wenn wir Unterstriche verwenden!

V1 Erste Veröffentlichung
Unterstrich im Klassennamen = Komponente

V2-Version mit Folders
Unterstrich im Klassennamen = Ordner
[Ordner-Name]_component = Komponente

Die Verwendung eines Unterstrichs im Klassennamen bedeutet nicht unbedingt, dass es sich um eine Komponente handelt. Wir verwenden jetzt Unterstriche für die Organisation oder Gruppierung von Elementen in Ordnern.

Komponenten haben jetzt eine besondere Klassifizierung. Wenn wir wollen, dass ein Element als Komponente betrachtet wird, verwenden wir das Wort component für den Elementnamen.

Erfahre mehr unter Folders-Strategie.

Klassentypen sind besser definiert

Custom Class, Utility Class, Global Class und Combo Class werden in Klassen-Strategie 1 genauer definiert und erklärt.

  • Custom Class (benutzerdefinierte Klasse)
  • Utility Class (Hilfsklasse)
  • Global Class (seitenübergreifende Klasse)
  • Combo Class (kombinierte Klasse)

Wenn wir die Klassentypen besser verstehen, können wir bei der Entwicklung unseres Webflow-Projekts bessere Entscheidungen treffen.

page-padding ist jetzt padding-global

Der wichtigste Wert für Padding in unserem Projekt heißt jetzt padding-global. Diese Namensänderung sorgt für eine bessere Organisation unseres Ordnersystems.

Anstatt unsere padding Klasse in den Ordner page- zu legen, legen wir sie in den Ordner padding-.

Erfahre mehr unter Grundstruktur-Strategie.

section-[name] ist jetzt section_[name]

Klassen für Sections verwenden jetzt den Unterstrich statt des Bindestrichs.

Folders stellt sicher, dass Utility Classes die einzigen Klassen sind, die nur Bindestriche verwenden. Custom Classes verwenden einen Unterstrich. Klassen für Sections werden als Custom Class eingestuft, was bedeutet, dass sie einen Unterstrich im Klassennamen brauchen.

Der Unterstrich platziert die Klassen für Sections in einem Ordner für Custom Classessection_.

Erfahre mehr unter Grundstruktur-Strategie.

Das neue padding-section-[size] ermöglicht globales Padding für Sections

Wir haben neue Utility Classes eingeführt, um das globale, seitenübergreifende Spacing (Abstände) zwischen Sections zu vereinfachen und für das gesamte Projekt zu vereinheitlichen.

Erfahre mehr unter Grundstruktur-Strategie.

Der neue heading-style-[h#] sorgt für einheitliche Stile bei Überschriften

Wenn ein Heading-Tag den Stil eines anderen Heading-Tags haben soll, können wir unsere Klasseheading-style-[h#] verwenden.

Wenn wir zum Beispiel eine H2 für SEO-Zwecke benötigen, der Text aber dem Stil der H3 folgen soll, können wir heading-style-h3 auf die H2 anwenden, um ihren Stil zu ändern und gleichzeitig den richtigen semantischen HTML-Tag beizubehalten.

Erfahre mehr unter Typografie-Strategie.

Neue display-inlineflex Utility Classes

Wende die CSS-Eigenschaft display: inline-flex an, die in Webflow keine nativ unterstützte CSS-Eigenschaft ist.

Anwendungsfall: Die Verwendung der CSS-Eigenschaft display: flex ist in der Regel wichtig für unser Projekt. Allerdings führt display: flex dazu, dass Elemente standardmäßig 100% des Platzes einnehmen. Das macht es zum Beispiel schwierig, Flexbox für Buttons zu verwenden. display: inline-flex ermöglicht es, dass sich Elemente wie Inline-Elemente verhalten, während die Flex-Funktionen in ihnen erhalten bleiben.

Erfahre mehr unter Utility Classes.

Keine show- Utility Classes mehr

Die show- Utility Classes wurden entfernt. Diese Klassen haben display: block bei verschiedenen Breakpoints angewandt.

Wir haben festgestellt, dass show- Utility Classes sehr einschränkend sind, nur für eine kleine Anzahl von Anwendungsfällen funktionieren und zu unerwünschten Problemen führen können.

Anstatt show- Utility Classes auf Elemente anzuwenden, können wir display Eigenschaften direkt auf die Custom Class anwenden.

Außerdem können wir beliebige display Eigenschaften auf eine Combo Class anwenden. Zum Beispiel: modal_component is-visible-tablet.

Neue Strategien für Spacing

V2 erweitert die Möglichkeiten, Utility Classes und Custom Classes zu verwenden, um Elemente im Projekt zu beabstanden. Wir haben neue Methoden für die Implementierung von Abständen hinzugefügt.

Spacing mit Utility Classes

  • Spacing Wrappers (V1)
  • Spacing Blocks (neu in V2)

Spacing mit Custom Classes

  • Spacing direkt mit Custom Classes (V1)
  • Spacing mit CSS-Grid (neu in V2)

Erfahre mehr unter Spacing-Strategie.

Verbesserte benutzerdefinierte CSS im Global Embed

Auf der Seite Global Embed findest du eine vollständige Übersicht über alle CSS-Snippets.

Völlig neue Seiten in V2

V2 fügt neue Inhalte für Themen hinzu, die in V1 nicht behandelt wurden

  • Intro gibt einen Überblick über die wichtigsten Themen von Client-First.
  • Big Docs motiviert uns, Client-First vollständig zu lernen.
  • Folders und Folders-Strategie geben uns eine umfassende Erklärung zu unserer neuen Methode der Visualisierung von Klassen.
  • Semantische HTML-Tags geben uns ein besseres Verständnis dafür, wie man HTML richtig verwendet.
  • CSS Specificity erklärt uns, warum Klassen für Margin und Padding nicht funktionieren, wenn du Elemente und Komponenten kopierst und einfügst.
  • Global embed hilft uns, den Zweck des benutzerdefinierten CSS zu verstehen, das dem Client-First-Cloneable hinzugefügt wurde.
  • Verkaufsstrategie gibt uns Methoden an die Hand, mit denen wir Client-First in unserem Verkaufsprozess einsetzen können, um mehr Projekte zu gewinnen.

Von Client-first zu Client-First

Finsweet hat kürzlich ein neues Logo veröffentlicht. Dieses Logo ersetzt das kleine "f" durch ein großes "F".

Wir werden den gleichen Trend für Client-First verfolgen.

In Client-First V1 wird das "f" klein geschrieben. In V2 verwenden wir das große "F" für die gesamte Marke. Diese Aktualisierung ändert Client-first in Client-First.

Interessierst du dich für den Wechsel von Finsweet vom f zum F? Dann schau dir hier unseren Live-Stream an.

nächste

Changelog

Die wichtigsten updates in Client-First.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset
HTML font size
px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
px values
rem values
2px
=
0.125rem

Closest to Client-First values

2px
=
0.125rem

Neighboring values

2px
=
0.125rem