# Stylesheet 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. ```shell 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 ```css .flow--button .flow--heading .flow--alert-icon ``` ### Sub-Komponenten ```css .flow--navigation .flow--navigation--navigation-item ``` ### Spezialisierung: Verschiedene Varianten ```css .flow--button--primary .flow--alert--danger .flow--icon--fixed-width ``` ### Spezialisierung: In einer Komposition verwendete Komponenten ```css .flow--button--icon .flow--alert--heading ``` --- ## 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: ```tsx ``` ### Kombinierte Varianten ```tsx ``` ### 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--heading`), sowie den spezialisierten Klassennamen (`flow--alert--heading`), um spezifische Styles des Inline Alerts zu erhalten. ```tsx import ExampleSvg from "@/content/01-get-started/stylesheet/examples/components/ExampleSvg"; ```