Version 2.0 | 13.02.2025

Guide

Dieser Guide beschreibt die Nutzung von Webflow für die toggenburger.ch Webseite

1. Verwendung von Klassen

Ansatz für den Umgang mit Klassen in Webflow.

Verschiedene Klassentypen

Utility-Klassen

Eine Utility-Klasse wird für eine spezifische Kombination von CSS-Eigenschaften erstellt und kann auf verschiedene Elemente im gesamten Projekt angewendet werden.
Utility-Klassen verwenden ausschließlich Bindestriche ("-") in ihren Namen.
Eine Änderung an einer Utility-Klasse wirkt sich auf alle Instanzen aus, da sie global ist.

Beispiel:

text-size-large

background-color-primary

Custom-Klassen

Eine benutzerdefinierte Klasse, die für eine bestimmte und identifizierbare Komponente, Seite, Gruppierung von Elementen oder ein einzelnes Element erstellt wird.
Custom-Klassen verwenden einen Unterstrich ("_"), um den "Ordnernamen" zu definieren.
Sie sind flexibler für spätere Änderungen und erleichtern die Projektwartung.
Übermässiges Stapeln von Klassen und fehlerhafte globale Änderungen sollten vermieden werden.

Beispiel:

header_background-layer

testimonial-slider_headshot

Globale Klassen

Eine globale Klasse ist für den gesamten Projektumfang gedacht und stellt eine weitere Klassifizierung der Klassenzwecke dar. Sowohl Utility- als auch Custom-Klassen können globale Klassen sein.
Eine globale Klasse kann Bindestriche ("-") oder Unterstriche ("_") enthalten.

Beispiel:

header_background-layer

faq_item

Combo-Klassen

Eine Combo-Klasse ist eine Variante einer anderen Klasse. Sie erbt die Stile der Basisklasse und ergänzt weitere Stile.
Das Präfix "is-" oder "has-" kennzeichnet eine Combo-Klasse.
Sie sind nützlich, um spezifische Anpassungen für einzelne Instanzen zu ermöglichen.

Beispiel:

styleguide-label

is-green

header_content

is-home

Richtlinien für Klassennamen

Sinnvolle Namen wählen

"Welchem Zweck dient diese Klasse im Projekt?"
"Wie kann ich den Kontext möglichst klar vermitteln?"

Beispiel:

testimonials_wrapper

Keine übermässigen Abkürzungen verwenden

Schlechtes Beispiel:

col-2-d

flex-mobile-a-c

Klassen-Ordner

Klassen können mit Unterstrichen in "Ordner" aufgeteilt werden.
Diese Struktur wird auch für die Finsweet-Browsererweiterung genutzt.

Beispiel:

nav_link

nav_icon

Von Allgemein zu Spezifisch

Diese Klasse formatiert ein Textelement.
Diese Klasse bestimmt die Textgrösse.
Diese Klasse setzt die Textgröße auf "gross".

Beispiel:

text-size-large

Alternativen zum Klassenstapeln

Weniger stapeln gibt mehr Kontrolle. Staple auf keinen Fall mehr als 4 Klassen.

Combo-Klassen zusammenfassen

text-size-medium

text-color-secondary

text-weight-light

Zusammenfassen in eine Klasse

text-style-alternative

Ineinander verschachteln

text-color-secondary

max-witdh-large

2. Verwende REM

Erstelle barrierefreie, responsive Websites.

What is REM?

Die Einheit rem basiert auf einer einzigen Sache – der Schriftgröße des HTML-Root-Elements. Standardmäßig beträgt diese 16px.
rem sollte für alle Elemente verwendet werden, die eine Grössenangabe benötigen.
1rem = 16px (Standard-Schriftgröße des Root-Elements).

px-Wert	rem-Wert	px-Wert	rem-Wert
4px	0.25rem	80px	5rem
8px	0.5rem	96px	6rem
16px	1rem	128px	8rem
20px	1.25rem	160px	10rem
24px	1.5rem	192px	12rem
32px	2rem	256px	16rem
40px	2.5rem	320px	20rem
48px	3rem	384px	24rem
56px	3.5rem	448px	28rem
64px	4rem	512px	32rem
72px	4.5rem	640px	40rem

