Block Layout

Das Block Layout ordnet große Inhaltsbereiche einer Seite spaltenweise nebeneinander an und stapelt sie bei geringerer Breite automatisch untereinander.

Overview

Intro

Das Block Layout ist die äußere Struktur eines Inhaltsbereichs. Es fasst Inhalte wie Feldergruppen, Diagramme oder Name-Wert-Facetten zu sinnvollen Blöcken zusammen und verteilt diese Blöcke auf ein 4/8/12-Spalten-Raster. Damit entsteht über alle Anwendungen hinweg ein einheitlicher Seitenaufbau.

Das Layout reagiert nicht auf die Fenstergröße, sondern auf die Breite des umgebenden Containers. Grundlage dafür sind Container-Queries. Ein Block Layout in einem schmalen Bereich einer Seite verhält sich deshalb genauso wie dasselbe Layout auf einem kleinen Gerät.

broken_image

Figma

Alle fünf Konfigurationen des Block Layouts in der Container-Größe L

Verwendung

👍 Do

👎 Don't

...wenn große Inhaltsbereiche wie Feldergruppen, Diagramme oder Name-Wert-Facetten nebeneinander angeordnet werden sollen. ...wenn sich diese Bereiche abhängig von der verfügbaren Breite automatisch untereinander stapeln sollen. ...wenn innerhalb einer Form mehrere Form Layouts und ein begleitender Callout nebeneinander stehen sollen. ...wenn mehrere Bereiche einer Seite ein einheitliches, wiederkehrendes Spaltenraster erhalten sollen.

...wenn einzelne Eingabefelder innerhalb eines Formulars angeordnet werden sollen. Nutze hierfür das Form Layout . ...wenn mehrere zusammengehörige Elemente lediglich in einer Zeile stehen sollen. Nutze hierfür das Horizontal Layout . ...wenn eine Reihe von Elementen frei umbrechen soll. Nutze hierfür das Flex Layout . ...wenn es um die Grundstruktur der ganzen Anwendung geht, also Header, Navigation Panel und Content-Bereich. Verwende hierfür das App Layout . ...wenn zwei Bereiche nebeneinander oder übereinander liegen und deren Größe durch den Nutzer veränderbar sein soll. Nutze hierfür das Split Layout .

Guidelines

Aufbau

Das Block Layout besteht aus drei Ebenen:

• Ein umgebender Container, der die Bezugsbreite für das responsive Verhalten festlegt.
• Das Block Layout selbst, das ein Spaltenraster aufspannt.
• Die Blöcke als direkte Kind-Elemente, die jeweils eine feste Anzahl an Rasterspalten belegen.

Der umgebende Container ist verbindlich. Ohne ihn greifen die Container-Queries nicht und das Layout bleibt dauerhaft in der Konfiguration für die Größe S.

Container nicht vergessen

Das Block Layout muss von einem Element mit der Klasse block-container umschlossen sein. Nur dieses Element definiert den Container, auf den sich die Größen S, M und L beziehen. Fehlt es, werden alle Blöcke untereinander in voller Breite dargestellt.

Nicht jede Überschrift und nicht jeder Absatz braucht ein eigenes Block Layout. Abschnittsüberschriften einer Seite stehen in der Regel über der vollen Breite und benötigen kein Block Layout, wie das Anwendungsbeispiel weiter unten zeigt.

Container-Größen

Maßstab ist immer die Innenbreite des umgebenden Containers, nicht die Breite des Browserfensters. Bereiche wie ein aufgeklapptes Menü, eine Sidebar oder ein zweiter Bereich eines Split Layouts verkleinern den Container und können damit die Größe wechseln lassen.

Größe	Container-Breite	Rasterspalten
S	bis einschließlich 768px	4
M	über 768px bis einschließlich 1120px	8
L	über 1120px	12

Das Bild in der Einleitung dieser Seite zeigt die Container-Größe L. Die folgenden Bilder zeigen dieselben Konfigurationen in den Größen M und S.

