GRID, SPACING & LAYOUT

Overview

Generelle Richtlinien

Alle Komponenten und Layouts basieren auf dem 8-Pixel (px) Grid. Das bedeutet, dass alle Größen und Abstände in der GUI aus vielfachen von 8 Pixel bestehen, z.B. 16 px (82), 24, px (83) oder auch 4 px (8*0,5). Siehe folgende Design Tokens:

C--mate-spacing-000: 0rem;--mate-spacing-012: 0.125rem;--mate-spacing-025: 0.25rem;--mate-spacing-050: 0.50rem;--mate-spacing-075: 0.75rem;--mate-spacing-100: 1rem;--mate-spacing-125: 1.25rem;--mate-spacing-150: 1.5rem;--mate-spacing-200: 2rem;--mate-spacing-250: 2.5rem;--mate-spacing-300: 3rem;--mate-spacing-350: 3.5rem;

Raster (Grid)

Wie bereits im vorherigen Abschnitt beschrieben, basieren alle Komponenten und Layouts auf dem 8-Pixel (px) Grid. Die äußeren Abstände (Outer Spacings) beschreiben Abstände von Komponenten zueinander. Die inneren Abstände (Inner Spacings) beschreiben Abstände innerhalb von Komponenten.

Info

Designern steht dazu in Figma ein Grid-Style / Layout Raster / 8 pt zur Verfügung. 

Abstände (Spacings)

Abstände zwischen Komponenten

Komponenten definieren selbst kein Outer Spacing. Eine Ausnahme dazu bilden lediglich die Überschriften H1-H6 . Das Spacing zwischen Komponenten wird global  (--mate-spacing-100: 1rem = 16px) durch Container gesteuert. Diese Container verfügen über eine horizontale oder vertikale Richtung und können ineinander verschachtelt werden.

Abstände von Überschriften

Überschriften definieren als einzige Komponente äußere Abstände. Siehe folgende Liste:

Die Abstände von Überschriften lassen sich optional auch deaktivieren.

Info für Dev

Siehe Variante: text-no-margins im Showcase.

Abstände innerhalb eines Containers (Paddings)

Container können zueinander zusätzlich zum Spacing ihrer Kinder ein Padding aktivieren, welches sich rundherum erstreckt.

Info

Designer sollten zur Umsetzung ein Figma Auto Layout mit folgenden Einstellungen nutzen:

Leitlinien zur Verwendung

👍 Do	👎 Don't
Halte einen einheitlichen Abstand im Inhaltsbereich ein.	Achte darauf keine Container zu verschachteln und dadurch das Padding zu verdoppeln. Dies führt zu Uneinheitlichkeit.

Abstände zwischen Layouts

Flex Layout (früher Floating Layout)

SEIT VERSION: 4.0.0

Nur noch das Flex Layout anstatt dem Floating Layout verwenden. Das Floating Layout ist deprecated.

Für weitere Hinweise zur Verwendung und zum Verhalten siehe Layouts weiter unten.

Block Layout

Info für Dev

Siehe Variante: double-padding im Showcase.

Für weitere Hinweise zur Verwendung und zum Verhalten siehe Layouts weiter unten.

Layouts

Das Grundgerüst zum Layouten von Anwendungen wird durch die Application Bar , dem Global Header und das Product Layout bereitgestellt. Wie in nachfolgendem Bild dargestellt, sind Im Product Layout die Elemente Titelleiste, Navigationspanel, Navigationsleiste, Inhaltsbereich sowie die Funktionsleiste enthalten.

Product Layout

Da das Layout in den oben genannten Komponenten bereits definiert ist, ist in der praktischen Arbeit vor allem der richtige Umgang mit den verschiedenen Layouts im Inhaltsbereich interessant. Die folgenden Best-Practices und Tipps für Entwickler helfen dabei zu einheitlichen und klaren Layouts zu kommen.

Flex Layout (früher Floating Layout)

SEIT VERSION: 4.0.0

Nur noch das Flex Layout anstatt dem Floating Layout verwenden. Das Floating Layout ist deprecated.

Das Flex Layout reiht die Inhalte horizontal hintereinander ein. Passen die Inhalte nicht mehr in eine Zeile, dann brechen diese einfach in die nächste Zeile um.

Flex Layout bei dem alle Inhalte in eine Zeile passen

Flex Layout mit Zeilenumbruch

Das Layout eignet sich besonders dazu Höhe im Layout zu sparen. Daher wird es z.B. auch in der Kopfzeile der Objektseite genutzt.

Info

Designer nutzen dazu in Figma am einfachsten in den Frames Auto Layout mit folgenden Einstellungen: 

Der vertikale Abstand ist weiterhin auf 16 Pixel eingestellt.

Block Layout

Inhalte wie z.B. Feldergruppen in Formularen, Diagramme oder Name-Wert-Facetten sollen in sinnvollen Einheiten bzw. Blöcken zusammengefasst werden. Das Block Layout hilft dabei, diese Inhalte einheitlich zu layouten. Das Block Layout richtet sich an den verfügbaren Container-Größen (Small, Medium mind. 768 Px, Large mind.1120 Px) aus und setzt damit die Inhalte responsiv um.

Siehe dir die folgenden Schaubilder an, um die zur Verfügung stehenden Block Layouts und ihr responsives Verhalten kennenzulernen.

	Container Größe L
	Container Größe M
	Container Größe S

Info

Designern stehen dazu in Figma folgende  Grid-Styles zur Verfügung. 

Frames sollten zudem folgende Auto Layout Einstellungen haben:

Für den vertikalen Abstand zwischen den Block Layouts sollte der globale Abstand von 16 px eingestellt bleiben. Dazu ist es am einfachsten die Frames wiederum in einen Frame mit folgenden Einstellungen zu gruppieren:

Siehe auch die folgende Anwendungsbeispiele für die jeweiligen Layouts.

Block Layout 4-4-4

	Block Layout 4-4-4 erstes Beispiel
	Block Layout 4-4-4 zweites Beispiel

Block Layout 6-6

Block Layout 6-6 Beispiel

Block Layout 4-8

Block Layout 4-8 Beispiel

Block Layout 12

Block Layout 12 Beispiel

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/pattern-block-layout--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=pattern%252Fblock-layout