|
| 1 | +/* Reset box-sizing to border-box for all elements and pseudo-elements */ |
| 2 | +*, *::before, *::after { |
| 3 | + box-sizing: border-box; |
| 4 | +} |
| 5 | + |
| 6 | +/* Grid System */ |
| 7 | +.row { |
| 8 | + display: grid; |
| 9 | + grid-template-columns: repeat(12, 1fr); |
| 10 | + gap: 1rem; |
| 11 | +} |
| 12 | + |
| 13 | +.col-start-1 { grid-column-start: 1; } |
| 14 | +.col-start-2 { grid-column-start: 2; } |
| 15 | +.col-start-3 { grid-column-start: 3; } |
| 16 | +.col-start-4 { grid-column-start: 4; } |
| 17 | +.col-start-5 { grid-column-start: 5; } |
| 18 | +.col-start-6 { grid-column-start: 6; } |
| 19 | +.col-start-7 { grid-column-start: 7; } |
| 20 | +.col-start-8 { grid-column-start: 8; } |
| 21 | +.col-start-9 { grid-column-start: 9; } |
| 22 | +.col-start-10 { grid-column-start: 10; } |
| 23 | +.col-start-11 { grid-column-start: 11; } |
| 24 | +.col-start-12 { grid-column-start: 12; } |
| 25 | + |
| 26 | +.col-end-1 { grid-column-end: 1; } |
| 27 | +.col-end-2 { grid-column-end: 2; } |
| 28 | +.col-end-3 { grid-column-end: 3; } |
| 29 | +.col-end-4 { grid-column-end: 4; } |
| 30 | +.col-end-5 { grid-column-end: 5; } |
| 31 | +.col-end-6 { grid-column-end: 6; } |
| 32 | +.col-end-7 { grid-column-end: 7; } |
| 33 | +.col-end-8 { grid-column-end: 8; } |
| 34 | +.col-end-9 { grid-column-end: 9; } |
| 35 | +.col-end-10 { grid-column-end: 10; } |
| 36 | +.col-end-11 { grid-column-end: 11; } |
| 37 | +.col-end-12 { grid-column-end: 12; } |
| 38 | +.col-end-13 { grid-column-end: 13; } |
| 39 | + |
| 40 | +/* Development helpers - remove in production */ |
| 41 | +.row { |
| 42 | + border: 1px solid blue; |
| 43 | + padding: 1rem; |
| 44 | +} |
| 45 | + |
| 46 | +.col-start-1[class*="col-end-"] { |
| 47 | + border: 2px solid green; |
| 48 | + padding: 0.5rem; |
| 49 | +} |
0 commit comments