CSS Architecture - LYD Design System V2

Master.css Concept

Central CSS System

Our Design System is based on a single, centralized CSS file (master.css) that contains all global styles, design tokens, and component classes. This approach offers several advantages:

Consistency: All components use the same design tokens
Performance: Only one CSS file needs to be loaded
Maintainability: Central location for all style changes
Scalability: Easy extension through CSS Custom Properties

Integration

<!-- Integration in HTML -->
<link rel="stylesheet" href="/shared/master.css">
                

Design Tokens

Colors

Our color palette is based on the LYD Corporate Identity:

--lyd-primary
#000066

--lyd-royal-blue
#3366CC

--lyd-gradient-primary
Gradient

--lyd-accent
#E8F0FE

Typography

/* Font Families */
:root {
    --font-family-primary: 'Inter', system-ui, sans-serif;
    --font-family-luxury: 'Playfair Display', serif;
    --font-family-mono: 'JetBrains Mono', monospace;
}
                

--font-size-xs 12px

--font-size-sm 14px

--font-size-base 16px

--font-size-lg 18px

--font-size-xl 20px

--font-size-2xl 24px

Spacing System

Consistent spacing based on a 4px grid:

--spacing-xs 4px

--spacing-sm 8px

--spacing-md 16px

--spacing-lg 24px

--spacing-xl 32px

--spacing-2xl 48px

Luxury Design Features

Gradients

/* Luxury Gradients */
--lyd-gradient-primary: linear-gradient(135deg, #000066 0%, #3366CC 100%);
--lyd-gradient-hover: linear-gradient(135deg, #3366CC 0%, #000066 100%);
--lyd-gradient-subtle: linear-gradient(180deg, rgba(0,0,102,0.03) 0%, rgba(51,102,204,0.05) 100%);
--lyd-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
                

Glassmorphism

/* Glassmorphism Effects */
.glass-card {
    background: var(--glass-white);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
}
                

Premium Transitions

/* Luxury Transitions */
--transition-luxury: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                

Component Classes

Naming Convention

All component classes follow the prefix .lyd- for unique identification:

/* Component Classes */
.lyd-button { }
.lyd-button.primary { }
.lyd-button.secondary { }

.lyd-card { }
.lyd-card-header { }
.lyd-card-body { }

.lyd-input { }
.lyd-select { }
.lyd-modal { }
                

Utility Classes

/* Utility Classes */
.luxury-hover { /* Hover-Effekte */ }
.gradient-text { /* Gradient Text */ }
.glass-card { /* Glassmorphism */ }
.luxury-badge { /* Premium Badges */ }
.luxury-divider { /* Decorative Dividers */ }
                

Best Practices

Using CSS Custom Properties

Always use predefined CSS Variables instead of hardcoded values:

/* ✅ Correct */
.my-component {
    color: var(--lyd-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

/* ❌ Wrong */
.my-component {
    color: #000066;
    padding: 16px;
    border-radius: 6px;
}
                

Component-specific Styles

For component-specific styles that are not included in master.css:

<!-- In the component file -->
<style>
    /* ONLY component-specific styles */
    .lyd-datepicker-calendar {
        position: absolute;
        z-index: var(--z-dropdown);
    }
</style>
                

Performance Optimization

CSS Loading Strategy

Single File: Only one CSS file reduces HTTP requests
Minification: Master.css should be minified in production
Compression: Use Gzip/Brotli for optimal file size
Caching: Long cache duration with proper versioning

Z-Index Management

HeroUI-Inspired Dropdown System

Robuste Z-Index-Lösung basierend auf HeroUI's bewährten Patterns:

/* HeroUI-Inspired Z-Index System */
.lyd-select-dropdown,
.lyd-dropdown-menu,
.lyd-autocomplete-dropdown {
    position: absolute !important;
    z-index: 999999 !important;
    background: white !important;
    /* Portal-Rendering handles positioning */
}

/* Component Cards with Dropdown Support */
.component-card {
    min-height: 200px;
    isolation: isolate !important;
    overflow: visible !important;
}
                

Portal-Rendering: Dropdowns werden zu document.body verschoben
Maximum Z-Index: 999999 für höchste Priorität
Isolation: Cards verwenden isolate für saubere Stacking Contexts
Overflow: Visible für alle Dropdown-Container