Styleguide

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
  • xx
  • xx
sidebar
  • xx
  • xx
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

  1. Globale Abstandsaktualisierungen für wiederkehrende Elemente.
  2. Kann zusätzliche Stile enthalten, um Combo-Klassen und übermässiges Stapeln zu vermeiden.
  3. 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.
H1
heading-style-h1
H2
heading-style-h2
H3
heading-style-h3
H4
heading-style-h4
H5
heading-style-h5
H6
heading-style-h6
H1

Lorem Ipsum

heading-style-h1

Lorem Ipsum

H2

Lorem Ipsum

heading-style-h2

Lorem Ipsum

H3

Lorem Ipsum

heading-style-h3

Lorem Ipsum

H4

Lorem Ipsum

heading-style-h4

Lorem Ipsum

H5
Lorem Ipsum
heading-style-h5
Lorem Ipsum
H6
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)

Text Stärken

text-weight-black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Ausrichtungen

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Text Stile

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

Links

All links
Text Link
text-style-link

Quotes

All quotes
Block Quote
text-style-quote

text-style-quote

Listen

Unordered List
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
unordered-list
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
Ordered List
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
ordered-list
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum

7. Buttons

Button mit Combo-Klassen.
button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-text
Button Text
button-group

8. Farben

Verwaltung wiederkehrender Text- und Hintergrundfarben

Textfarben

text-color-primary

text-color-primary

text-color-secondary

text-color-secondary

text-color-alternate

text-color-alternate

text-color-success

text-color-success

Hintergrundfarben

background-color-black
background-color-gray-dark
background-color-gray-light
background-color-gray-light
background-color-white
background-color-yellow
background-color-yellow-light
background-color-green

9. Icons

Vereinheitliche die Grössen von Icons.icon-heightLegt die Höhe von Icons fest.icon-1x1Setzt sowohl die Höhe als auch die Breite von Icons.
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Shop
Arrows
Filter
Misc

10. Nützliche Utility-Klassen

Können gebraucht werden um schneller zu arbeiten.
hide
Dieses Element ist immer ausgeblendet.
hide-tablet
Dieses Element ist auf Tablets und kleineren Geräten ausgeblendet.
hide-mobile-landscape
Dieses Element ist im mobilen Querformat und auf kleineren Geräten ausgeblendet.
hide-mobile-portrait
Dieses Element ist im mobilen Hochformat und auf kleineren Geräten ausgeblendet.
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
display-flex
z-index-1
z-index-2
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen

11. Webflow Elemente

Native Webflow-Elemente.
form_component

Beispiel eines Formulars mit Klassen und Klassenordner.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text-rich-text

Example of a form component using Folders

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.