Was ist die Grundstruktur?
Die Client-First-Grundstruktur ist eine Reihe von Klassen und Prinzipien, mit denen wir eine solide HTML-Basis fĂŒr unsere Seiteninhalte schaffen.
Kleine Websites, groĂe Websites, Websites fĂŒr AnfĂ€nger sowie fortgeschrittene Websites können dieselbe Struktur verwenden.
Client-First-Nutzer werden sofort die Grundstruktur einer Client-First-Webseite erkennen. Menschen, die sich nicht mit Client-First auskennen, können mithilfe unserer leicht lesbaren Klassennamen nachvollziehen, was die einzelnen Ebenen der Struktur bewirken.
Wir können uns unsere Grundstruktur als "Ebenen" von Div Blocks vorstellen, die unseren Seiteninhalt umfassen. Jede Ebene hat einen bestimmten Zweck, um uns beim Aufbau einer Webseite zu helfen.
ErlÀuterung der einzelnen Klassen der Grundstruktur
Insgesamt gibt es 6 verschiedene Klassen, die unsere Kernstruktur bilden.
page-wrapper
Das Ă€uĂerste Parent (ĂŒbergeordnete Element) aller Elemente auf der Seite. Dieser Div Block umschlieĂt jedes Element auf der Seite.
Stile:
Stile fĂŒr den page-wrapper sind optional. Bei Bedarf können Stile angewendet werden. Dieses Element sollte jedoch nicht stark verĂ€ndert werden.
PrimÀre AnwendungsfÀlle:
- Schnelle Möglichkeit fĂŒr "In die Zwischenablage kopieren" aller Elemente auf der Seite. Wir können dann die gesamte Seite auf einer anderen Seite einfĂŒgen.
- Wir haben eine seitenweite globale Klasse zur VerfĂŒgung, wenn wir einen Stil auf die gesamte Seite anwenden wollen. Zum Beispiel, wenn wir overflow: hidden auf die gesamte Seite anwenden, um horizontales Scrollen zu verhindern. Aber Vorsicht! Die Anwendung von overflow: hidden verhindert zwar das horizontale Scrollen der Seite, verhindert aber auch, dass CSS sticky auf alle verschachtelten Elemente angewendet wird.
- Um zu verhindern, dass Klassen und einzigartige Stile direkt auf das <body> HTML-Tag angewendet werden. Bei Client-First beschrÀnken wir die Stile im Body-Tag auf die Eigenschaften Typografie und Hintergrundfarbe. Wir können benutzerdefinierte Stile auf den page-wrapper anwenden, der die gesamte Seite umfasst. So bleiben unsere Body-Stile auf Typografie und Hintergrundfarbe begrenzt.
main-wrapper
Der Hauptinhalt der Seite. Verwende einen <main> HTML-Tag, der alle oder die meisten Sections unserer Website umfasst.
Die Navigation und der Footer sollten sich nicht innerhalb des <main>-Tags befinden.
Stile:
Stile fĂŒr den main-wrapper sind optional. Stile können bei Bedarf angewendet werden.
PrimÀrer Anwendungsfall:
- BewĂ€hrte Praxis fĂŒr Barrierefreiheit. Diese Ebene unserer Grundstruktur soll Bildschirmlesern und Suchmaschinen helfen zu verstehen, wo sich der "Hauptinhalt" unserer Seite befindet.
section_[section-name]
Der Hauptnutzen der Klasse besteht darin, den Workflow im Webflow Designer zu verbessern. Dieses Element organisiert unsere Navigator-Ansicht und hilft uns, schnell innerhalb der Designer-OberflÀche zu navigieren.
Dieser Div Block umfasst eine ganze Section. Es wird empfohlen, den HTML-Tag dieses Elements auf <section> zu setzen. Dies geschieht in den Einstellungen des Elements section_[section-name].
Diese Section befindet sich in einem anderen Folder als der Inhalt, den sie enthĂ€lt. Aufgrund der Klassenbenennung des Elements section_[section-name] befinden sich alle Klassen fĂŒr Sections im Folder section_.
Stile:
Wenn möglich, sollten wir vermeiden, Stile auf section_[section-name] anzuwenden. Wir können jedoch Stile anwenden, wenn wir wollen.
Kontrolliere die globalen Stile der Sections:
Wende eine globale Add-on-Klasse wie section-style-dark auf die section_[section-name]-Klasse an, um globale CSS-Eigenschaften fĂŒr alle Sections anzuwenden. Jede section_-Klasse ist eine eigene Klasse. Wir wollen nicht wiederkehrende CSS-Eigenschaften auf jede Einzelne anwenden. Wenn wir z. B. einen "dark section" brauchen, können wir unsere Klassen color: white und background-color: black auf section-style-dark anwenden, und diese Klasse kann als globales Add-on zu unserer benutzerdefinierten section_-Klasse dienen.
PrimÀre AnwendungsfÀlle:
- Identifiziere eine Section auf einer Seite im Navigator-Panel. Das Ziel ist es, eine Art Sitemap fĂŒr unsere Seite zu erstellen. Dies ist eine Webflow Designer UX-Entscheidung.
- Anker-Scroll-Effekt im Navigator-Panel. Wenn wir auf eine Section klicken, wird die Seite zur entsprechenden Section scrollen.
- Wir halten es fĂŒr schwierig, unsere Kunden ohne eine visuelle Darstellung oder eine "Sitemap" der Seite in Webflow einzufĂŒhren. Durch die Benennung der Sections erhalten unsere Kunden einen klaren Ăberblick ĂŒber den Inhalt der Seite.
- Der Anker-Scroll-Effekt im Navigator verbessert unseren Workflow als Entwickler und hilft uns, schneller zu arbeiten.
Beispiel:
Eine Homepage kann Sections wie âHeaderâ, âĂber unsâ, âHow-Toâ, âTestimonialsâ und âKontaktâ haben. Wir können unsere Sections mit beschreibenden Titeln benennen, um zu verstehen, was sich wo auf der Seite befindet.
padding-global
Globale horizontales Spacing (AbstÀnde). Diese Klasse bestimmt die linke und rechte Spacing des Seiteninhalts.
Wir wollen diese Klasse nicht verwenden, um Spacing zu einzelnen Elementen hinzuzufĂŒgen. Wir wollen diese Klasse zum Beispiel nicht verwenden, um das Spacing eines Elements in einer Liste zu verĂ€ndern.
Stile:
padding-left und padding-right sind die einzigen CSS-Eigenschaften fĂŒr die Klasse padding-global. Wir wollen keine weiteren CSS-Stileigenschaften zu dieser Klasse hinzufĂŒgen.
PrimÀre AnwendungsfÀlle:
- Einheitliches seitenweites padding-left und padding-right.
- Globaler Regler zur Steuerung des linken und rechten Spacings der gesamten Website.
Standardimplementierung:
Wir können padding-global flexibel einsetzen. Unsere empfohlene Struktur fĂŒr padding-global ist die folgende:
- main-wrapper
- section-[section-name]
- padding-global
- container-large
⊠(z.B. Komponenten, Elemente, etc.)
FlexibilitÀt:
Wir sind flexibel, wenn es darum geht, padding-global zu platzieren.
Wir trennen die padding-global-Stile von anderen Grundstruktur-Stilen, damit sie unabhÀngig verwendet werden können. Das ist die Macht von Ebenen.
Durch die Trennung können wir padding-global verwenden
- Als Parent (ĂŒbergeordnetes Element) von container-large
- Als Child (untergeordnetes Element) von container-large
- Oder beides zusammen
Jede Verwendung kann zu anderen Ergebnis im Layout fĂŒhren.
Wenn wir unserer Klasse container-large CSS-Werte fĂŒr die padding hinzufĂŒgen, sind wir bei der Verwendung eines Containers immer an die Stile fĂŒr padding  gebunden. Das wollen wir vielleicht nicht immer. Indem wir padding und max-width entkoppeln, können wir sie unabhĂ€ngig voneinander verwenden.
container-[size]
Ein einheitliches globales Container-System fĂŒr den Inhalt der Seite. Alle oder die meisten Seiteninhalte können in der container- Klasse untergebracht werden.
Stile:
- margin-left und margin-right sind auf auto gesetzt, um den Div Block auf der Seite zu zentrieren.
- width: 100%, um sicherzustellen, dass wir immer 100% des verfĂŒgbaren Platzes ausnutzen.
- max-width-Wert, um den Inhalt innerhalb einer bestimmten Breite zu halten. Client-First beinhaltet drei verschiedene GröĂen fĂŒr max-width bzw. container-[size] â small, medium und large. Wir können diese Werte bearbeiten, neue Werte hinzufĂŒgen oder Werte entfernen.
PrimÀre AnwendungsfÀlle:
- Um den Inhalt auf der Seite zu zentrieren
- Um einheitliche Werte fĂŒr die maximale Breite im gesamten Projekt festzulegen und beizubehalten.
Je nach Build können wir 2, 3 oder 4 verschiedene Container-Klassen festlegen.
Client-First beinhaltet drei verschiedene GröĂen fĂŒr max-width bzw. container-[size] â small, medium und large. Wir können diese Werte bearbeiten, neue Werte hinzufĂŒgen oder Werte
padding-section-[size]
Ein einheitliches globales vertikales Spacing (AbstĂ€nde) fĂŒr Sections. Erstelle oberes und unteres Spacing innerhalb einer Section.
Stile:
- padding-top und padding-bottom, um vertikales Spacing fĂŒr eine Section zu erstellen.
PrimÀre AnwendungsfÀlle:
- Um einheitliches Spacing zwischen den Sections im Projekt zu wahren.
- Aktualisiere das obere und untere Spacing in allen Sections global im gesamten Projekt.
Wir können 2, 3 oder 4 verschiedene GröĂen fĂŒr das Spacing in unserem Projekt festlegen.
Client-First beinhaltet drei verschiedene GröĂen fĂŒr padding-section-[size] â small, medium und large. Wir können diese Werte bearbeiten, neue Werte hinzufĂŒgen oder die Werte je nach Projekt entfernen.
Wenn wir individuelles Spacing fĂŒr eine Section brauchen, können wir individuelle Stile auf die Klasse section_[section-name] der Section anwenden.