broken_image

Figma

Dieselben Konfigurationen in der Container-Größe M

broken_image

Figma

Dieselben Konfigurationen in der Container-Größe S

Anzahl der Blöcke

Jede Konfiguration hat eine feste, nicht erweiterbare Anzahl an Blöcken. Überzählige Kind-Elemente werden nicht umbrochen, sondern vollständig ausgeblendet.

Hartes Limit für die Anzahl der Blöcke

Überzählige Kind-Elemente werden per display: none ausgeblendet und sind damit weder sichtbar noch bedienbar.
4-4-4 zeigt maximal 3 Blöcke, ab dem 4. Kind wird ausgeblendet.
6-6, 8-4 und 4-8 zeigen maximal 2 Blöcke, ab dem 3. Kind wird ausgeblendet.
12 zeigt maximal 1 Block, ab dem 2. Kind wird ausgeblendet.
Werden mehr Blöcke benötigt, sind mehrere Block Layouts untereinander zu verwenden.

Umsetzung in Figma

Für Designerinnen und Designer stehen die Block Layouts als Grid-Styles bereit. Frames werden mit Auto Layout aufgebaut.

Info für Design

In Figma stehen unter Grid Styles das Layout Raster 8 pt sowie die Grid-Styles Block Layout/4-4-4 (Large, Medium, Small) und Block Layout/6-6 (Large and Medium, Small) zur Verfügung.

broken_image

Figma

Der Frame eines Block Layouts erhält ein horizontales Auto Layout ohne Innenabstand:

broken_image

Figma

Für den vertikalen Abstand zwischen mehreren Block Layouts gilt der globale Abstand von 16 px; die Auto-Layout-Einstellungen des gruppierenden Frames sind unter Grid & Spacing beschrieben.

Der horizontale Abstand von 48 px im Figma-Frame ist der verbindliche Abstand zwischen zwei Blöcken, also zwischen zwei fachlich getrennten Inhaltsbereichen. Die Implementierung setzt zwischen den Blöcken derzeit noch --mate-spacing-margin, also 16 px auf dem Desktop und 20 px auf mobilen Geräten; die Anpassung auf 48 px ist entschieden und wird nachgezogen. Dieselbe Unterscheidung gilt beim Form Layout : 48 px trennen zwei Feldergruppen, 16 px zwei Felder innerhalb einer Feldergruppe.

Layout Konfigurationen

Es stehen fünf Konfigurationen zur Verfügung. Sie unterscheiden sich in der Anzahl der Blöcke und in der Breitenverteilung in der Container-Größe L. In den Größen M und S wird die Aufteilung schrittweise reduziert.

4-4-4

Die Standardkonfiguration mit drei gleichrangigen Blöcken.

• L: drei gleich breite Blöcke, jeder Block belegt 4 von 12 Rasterspalten.
• M: Block 1 und Block 2 stehen nebeneinander mit je 4 von 8 Rasterspalten, Block 3 steht darunter über die volle Breite.
• S: alle drei Blöcke stehen untereinander in voller Breite.

Im ersten Beispiel besteht die Formularseite aus drei aufeinanderfolgenden Block Layouts 4-4-4. Die Abschnittsüberschriften dazwischen stehen über die volle Breite und benötigen selbst kein Block Layout. Das zweite Beispiel zeigt dieselbe Konfiguration mit Name-Wert-Facetten auf einer Objektseite.

broken_image

Figma

Formularseite mit drei Block Layouts 4-4-4; die Überschriften dazwischen benötigen kein Block Layout

broken_image

Figma

Objektseite: Name-Wert-Facetten einer Adresse in einem Block Layout 4-4-4

6-6

Zwei gleich breite Blöcke, geeignet für eine ausgewogene Gegenüberstellung.

• L: zwei halb breite Blöcke, jeder Block belegt 6 von 12 Rasterspalten.
• M: beide Blöcke stehen weiterhin nebeneinander mit je 4 von 8 Rasterspalten.
• S: beide Blöcke stehen untereinander in voller Breite.

broken_image

Figma

Vergleichsansicht: die Tabellen „Vorher“ und „Nachher“ in einem Block Layout 6-6

8-4

Zwei unterschiedlich breite Blöcke mit dem Schwerpunkt links, zum Beispiel Hauptinhalt links und ergänzende Informationen rechts.

• L: Block 1 belegt 8 von 12 Rasterspalten, Block 2 belegt 4 von 12 Rasterspalten.
• M: beide Blöcke stehen untereinander, jeder in voller Breite.
• S: beide Blöcke stehen untereinander in voller Breite.

4-8

Das Gegenstück zu 8-4 mit dem Schwerpunkt rechts, zum Beispiel eine schmale Übersicht links und der Hauptinhalt rechts.

• L: Block 1 belegt 4 von 12 Rasterspalten, Block 2 belegt 8 von 12 Rasterspalten.
• M: beide Blöcke stehen untereinander, jeder in voller Breite.
• S: beide Blöcke stehen untereinander in voller Breite.

broken_image

Figma

Saldo-Ansicht: je ein Block Layout 4-8 mit Name-Wert-Facetten links und Diagramm rechts, dazwischen eine Zwischenüberschrift in einem Block Layout 12

12

Ein einzelner Block über die volle Breite. Diese Konfiguration wird verwendet, wenn ein Bereich bewusst nicht geteilt werden soll, sich aber trotzdem in das gemeinsame Raster und die gemeinsamen Abstände einfügen soll.

• L: der Block belegt alle 12 Rasterspalten.
• M: der Block belegt alle 8 Rasterspalten.
• S: der Block belegt alle 4 Rasterspalten.

broken_image

Figma

Objektseite: eine Tabelle über die volle Breite in einem Block Layout 12

Abstände

Die Abstände sind der zentrale Beitrag des Block Layouts zu einem einheitlichen Seitenbild. Sie werden nicht frei gesetzt, sondern über Design Tokens gesteuert, die auf mobilen Geräten automatisch größer werden.

Abstand zwischen den Blöcken

Der Abstand zwischen den Blöcken wird über die Einstellung spacing aktiviert. Sie setzt den horizontalen und den vertikalen Abstand gleichzeitig, also row-gap und column-gap.

Einstellung	Token	Desktop	Mobil
spacing	--mate-spacing-margin	16 px	20 px

Damit ist der Abstand zwischen zwei nebeneinander liegenden Blöcken identisch mit dem Abstand zwischen zwei untereinander liegenden Blöcken, die durch einen Umbruch in der Größe M oder S entstehen.

broken_image

Figma

Horizontale Abstände zwischen den Inhalten und vertikale Abstände zwischen den Zeilen

Innenabstand

Der Innenabstand wird über die Einstellung padding aktiviert und wirkt oben, links, rechts und unten. Er grenzt den Inhalt des Block Layouts von seiner Umgebung ab.

Einstellung	Token	Desktop	Mobil
padding	--mate-spacing-padding	16 px	20 px

Doppelter unterer Innenabstand

Für den Abschluss eines Inhaltsbereichs steht ein vergrößerter unterer Innenabstand zur Verfügung. Er wird über die Einstellung double-bottom-padding aktiviert.

Einstellung	Token	Desktop	Mobil
double-bottom-padding	--mate-spacing-xxl	32 px	40 px

Zwei Regeln sind dabei zu beachten:

• Ist double-bottom-padding gesetzt, ersetzt es den unteren Innenabstand aus padding vollständig. Beide Werte addieren sich nicht.
• double-bottom-padding wirkt unabhängig davon, ob padding gesetzt ist. Ohne padding entsteht also ein Block Layout, das ausschließlich unten einen Innenabstand besitzt.

broken_image

Figma

Standardabstand zwischen den Zeilen und optionaler doppelter Abstand darunter

Abstand zwischen mehreren Block Layouts

Das Block Layout erzeugt selbst keinen Außenabstand. Werden mehrere Block Layouts untereinander gestellt, entsteht der vertikale Abstand ausschließlich über das umgebende Layout, das die Block Layouts vertikal stapelt. Dieses Layout ist nicht mit dem block-container zu verwechseln: Der block-container stellt ausschließlich den Bezugsrahmen für die Container-Queries her und setzt keinen Abstand. Für das vertikale Stapeln mit dem globalen Abstand von 16 px auf dem Desktop und 20 px auf mobilen Geräten eignet sich <vaadin-vertical-layout theme="spacing"> aus @vaadin/vertical-layout; die Einstellung spacing setzt dort gap: var(--mate-spacing-margin), siehe Grid & Spacing . Ein Außenabstand darf nicht zusätzlich am Block Layout selbst gesetzt werden, weil sich die Abstände sonst verdoppeln.

Ein Block Layout mit der Konfiguration 12 ist dafür kein Ersatz: Es zeigt nur ein einziges Kind-Element und blendet ab dem zweiten Kind alles aus. Mehrere Bereiche untereinander entstehen deshalb immer aus mehreren Block Layouts innerhalb eines vertikal stapelnden Layouts, nicht aus mehreren Kind-Elementen eines Block Layouts 12.

Abstand unter den Feldern innerhalb eines Form Layouts

Innerhalb einer Feldergruppe stammt der Abstand nicht vom Block Layout, sondern vom Form Layout . Dessen Einstellung spacing setzt --mate-spacing-margin und damit 16 px auf dem Desktop und 20 px auf mobilen Geräten, sowohl zwischen zwei nebeneinander stehenden Feldern als auch unter den Feldern. Dieser Abstand ist bewusst kleiner als der Abstand zwischen zwei Blöcken: Er hält die Felder einer Gruppe zusammen, während die 48 px zwischen den Blöcken die Gruppen voneinander trennen. Solange das Block Layout noch --mate-spacing-margin verwendet, sind beide Abstände in der Umsetzung gleich groß.

Info für Dev

Die Einstellungen spacing, padding und double-bottom-padding werden als zusätzliche Theme-Namen am Block Layout gesetzt, zum Beispiel theme="block-layout spacing double-bottom-padding". In Flow stehen dafür setSpacing(true) und setDoubleBottomPadding(true) zur Verfügung.

Zusammenspiel mit Form, Form Layout und Callout

Im Formularkontext hat das Block Layout genau eine Aufgabe: Es ordnet die Feldergruppen und begleitende Kontextinhalte nebeneinander an. Die Struktur der einzelnen Eingabefelder übernimmt es nicht.

Die Rollen verteilen sich dabei so:

• Die Form klammert das gesamte Formular und verantwortet formularweite Zustände wie die Fehlerliste am Anfang des Formulars.
• Das Block Layout ordnet die Abschnitte des Formulars nebeneinander an.
• Jedes Form Layout bildet eine logische Feldergruppe, zum Beispiel Person, Adresse oder Bankverbindung.
• Ein Callout kann als zusätzliche Kontextspalte neben den Feldergruppen stehen.

Ein Block Layout ist dabei kein Pflichtbestandteil eines Formulars. Ein einspaltiges Formular enthält seine Form Layouts direkt in der Form. Erst wenn mehrere Bereiche nebeneinander stehen sollen, kommt das Block Layout dazwischen.

Für die Spaltenanzahl gilt als Mate-Vorgabe: Es sind maximal zwei Formularspalten mit Eingabefeldern vorgesehen. Eine dritte Spalte soll ausschließlich Kontextinhalte wie einen Callout enthalten und zählt dann nicht als Formularspalte. Mate-konform ist also die Anordnung Formularspalte, Formularspalte, Info-Callout. Nicht Mate-konform sind drei Formularspalten mit Eingabefeldern. Technisch erzwungen wird das nicht: Das Block Layout kennt den Inhalt seiner Blöcke nicht. Die Einhaltung dieser Vorgabe liegt in der Verantwortung der Anwendung.

Das folgende Beispiel setzt @mate/theme für die Layouts, @mate/form für <mate-form>, @mate/callout für <mate-callout> sowie @vaadin/text-field und @vaadin/date-picker für die Eingabefelder voraus. Die Pakete müssen installiert und importiert sein.

<mate-form>
  <div class="block-container">
    <div theme="block-layout spacing">
      <div theme="form-layout spacing">
        <h5>Person</h5>
        <vaadin-text-field label="Vorname"></vaadin-text-field>
        <vaadin-text-field label="Nachname"></vaadin-text-field>
        <vaadin-text-field label="Personalnummer"></vaadin-text-field>
        <vaadin-date-picker label="Einstellungsdatum"></vaadin-date-picker>
      </div>
      <div theme="form-layout spacing">
        <h5>Adresse</h5>
        <vaadin-text-field label="Straße" cols="3"></vaadin-text-field>
        <vaadin-text-field label="Hausnummer" cols="1"></vaadin-text-field>
        <vaadin-text-field label="Postleitzahl"></vaadin-text-field>
        <vaadin-text-field label="Ort"></vaadin-text-field>
      </div>
      <mate-callout theme="info" title-text="Hinweis">
        Erfassen Sie hier die aktuellen Personal- und Adressdaten der Person.
      </mate-callout>
    </div>
  </div>
</mate-form>

Weitere fachliche Regeln zum Aufbau von Formularen finden sich unter Formulare .

Barrierefreiheit

Das Block Layout ist kein semantischer Seitenbereich. Es erzeugt weder eine Überschriftenstruktur noch eine Landmark. Für Hauptbereiche der Anwendung sind deshalb ergänzend HTML-Landmarks wie header, nav oder main zu verwenden, weil Layout-Komponenten allein diese Orientierung für Screenreader nicht bereitstellen.

Ausgeblendete Blöcke gehen vollständig verloren

Überzählige Kind-Elemente werden per display: none ausgeblendet. Solche Elemente sind nicht nur unsichtbar, sondern auch aus dem Accessibility Tree entfernt: Screenreader lesen sie nicht vor, die Tastaturnavigation erreicht sie nicht, und die Suchfunktion des Browsers findet sie nicht. Der Inhalt verschwindet also ohne jeden Hinweis. Prüfe deshalb bei dynamisch erzeugten Blöcken, ob ihre Anzahl zur gewählten Konfiguration passt, und verteile größere Mengen auf mehrere Block Layouts untereinander.

Reihenfolge im Dokument

Die Vorlese- und die Fokusreihenfolge folgen der Reihenfolge im Dokument, nicht der sichtbaren Anordnung. Die sichtbare Anordnung ändert sich zudem mit der Container-Größe: In der Konfiguration 4-4-4 stehen in der Größe L drei Blöcke nebeneinander, in der Größe M rutscht der dritte Block unter die ersten beiden und in der Größe S stehen alle Blöcke untereinander. Die Reihenfolge im Dokument muss deshalb für sich genommen inhaltlich sinnvoll sein. Blöcke dürfen nicht so angeordnet werden, dass sich der Sinnzusammenhang erst aus der visuellen Anordnung in einer bestimmten Container-Größe ergibt.

Vergrößerung und Reflow

Das Block Layout erfüllt die Anforderung an Reflow, weil es sich an der Container-Breite orientiert: Bei starker Vergrößerung, etwa 400 % Zoom, wird der Container schmaler, das Layout wechselt in die Größe S und stellt alle Blöcke einspaltig untereinander dar. Die Rasterspalten sind als minmax(0, 1fr) definiert und wachsen deshalb nicht über den Container hinaus. Inhalte innerhalb eines Blocks, die nicht schmaler werden können, zum Beispiel breite Tabellen oder feste Pixelbreiten, müssen selbst für Umbruch oder Scrollen sorgen.

