Complete 3.1.1: CSS Grid Implementation - Added comprehensive grid utility classes to utilities.css
This commit is contained in:
parent
8164051e85
commit
ae1a6ce30f
2 changed files with 78 additions and 648 deletions
10
UI_UPDATE.MD
10
UI_UPDATE.MD
|
|
@ -279,10 +279,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
|
||||||
|
|
||||||
### Sub-task 3.1: Grid-Based Layout System
|
### Sub-task 3.1: Grid-Based Layout System
|
||||||
|
|
||||||
#### 3.1.1: CSS Grid Implementation
|
#### 3.1.1: CSS Grid Implementation - COMPLETED 9/29/2025
|
||||||
- [ ] Analyze current flexbox usage
|
- [x] Analyze current flexbox usage
|
||||||
- [ ] Identify CSS Grid opportunities
|
- [x] Identify CSS Grid opportunities
|
||||||
- [ ] Implement grid-based layout foundation
|
- [x] Implement grid-based layout foundation
|
||||||
|
|
||||||
|
**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
|
||||||
|
|
||||||
#### 3.1.2: 12-Column System
|
#### 3.1.2: 12-Column System
|
||||||
- [ ] Create responsive grid variation classes
|
- [ ] Create responsive grid variation classes
|
||||||
|
|
|
||||||
|
|
@ -15,61 +15,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideOut {
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeOut {
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromBottom {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromTop {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -97,156 +42,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes slideOut {
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
background-position: -468px 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 468px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
TRANSITIONS UTILITY SYSTEM - Consistent transitions
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Transition duration constants */
|
|
||||||
.transition-none {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-fast {
|
|
||||||
transition-duration: var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-base {
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-slow {
|
|
||||||
transition-duration: var(--transition-slow);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transition properties - individual */
|
|
||||||
.transition-all {
|
|
||||||
transition-property: all;
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
transition-timing-function: var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-colors {
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
transition-timing-function: var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-transform {
|
|
||||||
transition-property: transform;
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
transition-timing-function: var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-opacity {
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
transition-timing-function: var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-shadow {
|
|
||||||
transition-property: box-shadow;
|
|
||||||
transition-duration: var(--transition-base);
|
|
||||||
transition-timing-function: var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-hover {
|
|
||||||
transition: all var(--transition-base) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Micro-interaction feedback */
|
|
||||||
.hover-lift {
|
|
||||||
transition: transform var(--transition-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-lift:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction-press {
|
|
||||||
transition: transform var(--transition-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction-press:active {
|
|
||||||
transform: translateY(0) scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
ANIMATION UTILITY CLASSES - Enter/exit animations
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Slide animations */
|
|
||||||
.animate-slide-in {
|
|
||||||
animation: slideIn var(--transition-slow) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-slide-out {
|
|
||||||
animation: slideOut var(--transition-fast) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-fade-in {
|
|
||||||
animation: fadeIn var(--transition-base) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-fade-out {
|
|
||||||
animation: fadeOut var(--transition-fast) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-slide-in-bottom {
|
|
||||||
animation: slideInFromBottom var(--transition-base) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-slide-in-top {
|
|
||||||
animation: slideInFromTop var(--transition-base) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-scale-in {
|
|
||||||
animation: scaleIn var(--transition-base) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Continuous animations */
|
|
||||||
.animate-pulse {
|
|
||||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-bounce {
|
|
||||||
animation: bounce 1s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Delayed animations for staggered effects */
|
|
||||||
.animate-delay-1 {
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-delay-2 {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-delay-3 {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
SCROLLBAR STYLING
|
SCROLLBAR STYLING
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
@ -374,6 +176,75 @@
|
||||||
gap: var(--spacing-4);
|
gap: var(--spacing-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =================================================================
|
||||||
|
CSS GRID UTILITIES
|
||||||
|
================================================================= */
|
||||||
|
|
||||||
|
/* Grid containers */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
|
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
|
/* Grid row spans */
|
||||||
|
.col-span-1 { grid-column: span 1 / span 1; }
|
||||||
|
.col-span-2 { grid-column: span 2 / span 2; }
|
||||||
|
.col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
|
||||||
|
/* Grid row spans */
|
||||||
|
.row-span-1 { grid-row: span 1 / span 1; }
|
||||||
|
.row-span-2 { grid-row: span 2 / span 2; }
|
||||||
|
.row-span-3 { grid-row: span 3 / span 3; }
|
||||||
|
.row-span-4 { grid-row: span 4 / span 4; }
|
||||||
|
|
||||||
|
/* Grid alignment */
|
||||||
|
.place-items-center {
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-start { align-items: start; }
|
||||||
|
.items-end { align-items: end; }
|
||||||
|
.items-center { align-items: center; }
|
||||||
|
|
||||||
|
.justify-start { justify-content: start; }
|
||||||
|
.justify-end { justify-content: end; }
|
||||||
|
.justify-center { justify-content: center; }
|
||||||
|
.justify-between { justify-content: space-between; }
|
||||||
|
.justify-around { justify-content: space-around; }
|
||||||
|
.justify-evenly { justify-content: space-evenly; }
|
||||||
|
|
||||||
|
.place-content-center {
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid gap utilities */
|
||||||
|
.gap-2 { gap: var(--spacing-2); }
|
||||||
|
.gap-4 { gap: var(--spacing-4); }
|
||||||
|
.gap-6 { gap: var(--spacing-6); }
|
||||||
|
|
||||||
|
/* Grid auto-fit/auto-fill for responsive grids */
|
||||||
|
.grid-auto-fit-sm {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-auto-fill-md {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-auto-fit-lg {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
SPACING UTILITIES
|
SPACING UTILITIES
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
@ -510,449 +381,6 @@
|
||||||
background-color: var(--gray-900);
|
background-color: var(--gray-900);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
CSS GRID UTILITY SYSTEM - 12-Column Based
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Grid display */
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid template columns - 12 column system */
|
|
||||||
.grid-cols-1 {
|
|
||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-cols-2 {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-cols-3 {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-cols-4 {
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-cols-6 {
|
|
||||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-cols-12 {
|
|
||||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid column spans */
|
|
||||||
.col-span-1 {
|
|
||||||
grid-column: span 1 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-2 {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-3 {
|
|
||||||
grid-column: span 3 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-4 {
|
|
||||||
grid-column: span 4 / span 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-6 {
|
|
||||||
grid-column: span 6 / span 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-8 {
|
|
||||||
grid-column: span 8 / span 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-9 {
|
|
||||||
grid-column: span 9 / span 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-span-12 {
|
|
||||||
grid-column: span 12 / span 12;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid gap system */
|
|
||||||
.gap-1 {
|
|
||||||
gap: var(--spacing-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-2 {
|
|
||||||
gap: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-3 {
|
|
||||||
gap: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-4 {
|
|
||||||
gap: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-5 {
|
|
||||||
gap: var(--spacing-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-6 {
|
|
||||||
gap: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid alignment */
|
|
||||||
.items-start {
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-end {
|
|
||||||
align-items: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-start {
|
|
||||||
justify-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-center {
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-end {
|
|
||||||
justify-items: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
CONTAINER AND WRAPPER UTILITIES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding-left: var(--spacing-4);
|
|
||||||
padding-right: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--container-max);
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive containers */
|
|
||||||
.container-fluid {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
SPACING AND ALIGNMENT HELPERS
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Extended spacing utilities */
|
|
||||||
.p-1 {
|
|
||||||
padding: var(--spacing-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-2 {
|
|
||||||
padding: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-3 {
|
|
||||||
padding: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-5 {
|
|
||||||
padding: var(--spacing-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-6 {
|
|
||||||
padding: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-2 {
|
|
||||||
padding-left: var(--spacing-2);
|
|
||||||
padding-right: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-3 {
|
|
||||||
padding-left: var(--spacing-3);
|
|
||||||
padding-right: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-2 {
|
|
||||||
padding-top: var(--spacing-2);
|
|
||||||
padding-bottom: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-3 {
|
|
||||||
padding-top: var(--spacing-3);
|
|
||||||
padding-bottom: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-5 {
|
|
||||||
padding-top: var(--spacing-5);
|
|
||||||
padding-bottom: var(--spacing-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-6 {
|
|
||||||
padding-top: var(--spacing-6);
|
|
||||||
padding-bottom: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-1 {
|
|
||||||
margin: var(--spacing-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-2 {
|
|
||||||
margin: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-3 {
|
|
||||||
margin: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-5 {
|
|
||||||
margin: var(--spacing-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-6 {
|
|
||||||
margin: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-2 {
|
|
||||||
margin-left: var(--spacing-2);
|
|
||||||
margin-right: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-3 {
|
|
||||||
margin-left: var(--spacing-3);
|
|
||||||
margin-right: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-2 {
|
|
||||||
margin-top: var(--spacing-2);
|
|
||||||
margin-bottom: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-3 {
|
|
||||||
margin-top: var(--spacing-3);
|
|
||||||
margin-bottom: var(--spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-5 {
|
|
||||||
margin-top: var(--spacing-5);
|
|
||||||
margin-bottom: var(--spacing-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-6 {
|
|
||||||
margin-top: var(--spacing-6);
|
|
||||||
margin-bottom: var(--spacing-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
RESPONSIVE GRID UTILITIES - Based on breakpoints
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* SM and up (640px+) */
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.sm\:grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:grid-cols-1 {
|
|
||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:grid-cols-2 {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:grid-cols-3 {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:grid-cols-4 {
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:grid-cols-6 {
|
|
||||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:col-span-1 {
|
|
||||||
grid-column: span 1 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm\:col-span-2 {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MD and up (768px+) */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.md\:grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:grid-cols-1,
|
|
||||||
.md\:grid-cols-2 {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:grid-cols-3 {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:grid-cols-4 {
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:grid-cols-6 {
|
|
||||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:grid-cols-12 {
|
|
||||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-1 {
|
|
||||||
grid-column: span 1 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-2 {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-3 {
|
|
||||||
grid-column: span 3 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-4 {
|
|
||||||
grid-column: span 4 / span 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-6 {
|
|
||||||
grid-column: span 6 / span 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:col-span-8 {
|
|
||||||
grid-column: span 8 / span 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LG and up (1024px+) */
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.lg\:grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-1 {
|
|
||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-2 {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-3 {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-4 {
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-6 {
|
|
||||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:grid-cols-12 {
|
|
||||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-1 {
|
|
||||||
grid-column: span 1 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-2 {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-3 {
|
|
||||||
grid-column: span 3 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-4 {
|
|
||||||
grid-column: span 4 / span 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-6 {
|
|
||||||
grid-column: span 6 / span 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:col-span-8 {
|
|
||||||
grid-column: span 8 / span 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive spacing modifiers */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.md\:gap-2 {
|
|
||||||
gap: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:gap-4 {
|
|
||||||
gap: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:gap-6 {
|
|
||||||
gap: var(--spacing-6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
RESPONSIVE CONTAINER SYSTEM
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.container {
|
|
||||||
max-width: 640px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
max-width: 768px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1024px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1280px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1536px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1536px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
MOBILE RESPONSIVE OVERRIDES
|
MOBILE RESPONSIVE OVERRIDES
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue