Skip to content

Commit b0f53d0

Browse files
arinkerarinker
committed
Refactor CSS files and modulate.css for improved styling and build process
1 parent ebdbef6 commit b0f53d0

14 files changed

Lines changed: 1896 additions & 241 deletions

‎dist/css/modulate-advanced-page-grid.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@layer base, typography, primitives, pages, sections, widgets, utilities, theme, overrides;
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+
--spacing-xs-min: 8;
22+
--spacing-xs-max: 16;
23+
--spacing-sm-min: 16;
24+
--spacing-sm-max: 32;
25+
--spacing-md-min: 32;
26+
--spacing-md-max: 92;
27+
--spacing-lg-min: 64;
28+
--spacing-lg-max: 128;
29+
--spacing-xl-min: 128;
30+
--spacing-xl-max: 256;
31+
--spacing-2xl-min: 256;
32+
--spacing-2xl-max: 512;
33+
--autolayout-width: 320px;
34+
}
35+
}
36+
37+
/* ====================================================================================================
38+
Fluid Sizing
39+
==================================================================================================== */
40+
@layer base {
41+
:root {
42+
--row-gap-v: calc(((100 * (var(--row-gap-max) - var(--row-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
43+
--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));
44+
--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));
45+
46+
--column-gap-v: calc(((100 * (var(--column-gap-max) - var(--column-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
47+
--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));
48+
--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));
49+
50+
--spacing-xs-v: calc(((100 * (var(--spacing-xs-max) - var(--spacing-xs-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
51+
--spacing-xs-r: calc((((var(--grid-s-min) * var(--spacing-xs-max)) - (var(--grid-s-max) * var(--spacing-xs-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
52+
--spacing-xs: clamp(calc((var(--spacing-xs-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-xs-v) + var(--spacing-xs-r) * 1rem), calc((var(--spacing-xs-max) / var(--grid-rem)) * 1rem));
53+
54+
--spacing-sm-v: calc(((100 * (var(--spacing-sm-max) - var(--spacing-sm-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
55+
--spacing-sm-r: calc((((var(--grid-s-min) * var(--spacing-sm-max)) - (var(--grid-s-max) * var(--spacing-sm-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
56+
--spacing-sm: clamp(calc((var(--spacing-sm-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-sm-v) + var(--spacing-sm-r) * 1rem), calc((var(--spacing-sm-max) / var(--grid-rem)) * 1rem));
57+
58+
--spacing-md-v: calc(((100 * (var(--spacing-md-max) - var(--spacing-md-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
59+
--spacing-md-r: calc((((var(--grid-s-min) * var(--spacing-md-max)) - (var(--grid-s-max) * var(--spacing-md-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
60+
--spacing-md: clamp(calc((var(--spacing-md-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-md-v) + var(--spacing-md-r) * 1rem), calc((var(--spacing-md-max) / var(--grid-rem)) * 1rem));
61+
62+
--spacing-lg-v: calc(((100 * (var(--spacing-lg-max) - var(--spacing-lg-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
63+
--spacing-lg-r: calc((((var(--grid-s-min) * var(--spacing-lg-max)) - (var(--grid-s-max) * var(--spacing-lg-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
64+
--spacing-lg: clamp(calc((var(--spacing-lg-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-lg-v) + var(--spacing-lg-r) * 1rem), calc((var(--spacing-lg-max) / var(--grid-rem)) * 1rem));
65+
66+
--spacing-xl-v: calc(((100 * (var(--spacing-xl-max) - var(--spacing-xl-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
67+
--spacing-xl-r: calc((((var(--grid-s-min) * var(--spacing-xl-max)) - (var(--grid-s-max) * var(--spacing-xl-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
68+
--spacing-xl: clamp(calc((var(--spacing-xl-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-xl-v) + var(--spacing-xl-r) * 1rem), calc((var(--spacing-xl-max) / var(--grid-rem)) * 1rem));
69+
70+
--spacing-2xl-v: calc(((100 * (var(--spacing-2xl-max) - var(--spacing-2xl-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
71+
--spacing-2xl-r: calc((((var(--grid-s-min) * var(--spacing-2xl-max)) - (var(--grid-s-max) * var(--spacing-2xl-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
72+
--spacing-2xl: clamp(calc((var(--spacing-2xl-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-2xl-v) + var(--spacing-2xl-r) * 1rem), calc((var(--spacing-2xl-max) / var(--grid-rem)) * 1rem));
73+
}
74+
}
75+
76+
/* ====================================================================================================
77+
Layout
78+
==================================================================================================== */
79+
@layer base {
80+
.page-grid {
81+
background: var(--cs-background-framed);
82+
position: relative;
83+
display: grid;
84+
width: 100dvw;
85+
gap: 0;
86+
87+
--section-padding-block-start: 0;
88+
--section-padding-block-end: 0;
89+
--section-margin-block-start: 0;
90+
--section-margin-block-end: 0;
91+
--page-grid-rows: [row-start] minmax(0, min-content) [row-end];
92+
93+
grid-template-rows:
94+
[module-start]
95+
var(--section-margin-block-start)
96+
[frame-start]
97+
var(--section-padding-block-start)
98+
var(--page-grid-rows)
99+
var(--section-padding-block-end)
100+
[frame-end]
101+
var(--section-margin-block-end)
102+
[module-end];
103+
104+
--column-width: [col-start] minmax(0, calc(((var(--grid-width-max) * 1px) - ((var(--grid-columns) - 1) * var(--column-gap))) / var(--grid-columns))) [col-end];
105+
--gap-half: calc(var(--column-gap) / 2);
106+
--split-gap: var(--gap-half) [gap] var(--gap-half);
107+
--column-repeat: repeat(calc((var(--grid-columns) / 2) - 1), var(--column-width) var(--split-gap));
108+
--columns: var(--column-repeat) var(--column-width) var(--split-gap) var(--column-repeat) var(--column-width);
109+
--frame-width: minmax(calc(var(--frame-width-min) * 1px), calc(var(--frame-width-max) * 1px));
110+
111+
grid-template-columns:
112+
[screen-start]
113+
calc(var(--grid-padding) * 1px)
114+
[padding-start]
115+
1fr
116+
[frame-start]
117+
var(--frame-width)
118+
var(--columns)
119+
var(--frame-width)
120+
[frame-end]
121+
1fr
122+
[padding-end]
123+
calc(var(--grid-padding) * 1px)
124+
[screen-end];
125+
126+
/* ----------------------------------------------------------------------------------------
127+
Backdrop & Background
128+
*/
129+
&::before {
130+
content: "";
131+
position: relative;
132+
background: var(--cs-backdrop);
133+
z-index: 1;
134+
}
135+
136+
&::after {
137+
content: "";
138+
position: relative;
139+
background: var(--cs-background);
140+
z-index: 2;
141+
}
142+
143+
& > * {
144+
z-index: 3;
145+
}
146+
}
147+
148+
/* ----------------------------------------------------------------------------------------
149+
Card Grid
150+
*/
151+
.autolayout {
152+
display: grid;
153+
grid-template-columns: repeat(auto-fit, minmax(var(--autolayout-width), 1fr));
154+
column-gap: var(--column-gap);
155+
row-gap: var(--row-gap);
156+
max-inline-size: 100%;
157+
}
158+
}

‎dist/css/modulate-advanced-page-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.

‎dist/css/modulate-base.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
@layer base, typography, primitives, pages, sections, widgets, utilities, theme, overrides;
2+
3+
/* ====================================================================================================
4+
Defaults
5+
==================================================================================================== */
6+
@layer base {
7+
:root {
8+
--font-optical-sizing: auto;
9+
--quotes-spacing: 0.12em; /* Define spacing units */
10+
--quotes-primary-open: "“";
11+
--quotes-primary-close: "”";
12+
--quotes-secondary-open: "‘";
13+
--quotes-secondary-close: "’";
14+
}
15+
16+
body {
17+
font-optical-sizing: var(--font-optical-sizing);
18+
}
19+
}
20+
21+
/* ====================================================================================================
22+
Localization
23+
==================================================================================================== */
24+
@layer base {
25+
blockquote,
26+
q {
27+
quotes: var(--quotes-primary-open) var(--quotes-primary-close) var(--quotes-secondary-open) var(--quotes-secondary-close);
28+
}
29+
30+
blockquote:not(:has(p))::before,
31+
q:not(:has(p))::before,
32+
blockquote:has(p) p:first-of-type::before,
33+
q:has(p) p:first-of-type::before {
34+
content: open-quote;
35+
margin-inline-end: var(--quotes-spacing);
36+
}
37+
38+
blockquote:not(:has(p))::after,
39+
q:not(:has(p))::after,
40+
blockquote:has(p) p:last-of-type::after,
41+
q:has(p) p:last-of-type::after {
42+
content: close-quote;
43+
margin-inline-start: var(--quotes-spacing);
44+
}
45+
}
46+
47+
/* ====================================================================================================
48+
Reset
49+
==================================================================================================== */
50+
@layer base {
51+
html,
52+
body,
53+
div,
54+
span,
55+
applet,
56+
object,
57+
iframe,
58+
h1,
59+
h2,
60+
h3,
61+
h4,
62+
h5,
63+
h6,
64+
p,
65+
blockquote,
66+
pre,
67+
a,
68+
abbr,
69+
acronym,
70+
address,
71+
big,
72+
cite,
73+
code,
74+
del,
75+
dfn,
76+
em,
77+
img,
78+
ins,
79+
kbd,
80+
q,
81+
s,
82+
samp,
83+
small,
84+
strike,
85+
strong,
86+
sub,
87+
sup,
88+
tt,
89+
var,
90+
b,
91+
u,
92+
i,
93+
center,
94+
dl,
95+
dt,
96+
dd,
97+
ol,
98+
ul,
99+
li,
100+
fieldset,
101+
form,
102+
label,
103+
legend,
104+
table,
105+
caption,
106+
tbody,
107+
tfoot,
108+
thead,
109+
tr,
110+
th,
111+
td,
112+
article,
113+
aside,
114+
canvas,
115+
details,
116+
embed,
117+
figure,
118+
figcaption,
119+
footer,
120+
header,
121+
hgroup,
122+
menu,
123+
nav,
124+
output,
125+
ruby,
126+
section,
127+
summary,
128+
time,
129+
mark,
130+
audio,
131+
video {
132+
margin: 0;
133+
padding: 0;
134+
border: 0;
135+
font-size: 100%;
136+
font: inherit;
137+
vertical-align: baseline;
138+
}
139+
140+
/* HTML5 display-role reset for older browsers */
141+
article,
142+
aside,
143+
details,
144+
figcaption,
145+
figure,
146+
footer,
147+
header,
148+
hgroup,
149+
menu,
150+
nav,
151+
section {
152+
display: block;
153+
}
154+
155+
body {
156+
line-height: 1;
157+
}
158+
159+
ol,
160+
ul {
161+
list-style: none;
162+
}
163+
164+
blockquote,
165+
q {
166+
quotes: none;
167+
}
168+
169+
blockquote:before,
170+
blockquote:after,
171+
q:before,
172+
q:after {
173+
content: "";
174+
content: none;
175+
}
176+
177+
table {
178+
border-collapse: collapse;
179+
border-spacing: 0;
180+
}
181+
182+
img {
183+
width: 100%;
184+
height: 100%;
185+
}
186+
187+
html {
188+
scroll-behavior: smooth;
189+
}
190+
}

‎dist/css/modulate-base.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)