@rhavenside/baseline-ui 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -187
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,43 +1,36 @@
|
|
|
1
|
-
# Baseline
|
|
1
|
+
# Baseline UI
|
|
2
2
|
|
|
3
|
-
Ein
|
|
3
|
+
Ein technisches Glas-Design-Framework mit SCSS-Quellen und kompiliertem CSS.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- ✅ **Darf**: Layout, Grid, Spacing, Typografie, Komponenten liefern
|
|
10
|
-
- ✅ **Darf**: Neutral, konfigurierbar und stabil sein
|
|
11
|
-
- ❌ **Darf nicht**: Projektbezogene Farben, Logos oder Sonderfälle enthalten
|
|
12
|
-
- ❌ **Darf nicht**: App-Logik oder Zustände kennen
|
|
13
|
-
|
|
14
|
-
## 📦 Installation
|
|
15
|
-
|
|
16
|
-
### CDN (Schnellstart)
|
|
7
|
+
### npm
|
|
17
8
|
|
|
18
|
-
```
|
|
19
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @rhavenside/baseline-ui
|
|
20
11
|
```
|
|
21
12
|
|
|
22
|
-
###
|
|
13
|
+
### CDN
|
|
23
14
|
|
|
24
|
-
```
|
|
25
|
-
|
|
15
|
+
```html
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rhavenside/baseline-ui@latest/dist/baseline.min.css">
|
|
26
17
|
```
|
|
27
18
|
|
|
28
19
|
### SCSS Import
|
|
29
20
|
|
|
30
21
|
```scss
|
|
31
|
-
@use '@baseline
|
|
22
|
+
@use '@rhavenside/baseline-ui/src/baseline';
|
|
32
23
|
```
|
|
33
24
|
|
|
34
25
|
### CSS Import
|
|
35
26
|
|
|
36
27
|
```css
|
|
37
|
-
@import '@baseline
|
|
28
|
+
@import '@rhavenside/baseline-ui/dist/baseline.css';
|
|
38
29
|
```
|
|
39
30
|
|
|
40
|
-
##
|
|
31
|
+
## Verwendung
|
|
32
|
+
|
|
33
|
+
### HTML
|
|
41
34
|
|
|
42
35
|
```html
|
|
43
36
|
<!DOCTYPE html>
|
|
@@ -45,62 +38,18 @@ npm install @baseline/ui
|
|
|
45
38
|
<head>
|
|
46
39
|
<meta charset="UTF-8">
|
|
47
40
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
48
|
-
<title>Baseline
|
|
49
|
-
<link rel="stylesheet" href="dist/baseline.
|
|
41
|
+
<title>Baseline UI</title>
|
|
42
|
+
<link rel="stylesheet" href="node_modules/@rhavenside/baseline-ui/dist/baseline.css">
|
|
50
43
|
</head>
|
|
51
44
|
<body>
|
|
52
45
|
<div class="bl-container">
|
|
53
|
-
<h1>Willkommen
|
|
46
|
+
<h1>Willkommen</h1>
|
|
54
47
|
<button class="bl-btn bl-btn-primary">Klick mich</button>
|
|
55
48
|
</div>
|
|
56
49
|
</body>
|
|
57
50
|
</html>
|
|
58
51
|
```
|
|
59
52
|
|
|
60
|
-
## 📚 Dokumentation
|
|
61
|
-
|
|
62
|
-
### Design Tokens
|
|
63
|
-
|
|
64
|
-
Alle Design-Tokens sind als CSS Custom Properties verfügbar:
|
|
65
|
-
|
|
66
|
-
```css
|
|
67
|
-
:root {
|
|
68
|
-
--color-primary: #111827;
|
|
69
|
-
--spacing-md: 1rem;
|
|
70
|
-
--font-size-base: 1rem;
|
|
71
|
-
--border-radius-md: 0.25rem;
|
|
72
|
-
/* ... */
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### Layout-System
|
|
77
|
-
|
|
78
|
-
#### Container
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<div class="bl-container">Maximale Breite mit Padding</div>
|
|
82
|
-
<div class="bl-container-fluid">Volle Breite mit Padding</div>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
#### Flexbox Grid (12 Spalten)
|
|
86
|
-
|
|
87
|
-
```html
|
|
88
|
-
<div class="bl-row">
|
|
89
|
-
<div class="bl-col-6">50% Breite</div>
|
|
90
|
-
<div class="bl-col-6">50% Breite</div>
|
|
91
|
-
</div>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
#### CSS Grid
|
|
95
|
-
|
|
96
|
-
```html
|
|
97
|
-
<div class="bl-grid bl-grid-cols-3 bl-gap-md">
|
|
98
|
-
<div>Item 1</div>
|
|
99
|
-
<div>Item 2</div>
|
|
100
|
-
<div>Item 3</div>
|
|
101
|
-
</div>
|
|
102
|
-
```
|
|
103
|
-
|
|
104
53
|
### Komponenten
|
|
105
54
|
|
|
106
55
|
#### Button
|
|
@@ -122,9 +71,6 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
|
|
|
122
71
|
<div class="bl-card-body">
|
|
123
72
|
<p>Inhalt</p>
|
|
124
73
|
</div>
|
|
125
|
-
<div class="bl-card-footer">
|
|
126
|
-
<button class="bl-btn bl-btn-primary">Aktion</button>
|
|
127
|
-
</div>
|
|
128
74
|
</div>
|
|
129
75
|
```
|
|
130
76
|
|
|
@@ -134,139 +80,39 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
|
|
|
134
80
|
<div class="bl-form-group">
|
|
135
81
|
<label class="bl-form-label" for="email">E-Mail</label>
|
|
136
82
|
<input type="email" id="email" class="bl-input" placeholder="name@example.com">
|
|
137
|
-
<span class="bl-form-helper">Wir teilen Ihre E-Mail nicht.</span>
|
|
138
83
|
</div>
|
|
139
84
|
```
|
|
140
85
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
#### Spacing
|
|
144
|
-
|
|
145
|
-
```html
|
|
146
|
-
<div class="m-md p-lg">Margin & Padding</div>
|
|
147
|
-
<div class="mt-xl mb-sm">Top & Bottom</div>
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
#### Text
|
|
151
|
-
|
|
152
|
-
```html
|
|
153
|
-
<p class="bl-text-center bl-text-lg bl-font-bold">Zentrierter, großer, fetter Text</p>
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
#### Display
|
|
86
|
+
#### Grid
|
|
157
87
|
|
|
158
88
|
```html
|
|
159
|
-
<div class="bl-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
### Dark Mode (Automatisch)
|
|
165
|
-
|
|
166
|
-
Das Framework unterstützt automatisch `prefers-color-scheme: dark`:
|
|
167
|
-
|
|
168
|
-
```css
|
|
169
|
-
@media (prefers-color-scheme: dark) {
|
|
170
|
-
/* Dark Mode Styles werden automatisch angewendet */
|
|
171
|
-
}
|
|
89
|
+
<div class="bl-row">
|
|
90
|
+
<div class="bl-col-6">50% Breite</div>
|
|
91
|
+
<div class="bl-col-6">50% Breite</div>
|
|
92
|
+
</div>
|
|
172
93
|
```
|
|
173
94
|
|
|
174
|
-
###
|
|
95
|
+
### Utilities
|
|
175
96
|
|
|
176
97
|
```html
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
</
|
|
98
|
+
<div class="m-md p-lg">Margin & Padding</div>
|
|
99
|
+
<div class="bl-text-center bl-text-lg">Zentrierter Text</div>
|
|
100
|
+
<div class="bl-d-flex bl-justify-center">Flexbox Center</div>
|
|
180
101
|
```
|
|
181
102
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
```html
|
|
185
|
-
<html data-theme="dark">
|
|
186
|
-
<!-- Dark Mode aktiviert -->
|
|
187
|
-
</html>
|
|
188
|
-
```
|
|
103
|
+
### Design Tokens
|
|
189
104
|
|
|
190
|
-
|
|
105
|
+
Alle Design-Tokens sind als CSS Custom Properties verfügbar:
|
|
191
106
|
|
|
192
107
|
```css
|
|
193
108
|
:root {
|
|
194
|
-
--color-
|
|
195
|
-
--
|
|
109
|
+
--color-accent: #4A9EFF;
|
|
110
|
+
--color-bg: #1A1A1A;
|
|
111
|
+
--spacing-md: 1rem;
|
|
112
|
+
--font-size-base: 1rem;
|
|
196
113
|
}
|
|
197
114
|
```
|
|
198
115
|
|
|
199
|
-
##
|
|
200
|
-
|
|
201
|
-
Baseline ist **WCAG 2.1 AA-konform**:
|
|
202
|
-
|
|
203
|
-
- Focus-Styles für alle interaktiven Elemente
|
|
204
|
-
- Screen-Reader-Utilities (`.bl-sr-only`)
|
|
205
|
-
- Skip-Links (`.bl-skip-link`)
|
|
206
|
-
- High-Contrast-Mode Support
|
|
207
|
-
- Reduced Motion Support
|
|
208
|
-
|
|
209
|
-
## 🛠️ Entwicklung
|
|
210
|
-
|
|
211
|
-
### Build
|
|
212
|
-
|
|
213
|
-
```bash
|
|
214
|
-
npm run build
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
### Watch Mode
|
|
218
|
-
|
|
219
|
-
```bash
|
|
220
|
-
npm run watch
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
### Storybook
|
|
224
|
-
|
|
225
|
-
```bash
|
|
226
|
-
npm run docs:dev
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
## 📖 Komponenten-Übersicht
|
|
230
|
-
|
|
231
|
-
- **Button** - Primäre, sekundäre, Outline, Ghost, Link Varianten
|
|
232
|
-
- **Form** - Input, Select, Textarea, Checkbox, Radio, Switch, File, Range
|
|
233
|
-
- **Card** - Header, Body, Footer mit Varianten
|
|
234
|
-
- **Alert** - Info, Success, Warning, Error mit Dismiss-Funktion
|
|
235
|
-
- **Badge** - Varianten + Pills
|
|
236
|
-
- **Modal** - Dialog mit Backdrop, Header, Body, Footer
|
|
237
|
-
- **Dropdown** - Trigger + Menu
|
|
238
|
-
- **Navigation** - Horizontal, Vertical, Tabs, Pills, Breadcrumb, Pagination
|
|
239
|
-
- **Table** - Striped, Bordered, Hover, Responsive
|
|
240
|
-
- **Tooltip** - Alle Positionen (top, right, bottom, left)
|
|
241
|
-
- **Progress** - Determinate, Indeterminate, Striped
|
|
242
|
-
- **Spinner** - Loading-Indikatoren
|
|
243
|
-
|
|
244
|
-
## 🌐 Browser-Support
|
|
245
|
-
|
|
246
|
-
- Chrome (letzte 2 Versionen)
|
|
247
|
-
- Firefox (letzte 2 Versionen)
|
|
248
|
-
- Safari (letzte 2 Versionen)
|
|
249
|
-
- Edge (letzte 2 Versionen)
|
|
250
|
-
|
|
251
|
-
## 📝 Versionierung
|
|
252
|
-
|
|
253
|
-
Baseline verwendet [Semantic Versioning](https://semver.org/):
|
|
254
|
-
|
|
255
|
-
- **1.x** = Stabil
|
|
256
|
-
- Breaking Changes nur bei Major-Version
|
|
257
|
-
- Changelog wird immer gepflegt
|
|
258
|
-
|
|
259
|
-
## 📄 Lizenz
|
|
116
|
+
## Lizenz
|
|
260
117
|
|
|
261
118
|
MIT License - siehe [LICENSE](LICENSE) Datei
|
|
262
|
-
|
|
263
|
-
## 🤝 Beitragen
|
|
264
|
-
|
|
265
|
-
Beiträge sind willkommen! Bitte erstelle ein Issue oder einen Pull Request.
|
|
266
|
-
|
|
267
|
-
## 🔗 Links
|
|
268
|
-
|
|
269
|
-
- [GitHub](https://github.com/yourusername/baseline)
|
|
270
|
-
- [Dokumentation](https://baseline.example.com)
|
|
271
|
-
- [Changelog](CHANGELOG.md)
|
|
272
|
-
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhavenside/baseline-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A technical glass design framework with SCSS source and compiled CSS - minimalist, rectangular forms with milky glass effects",
|
|
6
6
|
"main": "dist/baseline.css",
|