Complete 3.1.2: Create responsive grid variation classes and 3.1.3: Create container and wrapper utilities - Implement 12-column grid system with responsive variants and spacing utilities
This commit is contained in:
parent
1879c44202
commit
e87336ecc7
1 changed files with 446 additions and 0 deletions
|
|
@ -310,6 +310,452 @@
|
|||
|
||||
.bg-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
|
||||
================================================================= */
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue