Skip to content

Commit eeb7793

Browse files
arinkerarinker
committed
Refactor CSS files to use modulate-module-grid.css for improved styling and build process
1 parent 281ae38 commit eeb7793

2 files changed

Lines changed: 144 additions & 0 deletions

File tree

‎dist/css/modulate-module-grid.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
@layer base, typography, primitive, page, module, widget, utility, theme, override;
2+
3+
/* ====================================================================================================
4+
Defaults
5+
==================================================================================================== */
6+
@layer base {
7+
:root {
8+
--grid-s-min: 400; /* Screen Size Min for Fluid Sizing of the Grid */
9+
--grid-s-max: 1400; /* Screen Size Max for Fluid Sizing of the Grid */
10+
--grid-rem: 16; /* Pixel per REM for Fluid Sizing of the Grid */
11+
--grid-width-max: 1400; /* Maximum Grid Width */
12+
--grid-columns: 12; /* Number of Grid Columns */
13+
--grid-padding: 10; /* Grid Padding */
14+
--frame-width-min: 0; /* Minimum Frame Width */
15+
--frame-width-max: 100; /* Maximum Frame Width */
16+
--column-gap-min: 10; /* Minimum Column Gap Width */
17+
--column-gap-max: 100; /* Maximum Column Gap Width */
18+
--row-gap-min: 10; /* Minimum Row Gap Width */
19+
--row-gap-max: 100; /* Maximum Row Gap Width */
20+
21+
--module-padding-block-start-min: 0;
22+
--module-padding-block-start-max: 0;
23+
--module-padding-block-end-min: 0;
24+
--module-padding-block-end-max: 0;
25+
--module-margin-block-start-min: 0;
26+
--module-margin-block-start-max: 0;
27+
--module-margin-block-end-min: 0;
28+
--module-margin-block-end-max: 0;
29+
30+
--autolayout-width: 320px;
31+
}
32+
}
33+
34+
/* ====================================================================================================
35+
Fluid Sizing
36+
==================================================================================================== */
37+
@layer base {
38+
:root {
39+
--row-gap-v: calc(((100 * (var(--row-gap-max) - var(--row-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
40+
--row-gap-r: calc((((var(--grid-s-min) * var(--row-gap-max)) - (var(--grid-s-max) * var(--row-gap-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
41+
--row-gap: clamp(calc((var(--row-gap-min) / var(--grid-rem)) * 1rem), calc(var(--row-gap-v) + var(--row-gap-r) * 1rem), calc((var(--row-gap-max) / var(--grid-rem)) * 1rem));
42+
43+
--column-gap-v: calc(((100 * (var(--column-gap-max) - var(--column-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
44+
--column-gap-r: calc((((var(--grid-s-min) * var(--column-gap-max)) - (var(--grid-s-max) * var(--column-gap-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
45+
--column-gap: clamp(calc((var(--column-gap-min) / var(--grid-rem)) * 1rem), calc(var(--column-gap-v) + var(--column-gap-r) * 1rem), calc((var(--column-gap-max) / var(--grid-rem)) * 1rem));
46+
}
47+
}
48+
49+
/* ====================================================================================================
50+
Layout
51+
==================================================================================================== */
52+
@layer base {
53+
.module-grid {
54+
--module-margin-block-start-v: calc(((100 * (var(--module-margin-block-start-max) - var(--module-margin-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
55+
--module-margin-block-start-r: calc((((var(--grid-s-min) * var(--module-margin-block-start-max)) - (var(--grid-s-max) * var(--module-margin-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
56+
--module-margin-block-start: clamp(calc((var(--module-margin-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-start-v) + var(--module-margin-block-start-r) * 1rem), calc((var(--module-margin-block-start-max) / var(--grid-rem)) * 1rem));
57+
58+
--module-margin-block-end-v: calc(((100 * (var(--module-margin-block-end-max) - var(--module-margin-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
59+
--module-margin-block-end-r: calc((((var(--grid-s-min) * var(--module-margin-block-end-max)) - (var(--grid-s-max) * var(--module-margin-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
60+
--module-margin-block-end: clamp(calc((var(--module-margin-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-end-v) + var(--module-margin-block-end-r) * 1rem), calc((var(--module-margin-block-end-max) / var(--grid-rem)) * 1rem));
61+
62+
--module-padding-block-start-v: calc(((100 * (var(--module-padding-block-start-max) - var(--module-padding-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
63+
--module-padding-block-start-r: calc((((var(--grid-s-min) * var(--module-padding-block-start-max)) - (var(--grid-s-max) * var(--module-padding-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
64+
--module-padding-block-start: clamp(calc((var(--module-padding-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-start-v) + var(--module-padding-block-start-r) * 1rem), calc((var(--module-padding-block-start-max) / var(--grid-rem)) * 1rem));
65+
66+
--module-padding-block-end-v: calc(((100 * (var(--module-padding-block-end-max) - var(--module-padding-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
67+
--module-padding-block-end-r: calc((((var(--grid-s-min) * var(--module-padding-block-end-max)) - (var(--grid-s-max) * var(--module-padding-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
68+
--module-padding-block-end: clamp(calc((var(--module-padding-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-end-v) + var(--module-padding-block-end-r) * 1rem), calc((var(--module-padding-block-end-max) / var(--grid-rem)) * 1rem));
69+
70+
background: var(--cs-background-framed);
71+
position: relative;
72+
display: grid;
73+
width: 100dvw;
74+
gap: 0;
75+
76+
--module-grid-rows: [row-start] minmax(0, min-content) [row-end];
77+
78+
grid-template-rows:
79+
[module-start]
80+
var(--module-margin-block-start)
81+
[frame-start]
82+
var(--module-padding-block-start)
83+
var(--module-grid-rows)
84+
var(--module-padding-block-end)
85+
[frame-end]
86+
var(--module-margin-block-end)
87+
[module-end];
88+
89+
--column-width: [col-start] minmax(0, calc(((var(--grid-width-max) * 1px) - ((var(--grid-columns) - 1) * var(--column-gap))) / var(--grid-columns))) [col-end];
90+
--gap-half: calc(var(--column-gap) / 2);
91+
--split-gap: var(--gap-half) [gap] var(--gap-half);
92+
--column-repeat: repeat(calc((var(--grid-columns) / 2) - 1), var(--column-width) var(--split-gap));
93+
--columns: var(--column-repeat) var(--column-width) var(--split-gap) var(--column-repeat) var(--column-width);
94+
--frame-width: minmax(calc(var(--frame-width-min) * 1px), calc(var(--frame-width-max) * 1px));
95+
96+
grid-template-columns:
97+
[screen-start]
98+
calc(var(--grid-padding) * 1px)
99+
[padding-start]
100+
1fr
101+
[frame-start]
102+
var(--frame-width)
103+
var(--columns)
104+
var(--frame-width)
105+
[frame-end]
106+
1fr
107+
[padding-end]
108+
calc(var(--grid-padding) * 1px)
109+
[screen-end];
110+
111+
/* ----------------------------------------------------------------------------------------
112+
Backdrop & Background
113+
*/
114+
&::before {
115+
content: "";
116+
position: relative;
117+
background: var(--cs-backdrop);
118+
z-index: 1;
119+
}
120+
121+
&::after {
122+
content: "";
123+
position: relative;
124+
background: var(--cs-background);
125+
z-index: 2;
126+
}
127+
128+
& > * {
129+
z-index: 3;
130+
}
131+
}
132+
133+
/* ----------------------------------------------------------------------------------------
134+
Card Grid
135+
*/
136+
.autolayout {
137+
display: grid;
138+
grid-template-columns: repeat(auto-fit, minmax(var(--autolayout-width), 1fr));
139+
column-gap: var(--column-gap);
140+
row-gap: var(--row-gap);
141+
max-inline-size: 100%;
142+
}
143+
}

‎dist/css/modulate-module-grid.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)