Im Style-Feld kann direkt gerechnet werden, indem "Wert"/16 rem eingegeben und mit Enter bestätigt wird.

Vorteile für Barrierefreiheit

Browser können problemlos zoomen, wenn REM für die Skalierung genutzt wird.
Vom Nutzer geänderte Schriftgröße-Einstellungen im Browser werden berücksichtigt.
vw, vh-Werte sind für vollständige Barrierefreiheit nicht geeignet.

3. Seitenstruktur

Eine definierte und dennoch flexible Kernstruktur, die auf allen oder den meisten Seiten verwendet werden kann.

Global Styles

Globales benutzerdefiniertes CSS für das gesamte Projekt.
Organisiert alle benutzerdefinierten CSS-Snippets an einem zentralen einfach zugänglichen Ort.

Header

Verwende den <header>-HTML-Tag für eine barrierefreie Struktur.

Main Nav

Das <nav>-Element enthält eine Liste von Navigationslinks.

main

Enthält den spezifischen Seiteninhalt.
Verwende den <main>-HTML-Tag für eine barrierefreie Struktur.

section

has-pad-(size)-(orientation)

Umschliesst einen gesamten Inhaltsbereich.
Ermöglicht auch die Anpassung der Hintergrundfarbe eines ganzen Bereichs.

has-pad-medium-(t/b/tb)

has-pad-huge-(t/b/tb)

container

(has-sidebar)

Steuert den horizontalen Abstand der gesamten Seite.
Bestimmt das Layout der Inhalte.

content

sidebar

Footer

Verwende den <footer>-HTML-Tag für eine barrierefreie Struktur.

Grids und Spalten

Kann auf <divs> angewendet werden um grids und spalten zu erstellen.

grid_1col

grid_2col

grid_2col-1-2

grid_2col-2-1

grid_3col

grid_4col

4. Spacing Strategie

Eine Strategie für konsistente und einfache Abstände.

Spacers

Werden als <div> zwischen Elementen eingefügt.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Max widths

Verwendet die CSS-Eigenschaft max-width, um den inneren Inhalt auf eine maximale Breite zu begrenzen.

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Benutzerdefinierte Abstandsklassen

Erstelle eine benutzerdefinierte Klasse, wenn ein Element eine einzigartige Abstandsregel benötigt, die nicht durch die oberen abgedeckt ist.

Beispiel

form_input

Die Klasse form_input könnte eine individuelle Abstandseinstellung wie margin-bottom: 0.75rem erhalten, sodass alle form_input-Elemente diesen genauen Abstand haben.

Vorteile

Globale Abstandsaktualisierungen für wiederkehrende Elemente.
Kann zusätzliche Stile enthalten, um Combo-Klassen und übermässiges Stapeln zu vermeiden.
Einfach zu pflegen, ohne sich auf Utility-Klassen auszuwirken.

5. Überschriften

Überschriften müssen einer logischen Reihenfolge folgen, um den Anforderungen der Web-Barrierefreiheit zu entsprechen. Das verbessert ausserdem das SEO. Es gibt sechs verschiedene Stufen: H1, H2, H3, H4, H5, H6. H1 ist die wichtigste und grösste Überschrift. H6 ist die kleinste und am wenigsten wichtige Überschrift. Jede Seite sollte genau eine H1 haben. Überschriften sollten hierarchisch genutzt werden (H1 → H2 → H3 usw.).

Falls das H1-Element im Standardstil belassen werden soll, benötigt es keine Klasse. Falls ein H1 wie eine andere Überschrift (z. B. H2) aussehen soll, kann eine Heading-Style-Klasse genutzt werden.

heading-style-h1

heading-style-h2

heading-style-h3

heading-style-h4

heading-style-h5

heading-style-h6

Lorem Ipsum

heading-style-h1

Lorem Ipsum

heading-style-h2

Lorem Ipsum

heading-style-h3

Lorem Ipsum

heading-style-h4

Lorem Ipsum

heading-style-h5

Lorem Ipsum

heading-style-h6

Lorem Ipsum

6. Weitere Typographie Klassen

All paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Grössen

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1.5rem)

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1.25rem)

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1rem)

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (0.85rem)