Abstände

Hauptkapitel
Designsystem
Unterkapitel
Grundlagen
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung

Basisgrösse

Die Basisgrösse entspricht einer Grundeinheit von 8 Pixel. Die vertikalen und auch spezifische, horizontale Abstände von Interface-Elementen, sind ein Vielfaches der Basisgrösse.

Verwendung

Standard-Abstände

Um einheitliche Abstände innerhalb einer Applikation zu gewährleisten, sind Grundgrössen definiert. In der Gestaltung und Umsetzung achten wir darauf, jeweils diese Grunddefinitionen zu verwenden. Diese Grössen sind im Frontend als Variablen definiert.

Responsive Abstände

Abstände zwischen Elementen wachsen mit der Grösse des Viewports. Wie sich einzelne Abstände über die verschiedenen Breakpoints hinweg verhalten, ist in Abstandskurven definiert. Diese Kurven geben vor, wie stark sich ein Abstand verändert. Eine Komponente hat also nicht einfach einen fixen Abstand zur nächsten, sondern ist einer dieser Abstandskurven zugewiesen und skaliert dann entsprechend auf den unterschiedlichen Geräten.

Fixe Abstände

Es sind auch Abstände zulässig, die sich nicht responsive verhalten. Diese verwenden wir primär in Elementen, die nicht in sich skalieren sollen. Beispiele dafür sind Buttons oder Eingabefelder.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch