# Layout

Das Layout organisiert die Benutzeroberfläche in einer logischen und
hierarchischen Struktur, um die Aufmerksamkeit des Users gezielt zu lenken.
Dabei werden Elemente wie Header, Navigation und Content-Bereich berücksichtigt.

---

# Best Practices

Ein Layout fügt verschiedene Elemente der Benutzeroberfläche zu einer logischen
Struktur zusammen. Die folgenden Punkte sind hilfreich, um ein gutes Layout zu
erstellen:

- Ein Layout sollte den Fokus immer auf die Aufgaben des Users legen.
- Ein konsistentes Layout hilft dem User, die Website schneller zu verstehen, da
  nicht ständig neue Layouts erlernt werden müssen.
- Der Fokus des Layouts sollte auf dem Content-Bereich liegen, da hier die
  Hauptaktionen des Users liegen. Achte hier besonders auf die strukturelle
  Hierarchie und die inhaltlichen Beziehungen des Contents.
- Ein Layout sollte immer responsiv sein, damit die Benutzeroberfläche auch auf
  kleineren Bildschirmen funktioniert. Im Layout ist grade das Zusammenspiel von
  Header, Side-Navigation und Content-Bereich für die Responsivität relevant.

---

# Genereller Aufbau

Grob lassen sich die meisten Layouts, die mit Flow erstellt werden können, in 4
Bereiche einteilen: **Header**, **Side-Navigation**, **Content** und
**Overlay**. Das Layout innerhalb dieser Bereiche wird durch verschiedene
Components und deren Komposition bestimmt. In unseren Components ist das
[Spacing](/02-foundations/02-structure/02-spacing) bereits integriert.

Verschiedene Layouts mit Code zum Kopieren finden sich unter Code Templates.

  

**ℹ️ Info**

Grobes Layout einer Seite. Eingeteilt in Header-, Side-Navigation- und
    Content-Bereich.

```tsx
export default () => {
  const area: React.CSSProperties = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "var(--size-px--xs)",
    backgroundColor:
      "var(--info-soft-background-color--default)",
    border: "1px dashed var(--info-soft-content-color)",
    borderRadius: "var(--corner-radius--s)",
  };

  const vertical: React.CSSProperties = {
    writingMode: "vertical-rl",
    transform: "rotate(180deg)",
  };

  const layout: React.CSSProperties = {
    alignSelf: "stretch",
    height: "280px",
    display: "grid",
    gridTemplateAreas: `
      'header header'
      'nav    content'
    `,
    gridTemplateColumns: "1fr 5fr",
    gridTemplateRows: "1fr 6fr",
    gap: "var(--size-px--s)",
    color: "var(--info-soft-content-color)",
    fontSize: "var(--font-size-text--s)",
  };

  return (
    <div style={layout}>
      <header style={{ ...area, gridArea: "header" }}>
        Header
      </header>
      <nav
        style={{ ...area, ...vertical, gridArea: "nav" }}
      >
        Side-Navigation
      </nav>
      <main style={{ ...area, gridArea: "content" }}>
        Content
      </main>
    </div>
  );
}
```

  

**mStudio**

Grobes Layout des mStudios. Darstellung mit Primary und Secondary
    Navigation.

