@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.
399 lines (287 loc) • 12.8 kB
CSS
/**
* Responsive Layout Utilities
*
* Advanced responsive utilities specifically designed for grid and flex layouts.
* This system provides responsive variants of layout-specific properties that
* complement the base grid and flex systems with breakpoint-aware functionality.
*
* @layer layout.responsive-utilities
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Responsive grid column and row utilities
* - Responsive flexbox direction and alignment
* - Responsive gap and spacing controls
* - Mobile-first responsive design approach
* - Consistent breakpoint system across all utilities
* - Optimized CSS output with minimal redundancy
* - Semantic class naming for better maintainability
* - Performance-optimized media queries
*
* 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)
*
* RESPONSIVE GRID UTILITIES:
* - sm:grid-cols-{1-12}: Responsive grid columns
* - md:col-span-{1-12}: Responsive column spans
* - lg:row-span-{1-6}: Responsive row spans
* - xl:grid-auto-fit: Responsive auto-fit layouts
* - 2xl:grid-subgrid: Responsive subgrid layouts
*
* RESPONSIVE FLEX UTILITIES:
* - sm:flex-row: Responsive flex direction
* - md:flex-col: Responsive flex direction
* - lg:items-center: Responsive item alignment
* - xl:justify-between: Responsive content justification
* - 2xl:flex-wrap: Responsive flex wrapping
*
* RESPONSIVE SPACING:
* - sm:gap-{size}: Responsive gap utilities
* - md:space-x-{size}: Responsive horizontal spacing
* - lg:space-y-{size}: Responsive vertical spacing
*
* USAGE EXAMPLES:
*
* Responsive Grid Layout:
* <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
* <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* <div>Item 4</div>
* </div>
*
* Responsive Flex Direction:
* <div class="flex flex-col md:flex-row gap-4">
* <!-- Vertical on mobile, horizontal on tablet+ -->
* <main class="flex-1">Main content</main>
* <aside class="md:w-64">Sidebar</aside>
* </div>
*
* Responsive Column Spans:
* <div class="grid grid-cols-12 gap-4">
* <div class="col-span-12 md:col-span-8 lg:col-span-9">
* <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->
* Main content
* </div>
* <div class="col-span-12 md:col-span-4 lg:col-span-3">
* <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->
* Sidebar
* </div>
* </div>
*
* Responsive Alignment:
* <div class="flex flex-col items-start md:flex-row md:items-center lg:justify-between">
* <!-- Different alignment at each breakpoint -->
* <h1>Title</h1>
* <nav>Navigation</nav>
* </div>
*
* Responsive Card Grid:
* <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
* <!-- Responsive columns with responsive gaps -->
* <div class="card">Card 1</div>
* <div class="card">Card 2</div>
* <div class="card">Card 3</div>
* </div>
*
* Complex Responsive Layout:
* <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
* <header class="col-span-1 lg:col-span-4">Header</header>
* <main class="col-span-1 lg:col-span-3">Main</main>
* <aside class="col-span-1">Sidebar</aside>
* <footer class="col-span-1 lg:col-span-4">Footer</footer>
* </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+)
* - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
* - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
*
* PERFORMANCE NOTES:
* - Mobile-first approach reduces CSS payload for mobile devices
* - Uses min-width media queries for optimal performance
* - Consolidated media queries reduce CSS file size
* - Efficient selector specificity prevents cascade conflicts
* - Gap properties are more performant than margin utilities
*
* ACCESSIBILITY:
* - Responsive layouts maintain semantic HTML structure
* - Grid and flex layouts preserve document flow for screen readers
* - Responsive changes don't affect keyboard navigation order
* - Visual layout changes don't impact assistive technology
* - Ensure content remains accessible at all breakpoints
*
* INTEGRATION:
* - Extends layout/grid-system.css with responsive variants
* - Complements layout/flex-layouts.css with responsive variants
* - Works with layout/spacing.css for responsive spacing
* - Compatible with layout/containers.css for responsive containers
* - Enhanced by layout/responsive.css for display utilities
*
* BEST PRACTICES:
* - Start with mobile-first design approach
* - Use semantic breakpoint names (sm, md, lg, xl, 2xl)
* - Test layouts across all target breakpoints
* - Combine grid and flex utilities for complex layouts
* - Use consistent spacing scales across breakpoints
* - Avoid excessive responsive variants that create maintenance overhead
* - Consider performance impact of complex responsive layouts
*
* DEBUGGING:
* Add responsive debug utilities:
* .debug-responsive::before {
* content: 'mobile';
* position: fixed;
* top: 0%;
* right: 0%;
* background: red;
* color: white;
* padding: 0.25rem;
* }
* @media (min-width: 640px) {
* .debug-responsive::before { content: 'sm'; }
* }
*
* MIGRATION:
* From older responsive systems:
* - .col-md-6 → .col-span-6.md:col-span-6
* - .flex-sm-row → .flex-col.sm:flex-row
* - .d-lg-block → .hidden.lg:block
*/
@layer layout.responsive-utilities {
/* ================= RESPONSIVE GRID UTILITIES ================= */
/* Small screens (640px and up) */
@media (min-width: 640px) {
.sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.sm\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.sm\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sm\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sm\:col-span-1 { grid-column: span 1; }
.sm\:col-span-2 { grid-column: span 2; }
.sm\:col-span-3 { grid-column: span 3; }
.sm\:col-span-4 { grid-column: span 4; }
.sm\:col-span-6 { grid-column: span 6; }
.sm\:col-span-12 { grid-column: span 12; }
.sm\:col-span-full { grid-column: 1 / -1; }
.sm\:row-span-1 { grid-row: span 1; }
.sm\:row-span-2 { grid-row: span 2; }
.sm\:row-span-3 { grid-row: span 3; }
.sm\:row-span-4 { grid-row: span 4; }
.sm\:row-span-5 { grid-row: span 5; }
.sm\:row-span-6 { grid-row: span 6; }
.sm\:row-span-full { grid-row: 1 / -1; }
}
/* Medium screens (768px and up) */
@media (min-width: 768px) {
.md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.md\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.md\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.md\:col-span-1 { grid-column: span 1; }
.md\:col-span-2 { grid-column: span 2; }
.md\:col-span-3 { grid-column: span 3; }
.md\:col-span-4 { grid-column: span 4; }
.md\:col-span-6 { grid-column: span 6; }
.md\:col-span-12 { grid-column: span 12; }
.md\:col-span-full { grid-column: 1 / -1; }
.md\:row-span-1 { grid-row: span 1; }
.md\:row-span-2 { grid-row: span 2; }
.md\:row-span-3 { grid-row: span 3; }
.md\:row-span-4 { grid-row: span 4; }
.md\:row-span-5 { grid-row: span 5; }
.md\:row-span-6 { grid-row: span 6; }
.md\:row-span-full { grid-row: 1 / -1; }
}
/* Large screens (1024px and up) */
@media (min-width: 1024px) {
.lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.lg\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lg\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.lg\:col-span-1 { grid-column: span 1; }
.lg\:col-span-2 { grid-column: span 2; }
.lg\:col-span-3 { grid-column: span 3; }
.lg\:col-span-4 { grid-column: span 4; }
.lg\:col-span-6 { grid-column: span 6; }
.lg\:col-span-12 { grid-column: span 12; }
.lg\:col-span-full { grid-column: 1 / -1; }
.lg\:row-span-1 { grid-row: span 1; }
.lg\:row-span-2 { grid-row: span 2; }
.lg\:row-span-3 { grid-row: span 3; }
.lg\:row-span-4 { grid-row: span 4; }
.lg\:row-span-5 { grid-row: span 5; }
.lg\:row-span-6 { grid-row: span 6; }
.lg\:row-span-full { grid-row: 1 / -1; }
}
/* Extra large screens (1280px and up) */
@media (width >= 1280px) {
.xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.xl\:col-span-1 { grid-column: span 1; }
.xl\:col-span-2 { grid-column: span 2; }
.xl\:col-span-3 { grid-column: span 3; }
.xl\:col-span-4 { grid-column: span 4; }
.xl\:col-span-6 { grid-column: span 6; }
.xl\:col-span-12 { grid-column: span 12; }
.xl\:col-span-full { grid-column: 1 / -1; }
.xl\:row-span-1 { grid-row: span 1; }
.xl\:row-span-2 { grid-row: span 2; }
.xl\:row-span-3 { grid-row: span 3; }
.xl\:row-span-4 { grid-row: span 4; }
.xl\:row-span-5 { grid-row: span 5; }
.xl\:row-span-6 { grid-row: span 6; }
.xl\:row-span-full { grid-row: 1 / -1; }
}
/* 2X large screens (1536px and up) */
@media (width >= 1536px) {
.\32xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.\32xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.\32xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.\32xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.\32xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.\32xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.\32xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.\32xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.\32xl\:col-span-1 { grid-column: span 1; }
.\32xl\:col-span-2 { grid-column: span 2; }
.\32xl\:col-span-3 { grid-column: span 3; }
.\32xl\:col-span-4 { grid-column: span 4; }
.\32xl\:col-span-6 { grid-column: span 6; }
.\32xl\:col-span-12 { grid-column: span 12; }
.\32xl\:col-span-full { grid-column: 1 / -1; }
.\32xl\:row-span-1 { grid-row: span 1; }
.\32xl\:row-span-2 { grid-row: span 2; }
.\32xl\:row-span-3 { grid-row: span 3; }
.\32xl\:row-span-4 { grid-row: span 4; }
.\32xl\:row-span-5 { grid-row: span 5; }
.\32xl\:row-span-6 { grid-row: span 6; }
.\32xl\:row-span-full { grid-row: 1 / -1; }
}
}