Skip to content

Commit 1fc10c8

Browse files
author
Malte Weber
authored
Update README.md
1 parent cb8b738 commit 1fc10c8

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

README.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,27 @@ Das Design System ist ein gemeinsamer Satz wiederverwendbarer Komponenten, Muste
2222
Die Design Tokens sind derzeit als CSS- und SCSS-Variablen verfügbar und liegen im build-Ordner.
2323
Sie können lokal eingebunden oder direkt über den GitHub-Link variables.css integriert werden. Falls zusätzliche Ausgabeformate erforderlich sind, steht das Design-Team für Rückfragen zur Verfügung.
2424
### Installation
25-
**1.1 Lokale Einbindung:** Die Dateien aus dem build-Ordner können ins Projekt kopiert und im Haupt-Stylesheet eingebunden werden:
25+
**1.1 Lokale Einbindung via HTTP(S)** Die CSS-Datei aus dem build-Ordner kann via HTTP(S) direkt aus dem Repository eingebunden werden:
26+
```
27+
@import 'https://github.com/StabiBerlin/design-tokens/blob/main/build/variables.css
28+
```
29+
**1.2 Lokale Einbindung:** Die Dateien aus dem build-Ordner können ins Projekt kopiert und im Haupt-Stylesheet eingebunden werden:
2630
```
2731
@import 'build/variables.scss';
2832
```
29-
**1.2 Direkte Einbindung via GitHub:** Alternativ kann die CSS-Datei direkt aus dem Repository eingebunden werden:
33+
**1.3 Direkte Einbindung via GitHub:** Die CSS-Datei aus dem build Ordner kann direkt aus dem Repository eingebunden werden:
3034
```
3135
<link rel="stylesheet" href="https://github.com/StabiBerlin/design-tokens/blob/main/build/variables.css">
3236
```
3337
### Beispiele
3438
#### Card-Komponente
35-
Ein Beispiel für die Anwendung der Design Tokens auf eine Card-Komponente:
39+
Ein Beispiel für die Anwendung der Design Tokens auf eine Card-Komponente aus dem Bootstrap Framework:
3640
```
3741
.card {
3842
border: var(--size.hairline) solid var(--color.stroke.strong); /* Rahmenfarbe */
39-
border-radius: var(--border-radius-12); /* Runde Ecken */
40-
padding: var(--spacing-24); /* Konsistente Innenabstände */
41-
background-color: var(--color-neutral-surface); /* Hintergrundfarbe */
43+
border-radius: var(--border-radius-12); /* Runde Ecken */
44+
padding: var(--distance.doubleLarge); /* Konsistente Innenabstände */
45+
background-color: var(color.background.subtle); /* Hintergrundfarbe */
4246
}
4347
```
4448

0 commit comments

Comments
 (0)