```tsx
import { IconMittwald } from "@mittwald/flow-react-components";

export default () => {
  const area: React.CSSProperties = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "var(--size-px--xs)",
    backgroundColor:
      "var(--info-soft-background-color--default)",
    border: "1px dashed var(--info-soft-content-color)",
    borderRadius: "var(--corner-radius--s)",
  };

  const vertical: React.CSSProperties = {
    writingMode: "vertical-rl",
    transform: "rotate(180deg)",
  };

  const layout: React.CSSProperties = {
    alignSelf: "stretch",
    height: "280px",
    display: "grid",
    gridTemplateAreas: `
      'logo       header       header     header'
      'primaryNav secondaryNav breadcrumb breadcrumb'
      'primaryNav secondaryNav pageTitle  button'
      'primaryNav secondaryNav content    content'
    `,
    gridTemplateColumns: "1fr 2fr 12fr 3fr",
    gridTemplateRows: "auto auto auto 1fr",
    gap: "var(--size-px--s)",
    color: "var(--info-soft-content-color)",
    fontSize: "var(--font-size-text--s)",
  };

  return (
    <div style={layout}>
      <div style={{ ...area, gridArea: "logo" }}>
        <IconMittwald size="s" />
      </div>
      <header style={{ ...area, gridArea: "header" }}>
        Header
      </header>
      <nav
        style={{
          ...area,
          ...vertical,
          gridArea: "primaryNav",
        }}
      >
        Primary Navigation
      </nav>
      <nav
        style={{
          ...area,
          ...vertical,
          gridArea: "secondaryNav",
        }}
      >
        Secondary Navigation
      </nav>
      <div style={{ ...area, gridArea: "breadcrumb" }}>
        Breadcrumb
      </div>
      <div style={{ ...area, gridArea: "pageTitle" }}>
        Page Title
      </div>
      <div style={{ ...area, gridArea: "button" }}>
        Button
      </div>
      <main style={{ ...area, gridArea: "content" }}>
        Content
      </main>
    </div>
  );
}
```

## Header

Der Header-Bereich befindet sich im oberen Bereich des Layouts und ist auf jeder
Seite identisch. Er kann das Logo sowie eine
[HeaderNavigation](/04-components/navigation/header-navigation) enthalten. Ein
Hauptbestandteil der HeaderNavigation sind primäre Navigationspunkte. Ergänzend
gibt es [Buttons](/04-components/actions/button), die Overlays oder
[ContextMenus](/04-components/actions/context-menu) öffnen, wie beispielsweise
für die Suche, das NotificationCenter oder das ProfilMenu. Im Header-Bereich
sollten ausschließlich wichtige Elemente angezeigt werden, die auf allen Seiten
sichtbar sein müssen.

## Side-Navigation

Die Side-Navigation befindet sich entweder direkt links neben dem
Content-Bereich oder fest am linken Bildschirmrand. Sie muss nicht nur aus einer
Navigation bestehen, sondern kann auch aus einer Primary und einer Secondary
Navigation bestehen.

Zum Aufbau einer Side-Navigation kann eine
[LayoutCard](/04-components/structure/layout-card) mit der Component
[Navigation](/04-components/navigation/navigation) gefüllt werden.

## Content

Der Content-Bereich stellt dem User Informationen zur Verfügung, damit er seine
Aufgabe erfüllen kann. Der Inhalt variiert von Seite zu Seite, es wird jedoch
empfohlen, den Inhalt nach einem wiederkehrenden Muster anzuordnen, das bereits
auf anderen Seiten verwendet wurde.

Die Navigationsstruktur im Content-Bereich folgt ebenfalls einem klaren Muster.
Im Content-Bereich können [Tabs](/04-components/structure/tabs) und
[List](/04-components/structure/list) verwendet werden, um die Inhalte zu teilen
oder in die Tiefe zu navigieren. Bei der Navigation in tiefere Ebenen, z. B.
über eine List, bietet eine [Breadcrumb](/04-components/navigation/breadcrumb)
eine Orientierungshilfe.

Der Content wird von einer [LayoutCard](/04-components/structure/layout-card)
umschlossen. Um innerhalb der LayoutCard die richtigen Abstände in vertikaler
und horizontaler Richtung sicherzustellen, sollten die Layout-Components
[Section](/04-components/structure/section) und
[ColumnLayout](/04-components/structure/column-layout) verwendet werden.

## Overlay

Ein Overlay öffnet sich über der eigentlichen Seite. Größere Overlays wie
[Modals](/04-components/overlays/modal) und
[OffCanvas](/04-components/overlays/modal) erhalten zusätzlich einen Backdrop,
damit sich der User besser auf den angezeigten Inhalt konzentrieren kann.
Andere, kleinere Overlays wie [ContextMenu](/04-components/actions/context-menu)
oder [Tooltip](/04-components/overlays/tooltip) erhalten keinen Backdrop für die
im Hintergrund angezeigte Seite.