Inhalte der Blöcke

Innerhalb der Blöcke bringen die enthaltenen Komponenten ihre barrierefreien Namen und Zustände selbst mit, zum Beispiel über sichtbare Beschriftungen oder ein aria-label bei reinen Icon-Aktionen. Das betrifft nicht das Layout selbst, sondern die darin platzierten Komponenten.

Develop Web Components

Das Block Layout ist Teil des Themes und wird über @mate/theme installiert. Ein eigenes Paket und ein eigener Import sind nicht erforderlich. Die Snippets aller fünf Konfigurationen stehen in den Beispielen weiter unten auf dieser Seite.

Der umgebende Container ist kein reines Markup-Beiwerk: Die Klasse block-container setzt container: block / inline-size. Damit erhält das Element den Container-Namen block, auf den sich die Container-Queries des Themes beziehen. Fehlt dieses Element, greifen die Queries nicht, das Raster bleibt bei vier Spalten und jeder Block belegt alle vier davon.

Die Konfiguration wird über zusätzliche Theme-Namen gesetzt: layout-6-6, layout-8-4, layout-4-8 und layout-12. Ohne Angabe gilt 4-4-4. Die Einstellungen spacing, padding und double-bottom-padding lassen sich frei damit kombinieren:

<div class="block-container">
  <div theme="block-layout spacing padding double-bottom-padding layout-6-6">
    <div>Block 1</div>
    <div>Block 2</div>
  </div>
</div>

Die Klasse block ist kein Theme-Bestandteil

In den Beispiel-Snippets tragen die Blöcke teilweise die Klasse block. Sie dient nur dazu, die Blöcke in der Demo sichtbar zu machen; im Theme existiert keine Regel dafür. In der eigenen Anwendung kann sie weggelassen oder durch eigenes Styling ersetzt werden.

Develop Vue

npm i @mate-vue/block-layout

import { MateBlockLayout } from '@mate-vue/block-layout';

<MateBlockLayout theme="spacing layout-6-6">
  <div>Block 1</div>
  <div>Block 2</div>
</MateBlockLayout>

Die Implementierung in Vue kann innerhalb des AKDB Netzwerks im Vue Showcase betrachtet werden.

Offener Punkt: Container in Vue

Verifiziert ist: Bei den Web Components ist das umgebende Element mit der Klasse block-container erforderlich, in Flow liefert BlockLayout.createContainer(...) diesen Container. Das Vue-Beispiel zeigt MateBlockLayout dagegen ohne separaten Wrapper. Ob die Vue-Komponente den Container selbst setzt, ist nicht dokumentiert. Bis zur Klärung sollte in Vue geprüft werden, ob das Layout tatsächlich auf die Container-Größe reagiert, und andernfalls ein Element mit der Klasse block-container ergänzt werden.

Develop Flow

<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-flex-layout-flow</artifactId>
</dependency>

import com.vaadin.flow.component.html.Div;
import de.mate_ds.flow.component.flexlayout.BlockLayout;
import de.mate_ds.flow.component.flexlayout.BlockLayoutVariant;

BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.setDoubleBottomPadding(true);
blockLayout.addThemeName(BlockLayoutVariant.LAYOUT_8_4.getVariantName());

blockLayout.add(firstBlock, secondBlock);

Div container = BlockLayout.createContainer(blockLayout);

BlockLayout.createContainer erzeugt den erforderlichen umgebenden Container. Als Varianten stehen LAYOUT_8_4, LAYOUT_4_8, LAYOUT_6_6 und LAYOUT_12 zur Verfügung.

Der Showcase ist innerhalb des AKDB Netzwerks unter Flow Showcase zu finden.