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 Classes – section_.
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.