‍

Stylesheet

Die Flow-Components-Bibliotheken werden über ein gemeinsames Stylesheet, das auch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein, wenn du dein eigenes Framework verwendest, um Components zu bauen, und dich dabei an die mittwald Styling Guidelines halten willst.

Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet installieren kannst und wie die Klassennamen strukturiert sind.

Installation des Standalone Stylesheets

Die Flow-Stylesheet-Bibliothek wird über NPM veröffentlicht und kann mit einem Package Manager wie npm oder yarn installiert werden.

Styles importieren

Um die Components-Styles zu verwenden, musst du das Stylesheet importieren. Füge diese Zeile zum Einstiegspunkt deines Projektes hinzu.

Layered-Variante (optional)

Das Standard-Stylesheet (@mittwald/flow-stylesheet/css) ist ungelayert: welche Regel gewinnt, entscheidet sich über Spezifität und Quell-Reihenfolge.

Optional gibt es eine gelayerte Variante, deren Styles in CSS Cascade Layers‍ organisiert sind:

Aus dem @mittwald/flow-react-components-Paket entsprechend:

Sie liegt unter einem flow-Layer mit dieser Reihenfolge:

  • flow.tokens – die Design-Token als CSS Custom Properties
  • flow.reset – der globale Reset
  • flow.base – Schriftarten (@font-face) und globale Basis-Styles
  • flow.components – die Styles der einzelnen Komponenten

Warum die gelayerte Variante?

Nach den Regeln der Cascade Layers gewinnt ungelayertes CSS immer gegen gelayertes – unabhängig von der Spezifität. Mit der gelayerten Variante überschreibst du Flows Styles daher ohne !important oder Spezifitäts-Tricks:

Wenn du selbst mit Cascade Layers arbeitest (z. B. Tailwind), deklariere deine Layer nach flow, damit sie Vorrang behalten.

Welche Variante wann?

  • Standard (css / all.css): klassisches, spezifitätsbasiertes Verhalten. Passt auch für Apps mit einem aggressiven globalen Reset (z. B. * { all: initial }), der gelayerte Styles sonst vollständig überschreiben würde.
  • Layered (css-layered / all-layered.css): einfache, spezifitätsfreie Überschreibbarkeit und saubere Interop mit eigenen Cascade Layers.

Anwendung des Stylesheets

Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert sind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten, komponentenbasierten und leicht zu verstehendem Schema.

Generelle Klassennamen-Auszeichnungen

Alle Klassennamen sind in Lowercase geschrieben und benutzen - um Wörter zu trennen und -- um logische Abschnitte zu unterteilen.

Der erste logische Abschnitt ist immer der flow Namespace. Andere Abschnitte könnten beispielsweise so aussehen:

Components

Sub-Components

Spezialisierung: Verschiedene Varianten

Spezialisierung: In einer Komposition verwendete Components

Ein Hinweis zur Spezialisierung

Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren, müssen immer zusätzlich zum Basis-Klassennamen verwendet werden.

Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:

<button className="flow--button flow--button--success">
  Success Button
</button>

Kombinierte Varianten

<button className="flow--button flow--button--success flow--button--size-s">
  Small Success Button
</button>

In einer Komposition verwendete Components

Es ist gängige Praxis, größere Components aus bereits bestehenden kleineren Components zusammenzusetzen. Der Alert‍ besteht beispielsweise aus einem Icon‍, einer Heading‍ und optionalem Inhalt. Die verwendeten Components müssen ihren Basis-Klassennamen für das grundsätzliche Styling erhalten (flow--heading), sowie den spezialisierten Klassennamen (flow--alert--heading), um spezifische Styles des Inline Alerts zu erhalten.

import ExampleSvg from "@/content/01-get-started/stylesheet/examples/components/ExampleSvg";

<aside className="flow--alert">
  <h3 className="flow--heading flow--heading--s flow--alert--heading">
    <span className="flow--heading--heading-text">
      <ExampleSvg className="flow--icon flow--alert-icon flow--heading--icon" />
      E-Mail-Adresse wurde archiviert
    </span>
  </h3>
  <div className="flow--alert--content">
    Da deine Domain gelöscht wurde, wurde diese
    E-Mail-Adresse archiviert. Um E-Mails empfangen und
    senden zu können musst du die Adresse wieder umbenennen.
  </div>
</aside>

Auf dieser Seite