Webflow Client First verstehen - Übersicht für Beginner

Isabel fragt: Was ist dein Tipp um ein für alle mal Webflow's 'Classes' und 'Naming' zu verstehen. Ich brauche eine einfache Strategie. Finsweet's Client-First Style System? Ich finde das furchtbar verwirrend, was wahrscheinlich an mir liegt und nicht am System.
In diesem Video gebe ich dir eine umfangreiche Übersicht in das Finsweet Client First Style System. Ein effizienter Weg um in Webflow Klassen und Benennungen zu meistern.
Client First Dokumentation:
finsweet.com/client-first
Kostenlose Client First Cloneables:
webflow.grsm.io/client-first-cloneables *
Relume Library (alle Komponenten sind nach dem Client First System aufgebaut):
Mit dem Code JONAS20 erhältst du 20% auf dein Relume Abo!
jonasarleth.com/relume *
* Affiliate Links
---------------------------------------------
Meine Onlinekurse:
👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
formburg.com/kurs
👉 50+ Webflow-Tricks:
www.formburg.com/tricks
👉 Webdesign Angebote mit drei Preisoptionen erstellen:
www.jonasarleth.com/produkt/webdesign-angebot-erstellen
---------------------------------------------
Kostenlosen Webflow Account anlegen:
formburg.com/webflow-kostenlos *
Webflow schnell und einfach lernen:
formburg.com/tutorials
---------------------------------------------
// TIMESTAMPS
00:00 - Intro
00:15 - Was ist Client First
03:21 - Client First Aufbau und Struktur erklärt
#webflow #webdevelopment #webdesign
---------------------------------------------
// PATREON
► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): bit.ly/patreon-seite
----------------------------------------------
// MEIN WEBDESIGN UND FREELANCER BLOG
► jonasarleth.com/blog
----------------------------------------------
// SOCIAL MEDIA
► LinkedIn: www.linkedin.com/in/jonasarleth
► Instagram: jonasarleth
► Dribbble: dribbble.com/jonasarleth
----------------------------------------------
// MEIN WEB & DESIGN PODCAST
► iTunes: jonasarleth.com/itunes
► Spotify: jonasarleth.com/spotify
► SoundCloud: jonasarleth.com/soundcloud
► Overcast: jonasarleth.com/overcast
----------------------------------------------
* Affiliate Links

[@Orangeman0711]

Ich finde das Client First System absolut nicht verwirrend.. Habe Webflow auch direkt damit gelernt. Absolut Hammer.. Sehe auch immer mehr Webseiten, die danach gebaut sind..

[@jonasarleth]

Stimme ich dir zu! Würde es auch empfehlen 👍

[@stefanpelz6328]

Wieder ein super Video und alles hervorragend erklärt. Aber erzähl doch mal bitte was du da umgeschnallt hast. Hilft das gegen Rückenschmerzen bedingt durch langes Sitzen?

[@jonasarleth]

Erkläre ich hier in dem Video: kzbin.info/www/bejne/mHaVZ4epmdWKfq8 Aber habe es wieder abgesetzt 😥

[@JokerBrand7]

Mit welchem Tool nimmst du deinen Screen auf? Finde die eckigere FaceCam mega nice. Ich nehme für meine Kunden Videos bislang mit Loom auf allerdings finde ich die Art bei dir ästhetischer.

[@jonasarleth]

Screenflow heißt das Tool

[@JokerBrand7]

Danke dir :) @@jonasarleth

[@peterkaltenberger6711]

Relume ist auch eine super Framework. Welches bevorzugst du?

[@jonasarleth]

Relume baut ja auf Client First auf 😊

[@specki9850]

Moin Jonas, dnke, dass du das Thema aufgreifst. Vielleicht hast du ja ne Idee für mich. Wenn ich zwei Elemente habe und dann mit margin left oder margin right für Abstand auf der Desktop Version sorge und dann beim responsive machen bspw auf dem Mobile, die Elemente nicht mehr nebeneinander, sondern untereinander mache, dann muss ich immer wieder zurück, margin left und right löschen, eigene Klassen für die Elemente vergeben und dann individuell Abstand vergeben. Gibt es da nen schlankeren weg oder muss ich beim Bauen immer überlegen ob dieses Element ggf unter einander auf anderen Geräten stehen wird? Beste Grüße

[@bobosvenson8339]

Einfacher ist es wohl das Grid-Element oder Flexbox zu nutzen, den Gap und die Anordnung kann man pro Breakpoint festlegen (bspw. 3-spaltig bei Desktop, 2-spaltig bei Tablet) ganz ohne zusätzliche Klassen.

[@specki9850]

Hallo @@bobosvenson8339 , das ist mir soweit klar und mache ich auch so. Ich frage mich nur, wann genau man dann Margin right oder Margin left benötigt, da fast immer das Element nicht mehr horizontal sondern vertikal wird, sobald sich der Breakpoint verkleinert.

[@kydN]

6:20 um diesem sticky-Problem aus dem Weg zu gehen, kann man dem page-wrapper (via custom code in den Global Styles) einfach overflow:clip geben. Das ist ein relativ neuer "Trick", den ich von Timothy Ricks gelernt habe :)

[@jonasarleth]

Stimmt!

[@JustAn0therSoul]

zu 5:27 die klassen sind dort nochmal im custom code, wegen dem !important statement, dadurch kann es nicht überschrieben werden

[@jonasarleth]

Ja stimmt

[@framerprojects]

Ich konnte mit client first nie was anfangen weil es einen total erschlägt mit tausenden CSS Styles mit denen man nichts anfangen kann weil man sie schließlich nicht selbst erstellt hat und die nicht für das jeweilige Projekt entwickelt wurden. Viele Styles bleiben auch einfach als ungenutzte Leichen übrig. Klar kann bzw. muss ich sogar die Styles meinen Wünschen anpassen nur, dann kann ich sie mir gleich selbst bauen. Abgesehen davon, dass ihr System auf unnötig viele Divs aufbaut die für viele Projekte absolut unnötig sind, man sie aber nutzen muss weil sie eben globale Styles sind ohne die CF sinnlos wäre. Speziell jetzt mit Variablen sollte man solche Designsysteme in Webflow mehr als überdenken.

[@matthiaspanopau]

Danke für Deine Meinung. Die Argumente halten mich auch davon ab mich weiter mit diesem Client-First-Ansatz zu beschäftigen. Ich überlege gerade, ob und welches Framework ich für mein nächstes Projekt verwenden soll. "Lumos" von Timothy Ricks sieht für mich auf den ersten Blick überzeugend und sehr gut durchdacht aus, besonders auch im Hinblick auf das Verwenden der Utility-Klassen (die das Problem der unnötig vielen Divs umgehen sollten?). Hast Du eine Meinung dazu? Oder was wären Deine Argumente für oder gegen Lumos?

[@jonasarleth]

Ich habe mich vom Client First inspirieren lassen und gute Ideen und Benennungen daraus übernommen und mit meinem Aufbau kombiniert. Aber mir ist es auch an einigen Stellen zu viel.

[@Михаил-ъ6ъ5е]

Спасибо за перевод😊

[@jonasarleth]

You’re welcome ☺️