Version:
Grid & Spacing
Grid und Spacing legen fest, in welchem Raster Oberflächen aufgebaut werden und welche Abstände dabei zwischen und innerhalb von Komponenten gelten.
Overview
Generelle Richtlinien
broken_image
Größen im Raster, Abstände zwischen Komponenten und Rasterspalten eines Layouts
Alle Komponenten und Layouts basieren auf einem 8-Pixel-Raster (px). Der Grundschritt beträgt 8 px, die meisten Stufen sind Vielfache davon: 16 px, 24 px, 32 px, 40 px, 48 px und 56 px. Dazu kommen Halb- und Viertelschritte (4 px und 2 px) sowie Zwischenstufen für kompakte Bedienelemente (12 px und 20 px). Nicht jeder Wert der Skala ist also ein Vielfaches von 8 px – aber jeder Abstand in der GUI stammt aus dieser einen Skala.
Die Skala steht auf zwei Ebenen als Design Token zur Verfügung: als Rohskala (Primitive) und als semantische Ebene.
Rohskala (Primitive)
Die Primitive tragen feste Werte, die sich durch kein Theme ändern. Komponenten und Layouts greifen nicht direkt auf sie zu.
| Token | rem | px |
|---|---|---|
--mate-spacing-000 | 0rem | 0 px |
--mate-spacing-012 | 0.125rem | 2 px |
--mate-spacing-025 | 0.25rem | 4 px |
--mate-spacing-050 | 0.50rem | 8 px |
--mate-spacing-075 | 0.75rem | 12 px |
--mate-spacing-100 | 1rem | 16 px |
--mate-spacing-125 | 1.25rem | 20 px |
--mate-spacing-150 | 1.5rem | 24 px |
--mate-spacing-200 | 2rem | 32 px |
--mate-spacing-250 | 2.5rem | 40 px |
--mate-spacing-300 | 3rem | 48 px |
--mate-spacing-350 | 3.5rem | 56 px |
Semantische Ebene
Die semantische Ebene ist die Ebene, die Komponenten und Layouts tatsächlich verwenden. Diese Tokens haben keinen festen Wert, sondern verweisen je nach aktivem Theme auf eine andere Stufe der Rohskala: auf dem Desktop auf eine kleinere, auf mobilen Geräten auf die nächstgrößere.
| Token | Desktop | Mobile |
|---|---|---|
--mate-spacing-zero | 0 | 0 |
--mate-spacing-xxxs | 2 px | 4 px |
--mate-spacing-xxs | 4 px | 8 px |
--mate-spacing-xs | 8 px | 12 px |
--mate-spacing-sm | 12 px | 16 px |
--mate-spacing-md | 16 px | 20 px |
--mate-spacing-lg | 20 px | 24 px |
--mate-spacing-xl | 24 px | 32 px |
--mate-spacing-xxl | 32 px | 40 px |
--mate-spacing-xxxl | 40 px | 48 px |
--mate-spacing-padding | 16 px | 20 px |
--mate-spacing-margin | 16 px | 20 px |
--mate-spacing-padding und --mate-spacing-margin folgen beide --mate-spacing-md. Sie tragen die beiden globalen Abstände: den Innenabstand eines Containers und den Abstand zwischen Elementen. Wo in dieser Seite von „dem globalen Abstand“ die Rede ist, sind diese 16 px auf dem Desktop bzw. 20 px auf mobilen Geräten gemeint.
Info für Dev
Verwende in eigenem CSS die semantische Ebene, also --mate-spacing-md, --mate-spacing-margin und so weiter – nicht die Rohskala. Nur dann wachsen die Abstände beim Wechsel auf das Mobile Theme automatisch mit.
Die Umschaltung erfolgt über den Theme-Namen desktop bzw. mobile. Welche Größen sich sonst noch ändern, steht unter Foundations > Themes > Mobile Theme.
Siehe dazu Mobile Theme und Design Tokens . Die Kantenmaße von Elementen, die Eckenradien und die Rahmenstärken sind eine eigene Skala und stehen unter Sizing .
Raster (Grid)
Das 8-px-Raster gilt für zwei Arten von Abständen: Die äußeren Abstände (Outer Spacings) beschreiben Abstände von Komponenten zueinander, die inneren Abstände (Inner Spacings) beschreiben Abstände innerhalb einer Komponente. Beide stammen aus derselben Skala.
broken_image
Größen im 8-px-Raster sowie Outer und Inner Spacings einer Komponente
Info für Design
Designern steht dazu in Figma ein Grid-Style / Layout Raster / 8 pt zur Verfügung.
broken_image
Figma-Grid-Styles: „Layout Raster / 8 pt“ sowie die Styles der Block-Layout-Konfigurationen
Neben dem Abstandsraster gibt es das Spaltenraster, das die horizontale Aufteilung eines Inhaltsbereichs vorgibt. Maßstab ist die Innenbreite des umgebenden Containers, nicht die Breite des Browserfensters: bis einschließlich 768 px stehen 4 Spalten zur Verfügung, über 768 px bis einschließlich 1120 px sind es 8 Spalten, über 1120 px 12 Spalten.
Aufgespannt wird dieses Raster vom Block Layout . Dort sind auch die möglichen Spaltenaufteilungen der Blöcke beschrieben.
Davon zu unterscheiden ist das Raster innerhalb eines Formulars. Das Form Layout arbeitet mit einem eigenen, feineren Raster aus 2, 4 beziehungsweise 6 Layout-Spalten je Containergröße, das ausschließlich der Anordnung der Eingabefelder dient. Beide Raster beschreiben unterschiedliche Ebenen: das Spaltenraster ordnet ganze Inhaltsbereiche, das Form-Layout-Raster die Felder innerhalb einer Feldergruppe.
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 durch den umgebenden Container gesteuert und entspricht dem globalen Abstand --mate-spacing-margin. Diese Container verfügen über eine horizontale oder vertikale Richtung und können ineinander verschachtelt werden.
broken_image
Globales Spacing zwischen Komponenten in einem vertikalen und einem horizontalen Container
Abstände von Überschriften
Überschriften definieren als einzige Komponente äußere Abstände. Siehe folgende Liste:
broken_image
Äußere Abstände der Überschriften von mate-heading-XXL bis mate-heading-XS
Die Abstände von Überschriften lassen sich optional auch deaktivieren.
Info für Dev
Die Klasse mate-text-no-margins setzt die äußeren Abstände einer Überschrift auf 0.
In Flow: TextDesign.of(heading).textNoMargins().component();
Abstände innerhalb eines Containers (Paddings)
Container können zusätzlich zum Spacing ihrer Kinder ein Padding aktivieren, welches sich rundherum erstreckt. Es entspricht dem globalen Abstand --mate-spacing-padding.
broken_image
Container mit rundum umlaufendem Padding
Info für Design
Designer sollten zur Umsetzung ein Figma Auto Layout mit folgenden Einstellungen nutzen:
broken_image
Auto Layout in vertikaler Richtung mit 16 px Abstand und 16 px Padding
Leitlinien zur Verwendung
| 👍 Do | 👎 Don't |
|---|---|
broken_image Halte einen einheitlichen Abstand im Inhaltsbereich ein. | broken_image Achte darauf keine Container zu verschachteln und dadurch das Padding zu verdoppeln. Dies führt zu Uneinheitlichkeit. |
Abstände zwischen Layouts
Das Block Layout und das Flex Layout erzeugen selbst keinen Außenabstand. Der Abstand zwischen mehreren solchen Layouts entsteht ausschließlich über den umgebenden Container und entspricht dem globalen Abstand. Ein zusätzlicher Außenabstand am Layout selbst würde die Abstände verdoppeln.
Innerhalb eines Layouts steuert das Spacing des Layouts den Abstand zwischen den enthaltenen Elementen. Es entspricht demselben globalen Abstand.
broken_image
Schematische Layouts: horizontale Abstände zwischen den Inhalten, vertikale Abstände zwischen den Layouts
Wichtig ist, ab wann diese Abstände greifen: Beim Block Layout und beim Flex Layout sind sie Opt-in und entstehen erst durch die entsprechenden Theme-Namen. Ohne sie stehen die Kinder ohne Abstand direkt nebeneinander. Beim Horizontal Layout hängt es von der verwendeten API ab: In der Flow-API ist Spacing standardmäßig aktiv, weil das Layout setSpacing selbst setzt; als Web Component entsteht der Abstand dagegen genauso wie bei den anderen Layouts erst über theme="spacing". Zusätzlich kennt das Horizontal Layout eine Margin um das Layout herum.
| Layout | Spacing zwischen den Kindern | Padding | Margin um das Layout |
|---|---|---|---|
| Block Layout | Opt-in über theme="spacing" | Opt-in über theme="padding" | nicht vorgesehen |
| Flex Layout | Opt-in über theme="spacing" | Opt-in über theme="padding" | nicht vorgesehen |
| Horizontal Layout | in Flow standardmäßig aktiv (setSpacing), als Web Component über theme="spacing" | in Flow über setPadding, als Web Component über theme="padding" | nur über die Flow-API (setMargin); im Mate-Theme gibt es dafür keinen Theme-Namen |
Für Verwendung und Verhalten der einzelnen Layouts siehe Block Layout , Flex Layout und Horizontal Layout .
Beim Block Layout kommen zum Spacing zwischen den Blöcken die Paddings innerhalb des Layouts hinzu. Zusätzlich kann der untere Abstand verdoppelt werden, um einen Block deutlicher vom nachfolgenden Inhalt abzusetzen.
broken_image | Horizontale Abstände zwischen den Inhalten, vertikale Abstände zwischen den Zeilen |
broken_image | Standardabstand zwischen den Zeilen im Vergleich zum optionalen doppelten Abstand |
Info für Dev
Der doppelte untere Abstand wird über den Theme-Namen double-bottom-padding gesetzt und beträgt 32 px auf dem Desktop bzw. 40 px auf mobilen Geräten (--mate-spacing-xxl). Er wirkt auch dann, wenn kein Padding aktiviert ist.
In Flow: blockLayout.setDoubleBottomPadding(true);
Info für Design
Damit der globale vertikale Abstand zwischen mehreren Layouts erhalten bleibt, gruppierst du die einzelnen Frames in Figma am einfachsten in einem übergeordneten Frame mit einem Auto Layout in vertikaler Richtung, 16 px Abstand und ohne Padding.
broken_image
Auto-Layout-Einstellungen des gruppierenden Frames
Die Grid-Styles für die Rasterspalten und die Auto-Layout-Einstellungen der Blöcke selbst sind unter Block Layout beschrieben.
Barrierefreiheit
Abstand ist eine visuelle Gruppierung, keine semantische. Wenn Inhalte über ihren Abstand als zusammengehörig erkennbar sind, muss diese Zusammengehörigkeit zusätzlich im Markup ausgedrückt werden – etwa über eine Überschrift, eine Liste, fieldset mit legend oder eine Landmark wie main oder nav. Wer die Seite mit einem Screenreader liest, bekommt vom Abstand selbst nichts mit.
Abstände dürfen nicht dazu verwendet werden, Inhalte auf eine feste Breite zu zwingen. Bei starkem Zoom oder auf schmalen Viewports müssen Inhalte umbrechen, statt horizontales Scrollen zu erzwingen. Die Layouts unterstützen das: Das Block Layout wechselt anhand der Breite seines Containers die Anzahl der Rasterspalten, das Flex Layout bricht seine Kinder in die nächste Zeile um. Eigene feste Breiten oder harte Pixelabstände können dieses Verhalten aushebeln und sind deshalb zu vermeiden.
Auf touchbedienten Geräten wächst die gesamte Spacing-Skala eine Stufe, damit Bedienelemente die empfohlene Mindestgröße für Touch-Ziele erreichen und genügend Abstand zueinander haben. Diese Vergrößerung passiert automatisch, sofern Abstände über die semantische Token-Ebene gesetzt werden. Siehe dazu Mobile Theme . Weitere Grundlagen stehen unter Accessibility .
Layout-Komponenten
Das Grundgerüst zum Layouten von Anwendungen wird durch die Application Bar , den Global Header und das App Layout bereitgestellt. Es umfasst Titelleiste, Navigation Panel, Navigationsleiste, Inhaltsbereich sowie die Funktionsleiste.
broken_image
Grundgerüst einer Anwendung
Da das Grundgerüst bereits durch diese Komponenten definiert ist, ist in der praktischen Arbeit vor allem der richtige Umgang mit den Layouts im Inhaltsbereich relevant. Die dafür verfügbaren Komponenten sind unter Components > Layouts beschrieben:
- App Layout Bildet die Grundstruktur der Anwendung aus Header, Navigation und Inhaltsbereich.
- Block Layout Ordnet große Inhaltsbereiche responsiv in Blöcken nebeneinander an.
- Flex Layout Reiht Inhalte in einer Zeile aneinander und bricht bei Bedarf um.
- Form Klammert ein Formular und verantwortet formularweite Zustände wie die Fehlerliste.
- Form Layout Strukturiert eine Feldergruppe innerhalb eines Formulars.
- Horizontal Layout Ordnet Inhalte nebeneinander in einer Zeile an.
- Master Detail Layout Stellt Übersicht und Detail nebeneinander dar.
- Split Layout Unterteilt einen Bereich in zwei verschiebbare Teilbereiche.