125 lines
3.2 KiB
Markdown
125 lines
3.2 KiB
Markdown
# PowerOn CSS Architektur
|
|
|
|
## Datei-Struktur
|
|
|
|
Die CSS-Dateien sind in drei Ebenen organisiert:
|
|
|
|
### 1. `styles_variables.css` (Grundlage)
|
|
- **Zweck**: Zentrale Definition aller CSS-Variablen und Design-Tokens
|
|
- **Enthält**: Farben, Spacing, Border-Radius, Shadows, etc.
|
|
- **Wird geladen**: Als erste CSS-Datei
|
|
|
|
### 2. `styles_base.css` (Basis-Komponenten)
|
|
- **Zweck**: Zentrale Definition aller wiederkehrenden Basis-Styles
|
|
- **Enthält**:
|
|
- Typography (h1-h6, section-header)
|
|
- Button-Varianten (primary, secondary, danger, outline, icon, etc.) mit allen States (hover, active, disabled)
|
|
- Input-Felder (text, number, email, password, etc.) mit focus/disabled states
|
|
- Cards (card, card-header, card-body, card-footer)
|
|
- Labels und Form-Groups
|
|
- Links, Lists, Badges
|
|
- Utility Classes
|
|
- **Wird geladen**: Nach `styles_variables.css`
|
|
|
|
### 3. Spezifische Styles-Dateien
|
|
- `styles.css`: Layout, Authentication, spezifische Overrides
|
|
- `styles_navigation.css`: Navigation und Sidebar
|
|
- `styles_form.css`: Entity-Forms, Tabellen, Modals
|
|
- `styles_workflow_*.css`: Workflow-spezifische Styles
|
|
- `styles_icons.css`: Icon-Styles
|
|
|
|
## Verwendung
|
|
|
|
### Button verwenden
|
|
|
|
```html
|
|
<!-- Primary Button (Standard) -->
|
|
<button class="btn">Klick mich</button>
|
|
<!-- oder -->
|
|
<button class="btn-primary">Klick mich</button>
|
|
|
|
<!-- Secondary Button -->
|
|
<button class="btn-secondary">Sekundär</button>
|
|
|
|
<!-- Danger/Alert Button -->
|
|
<button class="btn-danger">Löschen</button>
|
|
|
|
<!-- Outline Buttons -->
|
|
<button class="btn-outline">Outline</button>
|
|
<button class="btn-outline-secondary">Outline Secondary</button>
|
|
|
|
<!-- Icon Button -->
|
|
<button class="btn-icon"><i class="fas fa-trash"></i></button>
|
|
```
|
|
|
|
### Input-Felder verwenden
|
|
|
|
```html
|
|
<!-- Standard Input - nutzt automatisch Basis-Styles -->
|
|
<input type="text" placeholder="Name">
|
|
<input type="email" placeholder="Email">
|
|
<textarea></textarea>
|
|
<select></select>
|
|
|
|
<!-- Mit Label -->
|
|
<label>Name</label>
|
|
<input type="text">
|
|
```
|
|
|
|
### Cards verwenden
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Titel</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
Inhalt
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn">Aktion</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Button States
|
|
|
|
Alle Buttons haben automatisch:
|
|
- **:hover** - Hover-Effekt
|
|
- **:active** - Active-State mit leichter Translation
|
|
- **:disabled** - Disabled-State mit reduzierter Opacity
|
|
- **:focus** - Focus-State (bei Tastaturnavigation)
|
|
|
|
## Anpassungen
|
|
|
|
### Neue Button-Variante erstellen
|
|
|
|
```css
|
|
/* In der spezifischen CSS-Datei */
|
|
.my-custom-btn {
|
|
/* Nutzt Basis-Styles von .btn */
|
|
background-color: var(--color-custom);
|
|
/* Weitere Anpassungen */
|
|
}
|
|
```
|
|
|
|
### Spezifisches Override
|
|
|
|
```css
|
|
/* In der spezifischen CSS-Datei */
|
|
.login-btn {
|
|
/* Override nur was nötig ist */
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
/* Rest nutzt Basis-Styles */
|
|
}
|
|
```
|
|
|
|
## Vorteile
|
|
|
|
1. **Konsistenz**: Alle Komponenten nutzen dieselben Basis-Styles
|
|
2. **Wartbarkeit**: Änderungen nur an einer Stelle
|
|
3. **Schlankheit**: Spezifische CSS-Dateien enthalten nur wirklich spezifische Styles
|
|
4. **Wiederverwendbarkeit**: Basis-Komponenten können überall verwendet werden
|
|
5. **Performance**: Reduzierte CSS-Größe durch zentrale Definitionen
|
|
|