@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.
372 lines (282 loc) • 10.3 kB
CSS
/**
* Responsive Display & Visibility System
*
* A comprehensive responsive utility system for controlling element visibility,
* display properties, and responsive behavior across different screen sizes.
* This system provides mobile-first responsive design utilities with semantic
* class names and consistent breakpoint management.
*
* @layer layout.responsive
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Mobile-first responsive design approach
* - Display utilities for all CSS display values
* - Visibility controls for showing/hiding elements
* - Responsive variants for all major breakpoints
* - Print-specific utilities for print media
* - Screen reader utilities for accessibility
* - Consistent breakpoint system across all utilities
* - Performance-optimized CSS with minimal specificity
*
* BREAKPOINT SYSTEM:
* - Base: 0 and up (mobile-first)
* - sm: 640px and up (small tablets)
* - md: 768px and up (tablets)
* - lg: 1024px and up (laptops)
* - xl: 1280px and up (desktops)
* - 2xl: 1536px and up (large desktops)
*
* DISPLAY UTILITIES:
* - .block: Block-level element
* - .inline-block: Inline block element
* - .inline: Inline element
* - .flex: Flexbox container
* - .inline-flex: Inline flexbox container
* - .grid: CSS Grid container
* - .inline-grid: Inline grid container
* - .table: Table display
* - .table-cell: Table cell display
* - .table-row: Table row display
* - .hidden: Hide element (display: none)
*
* VISIBILITY UTILITIES:
* - .visible: Element is visible
* - .invisible: Element is invisible but takes space
* - .sr-only: Screen reader only (visually hidden)
* - .not-sr-only: Remove screen reader only styling
*
* RESPONSIVE VARIANTS:
* All display utilities are available with responsive prefixes:
* - sm:block, md:flex, lg:grid, xl:hidden, etc.
* - Example: .hidden.md:block (hidden on mobile, block on tablet+)
*
* PRINT UTILITIES:
* - .print:block: Show as block in print
* - .print:hidden: Hide in print
* - .print:inline: Show as inline in print
*
* USAGE EXAMPLES:
*
* Responsive Navigation:
* <nav class="hidden md:block">
* <!-- Hidden on mobile, visible on tablet+ -->
* <ul>Navigation items</ul>
* </nav>
*
* Mobile Menu Toggle:
* <button class="block md:hidden">
* <!-- Visible on mobile, hidden on tablet+ -->
* Menu Toggle
* </button>
*
* Responsive Layout:
* <div class="block lg:flex">
* <!-- Block layout on mobile/tablet, flex on desktop -->
* <main class="lg:flex-1">Content</main>
* <aside class="lg:flex-none">Sidebar</aside>
* </div>
*
* Progressive Enhancement:
* <div class="grid-fallback block sm:grid">
* <!-- Block fallback, grid on small screens+ -->
* <div>Item 1</div>
* <div>Item 2</div>
* </div>
*
* Accessibility:
* <span class="sr-only">
* Screen reader description
* </span>
* <button aria-describedby="description">
* <span class="sr-only">Close dialog</span>
* ×
* </button>
*
* Print Optimization:
* <div class="print:hidden">
* <!-- Hidden when printing -->
* <button>Interactive element</button>
* </div>
*
* <div class="hidden print:block">
* <!-- Only visible when printing -->
* <p>Print-specific content</p>
* </div>
*
* BROWSER SUPPORT:
* - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
* - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
* - Media Queries: All modern browsers (IE 9+)
* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
*
* PERFORMANCE NOTES:
* - Mobile-first approach reduces CSS payload for mobile devices
* - Uses min-width media queries for better performance
* - Minimal CSS specificity prevents cascade conflicts
* - Print styles are separated to avoid render blocking
*
* ACCESSIBILITY:
* - .sr-only provides content for screen readers while hiding visually
* - Maintains semantic HTML structure regardless of display changes
* - Responsive visibility changes don't affect tab order
* - Print utilities ensure important content is available in print
*
* INTEGRATION:
* - Works seamlessly with layout/grid-system.css
* - Compatible with layout/flex-layouts.css
* - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants
* - Supports layout/containers.css responsive containers
*
* BEST PRACTICES:
* - Use mobile-first approach: start with mobile styles, enhance for larger screens
* - Combine with semantic HTML for better accessibility
* - Test responsive behavior across all target breakpoints
* - Use .sr-only for important context that should be available to screen readers
* - Consider print styles for content-heavy applications
* - Avoid excessive responsive variants that create maintenance overhead
*
* DEBUGGING:
* Add temporary borders to debug responsive layouts:
* .debug * { border: 1px solid red !important; }
*
* MIGRATION:
* From older responsive systems:
* - .show-sm → .hidden.sm:block
* - .hide-md → .block.md:hidden
* - .visible-lg → .hidden.lg:block
*/
@layer layout.responsive {
/* ================= DISPLAY UTILITIES ================= */
/* Basis-Display-Eigenschaften */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.hidden { display: none; }
/* ================= VISIBILITY UTILITIES ================= */
/* Sichtbarkeits-Kontrollen */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* Screen Reader Only - für Barrierefreiheit */
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.not-sr-only {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
white-space: initial;
width: initial;
}
/* ================= RESPONSIVE BREAKPOINTS ================= */
/* Small screens (640px and up) */
@media (min-width: 640px) {
.sm\:block { display: block; }
.sm\:inline-block { display: inline-block; }
.sm\:inline { display: inline; }
.sm\:flex { display: flex; }
.sm\:inline-flex { display: inline-flex; }
.sm\:grid { display: grid; }
.sm\:inline-grid { display: inline-grid; }
.sm\:table { display: table; }
.sm\:table-cell { display: table-cell; }
.sm\:table-row { display: table-row; }
.sm\:hidden { display: none; }
.sm\:visible { visibility: visible; }
.sm\:invisible { visibility: hidden; }
}
/* Medium screens (768px and up) */
@media (min-width: 768px) {
.md\:block { display: block; }
.md\:inline-block { display: inline-block; }
.md\:inline { display: inline; }
.md\:flex { display: flex; }
.md\:inline-flex { display: inline-flex; }
.md\:grid { display: grid; }
.md\:inline-grid { display: inline-grid; }
.md\:table { display: table; }
.md\:table-cell { display: table-cell; }
.md\:table-row { display: table-row; }
.md\:hidden { display: none; }
.md\:visible { visibility: visible; }
.md\:invisible { visibility: hidden; }
}
/* Large screens (1024px and up) */
@media (min-width: 1024px) {
.lg\:block { display: block; }
.lg\:inline-block { display: inline-block; }
.lg\:inline { display: inline; }
.lg\:flex { display: flex; }
.lg\:inline-flex { display: inline-flex; }
.lg\:grid { display: grid; }
.lg\:inline-grid { display: inline-grid; }
.lg\:table { display: table; }
.lg\:table-cell { display: table-cell; }
.lg\:table-row { display: table-row; }
.lg\:hidden { display: none; }
.lg\:visible { visibility: visible; }
.lg\:invisible { visibility: hidden; }
}
/* Extra large screens (1280px and up) */
@media (width >= 1280px) {
.xl\:block { display: block; }
.xl\:inline-block { display: inline-block; }
.xl\:inline { display: inline; }
.xl\:flex { display: flex; }
.xl\:inline-flex { display: inline-flex; }
.xl\:grid { display: grid; }
.xl\:inline-grid { display: inline-grid; }
.xl\:table { display: table; }
.xl\:table-cell { display: table-cell; }
.xl\:table-row { display: table-row; }
.xl\:hidden { display: none; }
.xl\:visible { visibility: visible; }
.xl\:invisible { visibility: hidden; }
}
/* 2X large screens (1536px and up) */
@media (width >= 1536px) {
.\32xl\:block { display: block; }
.\32xl\:inline-block { display: inline-block; }
.\32xl\:inline { display: inline; }
.\32xl\:flex { display: flex; }
.\32xl\:inline-flex { display: inline-flex; }
.\32xl\:grid { display: grid; }
.\32xl\:inline-grid { display: inline-grid; }
.\32xl\:table { display: table; }
.\32xl\:table-cell { display: table-cell; }
.\32xl\:table-row { display: table-row; }
.\32xl\:hidden { display: none; }
.\32xl\:visible { visibility: visible; }
.\32xl\:invisible { visibility: hidden; }
}
/* ================= PRINT UTILITIES ================= */
/* Print-spezifische Stile */
@media print {
.print\:block { display: block ; }
.print\:inline-block { display: inline-block ; }
.print\:inline { display: inline ; }
.print\:hidden { display: none ; }
.print\:visible { visibility: visible ; }
.print\:invisible { visibility: hidden ; }
}
}