wiki/ui_playground/doc_styles_architecture.md

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

<!-- 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

<!-- 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

<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

/* In der spezifischen CSS-Datei */
.my-custom-btn {
  /* Nutzt Basis-Styles von .btn */
  background-color: var(--color-custom);
  /* Weitere Anpassungen */
}

Spezifisches Override

/* 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