Die Flow-Komponenten-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 Komponenten 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

Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über NPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager wie npm or yarn installiert werden.

yarn add @mittwald/flow-stylesheet

Styles importieren

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

import "@mittwald/flow-stylesheet/css";

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:

Komponenten

.flow--button
.flow--heading
.flow--alert-icon

Sub-Komponenten

.flow--navigation
.flow--navigation--navigation-item

Spezialisierung: Verschiedene Varianten

.flow--button--primary
.flow--alert--danger
.flow--icon--fixed-width

Spezialisierung: In einer Komposition verwendete Komponenten

.flow--button--icon
.flow--alert--alert-icon

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--accent">
  Accented Button
</button>

Kombinierte Varianten

<button className="flow--button flow--button--accent flow--button--size-s">
  Small Accented Button
</button>

In einer Komposition verwendete Komponenten

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

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

<aside className="flow--alert">
  <ExampleSvg className="flow--icon flow--alert-icon flow--alert--alert-icon" />
  <h3 className="flow--heading flow--heading--h3 flow--alert--heading">
    E-Mail Adresse wurde archiviert
  </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>