1. Verwendung von Klassen
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.
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.
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.
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.
Richtlinien für Klassennamen
Sinnvolle Namen wählen
- "Welchem Zweck dient diese Klasse im Projekt?"
- "Wie kann ich den Kontext möglichst klar vermitteln?"
Keine übermässigen Abkürzungen verwenden
Klassen-Ordner
- Klassen können mit Unterstrichen in "Ordner" aufgeteilt werden.
- Diese Struktur wird auch für die Finsweet-Browsererweiterung genutzt.
Von Allgemein zu Spezifisch
- Diese Klasse formatiert ein Textelement.
- Diese Klasse bestimmt die Textgrösse.
- Diese Klasse setzt die Textgröße auf "gross".
Alternativen zum Klassenstapeln
Combo-Klassen zusammenfassen
Ineinander verschachteln
2. Verwende REM
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 |
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
- Globales benutzerdefiniertes CSS für das gesamte Projekt.
- Organisiert alle benutzerdefinierten CSS-Snippets an einem zentralen einfach zugänglichen Ort.
- Verwende den <header>-HTML-Tag für eine barrierefreie Struktur.
- Das <nav>-Element enthält eine Liste von Navigationslinks.
- Enthält den spezifischen Seiteninhalt.
- Verwende den <main>-HTML-Tag für eine barrierefreie Struktur.
- Umschliesst einen gesamten Inhaltsbereich.
- Ermöglicht auch die Anpassung der Hintergrundfarbe eines ganzen Bereichs.
- Steuert den horizontalen Abstand der gesamten Seite.
- Bestimmt das Layout der Inhalte.
- xx
- xx
- xx
- xx
- Verwende den <footer>-HTML-Tag für eine barrierefreie Struktur.
Grids und Spalten
Kann auf <divs> angewendet werden um grids und spalten zu erstellen.
4. Spacing Strategie
Spacers
Max widths
Benutzerdefinierte Abstandsklassen
Beispiel
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
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
6. Weitere Typographie Klassen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Grössen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1.5rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1.25rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (1rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. (0.85rem)
Text Stärken
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Ausrichtungen
text-align-left
text-align-center
text-align-right
Text Stile
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
Links
text-style-link
Quotes
Block Quote
text-style-quote
Listen
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
7. Buttons
8. Farben
Textfarben
text-color-primary
text-color-secondary
text-color-alternate
text-color-success
Hintergrundfarben
9. Icons
10. Nützliche Utility-Klassen
11. Webflow Elemente
Beispiel eines Formulars mit Klassen und Klassenordner.
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.
- 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.
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.