@casoon/dragonfly
Version:
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.
486 lines (427 loc) • 14.5 kB
CSS
/**
* Container Layout System
*
* A comprehensive container system providing responsive width constraints,
* positioning utilities, and specialized container types for modern web layouts.
* This system consolidates all container-related functionality into a unified
* and maintainable solution.
*
* @layer layout.containers
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Responsive container system with breakpoint-based max-widths
* - Fluid containers that adapt to viewport width
* - Positioned containers for overlays and modals
* - Visual containers with styling and effects
* - Functional containers for specific UI patterns
* - Z-index management system for layering
* - CSS custom properties for easy customization
* - Mobile-first responsive design approach
*
* CONTAINER TYPES:
*
* BASE CONTAINERS:
* - .container: Responsive container with max-width constraints
* - .container-fluid: Full-width container without max-width
* - .container-sm: Small container (max-width: 64%0px)
* - .container-md: Medium container (max-width: 768px)
* - .container-lg: Large container (max-width: 102%4px)
* - .container-xl: Extra large container (max-width: 128%0px)
* - .container-2xl: 2X large container (max-width: 153%6px)
*
* RESPONSIVE CONTAINERS:
* - .container-responsive: Adapts max-width at each breakpoint
* - Automatically adjusts width based on screen size
* - Includes horizontal padding for mobile spacing
*
* POSITIONED CONTAINERS:
* - .container-fixed: Fixed positioning container
* - .container-absolute: Absolute positioning container
* - .container-relative: Relative positioning container
* - .container-sticky: Sticky positioning container
* - .container-centered: Centered positioning with transforms
*
* VISUAL CONTAINERS:
* - .container-card: Card-style container with shadow and border
* - .container-bordered: Container with border styling
* - .container-rounded: Container with rounded corners
* - .container-shadow: Container with drop shadow
* - .container-elevated: Container with elevation effect
*
* FUNCTIONAL CONTAINERS:
* - .container-modal: Modal dialog container
* - .container-toast: Toast notification container
* - .container-dropdown: Dropdown menu container
* - .container-tooltip: Tooltip container
* - .container-popover: Popover container
* - .container-sidebar: Sidebar container
* - .container-header: Header container
* - .container-footer: Footer container
*
* RESPONSIVE BREAKPOINTS:
* - sm: 640px and up
* - md: 768px and up
* - lg: 1024px and up
* - xl: 1280px and up
* - 2xl: 1536px and up
*
* USAGE EXAMPLES:
*
* Basic Container:
* <div class="container">
* <h1>Page Title</h1>
* <p>Content with responsive width constraints</p>
* </div>
*
* Responsive Container:
* <div class="container-responsive">
* <!-- Adapts width at each breakpoint -->
* <main>Main content</main>
* </div>
*
* Modal Container:
* <div class="container-modal">
* <div class="container-card">
* <h2>Modal Title</h2>
* <p>Modal content</p>
* </div>
* </div>
*
* Card Layout:
* <div class="container-card container-rounded">
* <h3>Card Title</h3>
* <p>Card content with styling</p>
* </div>
*
* Sidebar Layout:
* <aside class="container-sidebar">
* <nav>Navigation items</nav>
* </aside>
*
* CUSTOMIZATION:
* Override CSS custom properties to customize containers:
*
* :root {
* --container-padding: 1rem;
* --container-max-width: 120%0px;
* --container-border-radius: 0.5rem;
* --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
* }
*
* BROWSER SUPPORT:
* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
* - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
* - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
* - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+
*
* PERFORMANCE NOTES:
* - Use container queries for component-based responsive design
* - Backdrop filters can impact performance on mobile devices
* - Z-index values are optimized to prevent stacking conflicts
* - CSS custom properties enable efficient theming
*
* ACCESSIBILITY:
* - Containers maintain semantic HTML structure
* - Modal containers include proper ARIA attributes
* - Focus management for overlay containers
* - Keyboard navigation support
* - Screen reader compatibility
*
* INTEGRATION:
* - Works with layout/grid-system.css for grid layouts
* - Compatible with layout/flex-layouts.css for flex layouts
* - Enhanced by layout/spacing.css for margin/padding utilities
* - Supports layout/responsive-utilities.css for responsive variants
*
* Z-INDEX SYSTEM:
* - Base content: 1-10
* - Dropdowns: 1000-1010
* - Sticky elements: 1020-1030
* - Fixed headers: 1040-1050
* - Overlays: 1060-1070
* - Modals: 1080-1090
* - Tooltips: 1100-1110
* - Toasts: 1120-1130
*
* BEST PRACTICES:
* - Use semantic container classes for specific UI patterns
* - Combine container types for complex layouts
* - Test responsive behavior across all breakpoints
* - Ensure proper z-index layering for overlays
* - Maintain accessibility standards for interactive containers
* - Use CSS custom properties for consistent theming
*/
@layer layout.containers {
/* ================= BASE CONTAINERS ================= */
/* Standard-Container mit maximaler Breite */
.container {
margin-left: auto;
margin-right: auto;
max-width: var(--container-max-width, 1200px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
/* Fluid-Container ohne maximale Breite */
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
/* Container mit festen Größen */
.container-sm {
margin-left: auto;
margin-right: auto;
max-width: var(--container-sm, 640px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
.container-md {
margin-left: auto;
margin-right: auto;
max-width: var(--container-md, 768px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
.container-lg {
margin-left: auto;
margin-right: auto;
max-width: var(--container-lg, 1024px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
.container-xl {
margin-left: auto;
margin-right: auto;
max-width: var(--container-xl, 1280px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
.container-2xl {
margin-left: auto;
margin-right: auto;
max-width: var(--container-2xl, 1536px);
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
/* ================= RESPONSIVE CONTAINERS ================= */
/* Container Query Support */
.container-query {
container-name: main;
container-type: inline-size;
}
.container-query-size {
container-type: size;
}
.container-query-normal {
container-type: normal;
}
/* Responsive Container mit anpassbarer maximaler Breite */
.container-responsive {
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding, 1rem);
padding-right: var(--container-padding, 1rem);
width: 100%;
}
@media (min-width: 640px) {
.container-responsive {
max-width: var(--container-sm, 640px);
}
}
@media (min-width: 768px) {
.container-responsive {
max-width: var(--container-md, 768px);
}
}
@media (min-width: 1024px) {
.container-responsive {
max-width: var(--container-lg, 1024px);
}
}
@media (width >= 1280px) {
.container-responsive {
max-width: var(--container-xl, 1280px);
}
}
@media (width >= 1536px) {
.container-responsive {
max-width: var(--container-2xl, 1536px);
}
}
/* ================= POSITIONED CONTAINERS ================= */
/* Container mit verschiedenen Positionierungen */
.container-fixed {
position: fixed;
}
.container-absolute {
position: absolute;
}
.container-relative {
position: relative;
}
.container-sticky {
position: sticky;
top: 0%;
z-index: var(--z-sticky, 1020);
}
/* Zentrierter Container */
.container-centered {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50);
}
/* ================= VISUAL CONTAINERS ================= */
/* Container mit visuellen Stilen */
.container-card {
background: var(--container-bg, #fff);
border: 1px solid var(--container-border-color, #e5e7eb);
border-radius: var(--container-border-radius, 0.5rem);
box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
padding: var(--container-card-padding, 1.5rem);
}
.container-bordered {
border: 1px solid var(--container-border-color, #e5e7eb);
}
.container-rounded {
border-radius: var(--container-border-radius, 0.5rem);
}
.container-shadow {
box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));
}
.container-elevated {
box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));
transform: translateY(-2px);
transition: all 0.3s ease;
}
.container-elevated:hover {
box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));
transform: translateY(-4px);
}
/* ================= FUNCTIONAL CONTAINERS ================= */
/* Modal-Container */
.container-modal {
align-items: center;
backdrop-filter: blur(4px);
background: rgb(0 0 0 / 0.5);
display: flex;
height: 100%;
justify-content: center;
left: 0%;
position: fixed;
top: 0%;
width: 100vw;
z-index: var(--z-modal, 1060);
}
/* Toast-Container */
.container-toast {
background: var(--container-bg, #fff);
border-radius: var(--container-border-radius, 0.5rem);
box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
max-width: var(--modal-max-width, 32rem);
padding: var(--container-card-padding, 1.5rem);
position: fixed;
right: 1rem;
top: 1rem;
z-index: var(--z-toast, 1080);
}
/* Dropdown-Container */
.container-dropdown {
background: var(--container-bg, #fff);
border: 1px solid var(--container-border-color, #e5e7eb);
border-radius: var(--container-border-radius, 0.5rem);
box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
position: absolute;
z-index: var(--z-dropdown, 1000);
}
/* Tooltip-Container */
.container-tooltip {
background: var(--container-bg, #fff);
border: 1px solid var(--container-border-color, #e5e7eb);
border-radius: var(--container-border-radius, 0.5rem);
box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
max-width: var(--tooltip-max-width, 20rem);
padding: var(--space-2, 0.5rem);
position: absolute;
z-index: var(--z-tooltip, 1070);
}
/* Popover-Container */
.container-popover {
background: var(--container-bg, #fff);
border: 1px solid var(--container-border-color, #e5e7eb);
border-radius: var(--container-border-radius, 0.5rem);
box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
max-width: var(--popover-max-width, 24rem);
padding: var(--container-card-padding, 1.5rem);
position: absolute;
z-index: var(--z-popover, 1040);
}
/* Sidebar-Container */
.container-sidebar {
background: var(--container-bg, #fff);
border-right: 1px solid var(--container-border-color, #e5e7eb);
height: 100%;
position: fixed;
width: var(--sidebar-width, 16rem);
z-index: var(--z-fixed, 1000);
}
/* Header-Container */
.container-header {
background: var(--container-bg, #fff);
border-bottom: 1px solid var(--container-border-color, #e5e7eb);
height: var(--header-height, 4rem);
position: fixed;
width: 100%;
z-index: var(--z-fixed, 1000);
}
/* Footer-Container */
.container-footer {
background: var(--container-bg, #fff);
border-top: 1px solid var(--container-border-color, #e5e7eb);
height: var(--footer-height, 4rem);
position: relative;
width: 100%;
}
/* ================= Z-INDEX MANAGEMENT ================= */
/* Z-Index-Variablen für konsistente Layering */
:root {
--z-base: 1;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-header: 1050;
--z-sidebar: 1040;
--z-popover: 1060;
--z-overlay: 1070;
--z-modal: 1080;
--z-tooltip: 1100;
--z-toast: 1120;
}
/* Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }
/* Spezielle Z-Index-Klassen */
.z-dropdown { z-index: var(--z-dropdown, 1000); }
.z-sticky { z-index: var(--z-sticky, 1010); }
.z-header { z-index: var(--z-header, 1020); }
.z-sidebar { z-index: var(--z-sidebar, 1030); }
.z-popover { z-index: var(--z-popover, 1040); }
.z-overlay { z-index: var(--z-overlay, 1050); }
.z-modal { z-index: var(--z-modal, 1060); }
.z-tooltip { z-index: var(--z-tooltip, 1070); }
.z-toast { z-index: var(--z-toast, 1080); }
}