@casoon/dragonfly/layout/index.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Layout System Index
 * 
 * Konsolidiertes Layout-System mit optimierter Struktur:
 * 
 * CORE LAYOUT SYSTEMS:
 * - Grid System: Utility-basiertes 12-Spalten-Grid (.grid, .grid-cols-*, .col-span-*)
 * - Flex System: Flexbox-Utilities (.flex, .flex-row, .items-center, etc.)
 * - Container System: Container-Größen und -Eigenschaften (.container, .container-md, etc.)
 * 
 * RESPONSIVE & UTILITIES:
 * - Responsive: Container Queries + Media Query Fallbacks (.sm:block, .md:hidden, etc.)
 * - Responsive Utilities: Responsive Grid/Flex-Utilities (.sm:grid-cols-2, .md:flex-row, etc.)
 * - Spacing: Gap-, Margin-, Padding-Utilities (.gap-4, .mx-auto, .p-6, etc.)
 * 
 * HINWEIS: 
 * - Page-Layouts sind in core/logical-properties.css verfügbar (.layout)
 * - Sidebar-Komponenten sind in ui/regions/sidebar.css und ui/menu/sidebar.css verfügbar
 */

/* ================= CORE LAYOUT SYSTEMS ================= */
@import url('./grid-system.css') layer(layout.grid);
@import url('./flex-layouts.css') layer(layout.flex);
@import url('./containers.css') layer(layout.containers);

/* ================= RESPONSIVE & UTILITIES ================= */
@import url('./responsive.css') layer(layout.responsive);
@import url('./responsive-utilities.css') layer(layout.responsive-utilities);
@import url('./spacing.css') layer(layout.spacing);

/* ================= LAYOUT FOUNDATION ================= */

/* 
 * Basis-Layout-Definitionen
 * Enthält grundlegende Variablen und Konfigurationen für das Layout-System
 */
@layer layout {
  :root {
    /* Raster-Konfiguration für grid-system.css */
    --grid-columns: 12;
    --grid-gutter: var(--space-4, 1rem);
    --grid-gutter-sm: var(--space-2, 0.5rem);
    --grid-gutter-md: var(--space-4, 1rem);
    --grid-gutter-lg: var(--space-6, 1.5rem);
    --grid-gutter-xl: var(--space-8, 2rem);
    
    /* Container-Abstände für containers.css */
    --container-padding-sm: var(--space-2, 0.5rem);
    --container-padding-md: var(--space-4, 1rem);
    --container-padding-lg: var(--space-6, 1.5rem);
  }
}

/* ================= LAYOUT UTILITIES ================= */

/* 
 * Layout-Utilities 
 * Häufig benötigte Hilfsklassen für Layout-Anpassungen
 */
@layer layout.utilities {
  /* Dimension-Utilities */
  .w-full { width: 100%; }

  .h-full { height: 100%; }

  .min-h-screen { min-height: 100%; }

  .min-h-dvh { min-height: 100%dvh; }

  .max-w-full { max-width: 100%; }

  /* Positionierung */
  .mx-auto { margin-inline: auto; }

  .my-auto { margin-block: auto; }

  /* Display */
  .block { display: block; }

  .inline { display: inline; }

  .inline-block { display: inline-block; }

  .hidden { display: none; }

  /* Overflow */
  .overflow-hidden { overflow: hidden; }

  .overflow-auto { overflow: auto; }

  .overflow-x-auto { overflow-x: auto; }

  .overflow-y-auto { overflow-y: auto; }
}