lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
feat: v3 css rewrite
+258
-299
+258
-299
dev.css
+258
-299
dev.css
···
1
+
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
3
+
/* 1. Configuration */
1
4
:root {
2
-
/* Font families - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
3
-
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
4
-
"Segoe UI", sans-serif;
5
-
--dc-font-mono: "Geist Mono", monospace;
6
-
/* Light colors */
7
-
--dc-tx-1: #000000;
8
-
--dc-tx-2: #1a1a1a;
9
-
--dc-bg-1: #fafafa;
10
-
--dc-bg-2: #fff;
11
-
--dc-bg-3: #ebebeb;
12
-
--dc-lk-1: #0068d6;
13
-
--dc-lkb-1: #0072f5;
14
-
--dc-lkb-2: #0062d1;
15
-
--dc-lkb-tx: #ededed;
16
-
--dc-ac-1: #8e4ec6;
17
-
--dc-ac-tx: #ededed;
18
-
/* Dark colors */
19
-
--dc-d-tx-1: #ededed;
20
-
--dc-d-tx-2: #a1a1a1;
21
-
--dc-d-bg-1: #000;
22
-
--dc-d-bg-2: #0a0a0a;
23
-
--dc-d-bg-3: #2e2e2e;
24
-
--dc-d-lk-1: #52a8ff;
25
-
--dc-d-lkb-1: #0072f5;
26
-
--dc-d-lkb-2: #0062d1;
27
-
--dc-d-lkb-tx: #ededed;
28
-
--dc-d-ac-1: #8e4ec6;
29
-
--dc-d-ac-tx: #ededed;
5
+
/* Font families */
6
+
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
7
+
"Segoe UI", sans-serif;
8
+
--dc-font-mono: "Geist Mono", monospace;
9
+
10
+
/* Light colors */
11
+
--dc-tx-1: #000000;
12
+
--dc-tx-2: #1a1a1a;
13
+
--dc-bg-1: #fafafa;
14
+
--dc-bg-2: #fff;
15
+
--dc-bg-3: #ebebeb;
16
+
--dc-lk-1: #0068d6;
17
+
--dc-lkb-1: #0072f5;
18
+
--dc-lkb-2: #0062d1;
19
+
--dc-lkb-tx: #ededed;
20
+
--dc-ac-1: #8e4ec6;
21
+
--dc-ac-tx: #ededed;
22
+
23
+
/* Dark colors */
24
+
--dc-d-tx-1: #ededed;
25
+
--dc-d-tx-2: #a1a1a1;
26
+
--dc-d-bg-1: #000;
27
+
--dc-d-bg-2: #0a0a0a;
28
+
--dc-d-bg-3: #2e2e2e;
29
+
--dc-d-lk-1: #52a8ff;
30
+
--dc-d-lkb-1: #0072f5;
31
+
--dc-d-lkb-2: #0062d1;
32
+
--dc-d-lkb-tx: #ededed;
33
+
--dc-d-ac-1: #8e4ec6;
34
+
--dc-d-ac-tx: #ededed;
30
35
}
31
36
37
+
/* 2. Dark mode handling */
32
38
@media (prefers-color-scheme: dark) {
33
-
:root {
34
-
--dc-tx-1: var(--dc-d-tx-1);
35
-
--dc-tx-2: var(--dc-d-tx-2);
36
-
--dc-bg-1: var(--dc-d-bg-1);
37
-
--dc-bg-2: var(--dc-d-bg-2);
38
-
--dc-bg-3: var(--dc-d-bg-3);
39
-
--dc-lk-1: var(--dc-d-lk-1);
40
-
--dc-lkb-1: var(--dc-d-lkb-1);
41
-
--dc-lkb-2: var(--dc-d-lkb-2);
42
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
43
-
--dc-ac-1: var(--dc-d-ac-1);
44
-
--dc-ac-tx: var(--dc-d-ac-tx);
45
-
}
39
+
:root {
40
+
--dc-tx-1: var(--dc-d-tx-1);
41
+
--dc-tx-2: var(--dc-d-tx-2);
42
+
--dc-bg-1: var(--dc-d-bg-1);
43
+
--dc-bg-2: var(--dc-d-bg-2);
44
+
--dc-bg-3: var(--dc-d-bg-3);
45
+
--dc-lk-1: var(--dc-d-lk-1);
46
+
--dc-lkb-1: var(--dc-d-lkb-1);
47
+
--dc-lkb-2: var(--dc-d-lkb-2);
48
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
49
+
--dc-ac-1: var(--dc-d-ac-1);
50
+
--dc-ac-tx: var(--dc-d-ac-tx);
51
+
}
52
+
}
53
+
54
+
/* 3. CSS Reset */
55
+
*,
56
+
*::before,
57
+
*::after {
58
+
box-sizing: border-box;
59
+
margin: 0;
60
+
word-break: break-word;
46
61
}
47
62
48
-
* {
49
-
margin: 0;
50
-
padding: 0;
63
+
body {
64
+
line-height: 1.5;
51
65
}
52
66
67
+
img,
68
+
picture,
69
+
video,
70
+
canvas,
71
+
svg {
72
+
display: block;
73
+
max-width: 100%;
74
+
}
75
+
76
+
input,
77
+
button,
78
+
textarea,
79
+
select {
80
+
font: inherit;
81
+
}
82
+
83
+
#root,
84
+
#__next {
85
+
isolation: isolate;
86
+
}
87
+
88
+
/* 4. Margins for most elements */
53
89
address,
54
90
area,
55
91
article,
···
80
116
textarea,
81
117
ul,
82
118
video {
83
-
margin-bottom: 1rem;
119
+
margin-bottom: 1rem;
84
120
}
85
121
86
-
html,
87
-
input,
88
-
select,
89
-
button {
90
-
font-family: var(--dc-font-sans);
122
+
/* 5. Font family */
123
+
html {
124
+
font-family: var(--dc-font-sans);
125
+
}
126
+
127
+
code,
128
+
pre,
129
+
kbd,
130
+
samp {
131
+
font-family: var(--dc-font-mono);
91
132
}
92
133
134
+
/* 6. Body and selection styling */
93
135
body {
94
-
margin: 0 auto;
95
-
max-width: 750px;
96
-
padding: 2rem;
97
-
border-radius: 4px;
98
-
overflow-x: hidden;
99
-
word-break: break-word;
100
-
overflow-wrap: break-word;
101
-
background: var(--dc-bg-1);
102
-
color: var(--dc-tx-2);
103
-
font-size: 1rem;
104
-
line-height: 1.5;
136
+
margin: 0 auto;
137
+
max-width: 48rem;
138
+
padding: 2rem;
139
+
background: var(--dc-bg-1);
140
+
color: var(--dc-tx-2);
105
141
}
106
142
107
143
::selection {
108
-
background: var(--dc-ac-1);
109
-
color: var(--dc-ac-tx);
144
+
background: var(--dc-ac-1);
145
+
color: var(--dc-ac-tx);
110
146
}
111
147
148
+
/* 7. Typography */
112
149
h1,
113
150
h2,
114
151
h3,
115
152
h4,
116
153
h5,
117
154
h6 {
118
-
line-height: 1;
119
-
color: var(--dc-tx-1);
120
-
padding-top: 0.875rem;
155
+
line-height: 1;
156
+
color: var(--dc-tx-1);
157
+
padding-top: 1rem;
121
158
}
122
159
123
160
h1,
124
161
h2,
125
162
h3 {
126
-
padding-bottom: 0.3rem;
127
-
margin-bottom: 0.4rem;
128
-
border-bottom: 1px solid var(--dc-bg-3);
163
+
padding-bottom: 0.25rem;
164
+
margin-bottom: 0.5rem;
165
+
border-bottom: 1px solid var(--dc-bg-3);
129
166
}
130
167
131
168
h4,
132
169
h5,
133
170
h6 {
134
-
margin-bottom: 0.3rem;
171
+
margin-bottom: 0.25rem;
135
172
}
136
173
137
-
h1 {
138
-
font-size: 2rem;
174
+
a {
175
+
color: var(--dc-lk-1);
176
+
text-decoration: none;
139
177
}
140
178
141
-
h2 {
142
-
font-size: 1.75rem;
179
+
a:hover {
180
+
text-decoration: underline;
143
181
}
144
182
145
-
h3 {
146
-
font-size: 1.5rem;
183
+
mark {
184
+
padding: 0.125rem 0.25rem;
185
+
background: var(--dc-ac-1);
186
+
color: var(--dc-ac-tx);
187
+
border-radius: 0.25rem;
147
188
}
148
189
149
-
h4 {
150
-
font-size: 1.25rem;
190
+
/* 8. Blockquotes */
191
+
blockquote {
192
+
padding: 1.25rem;
193
+
background: var(--dc-bg-2);
194
+
border: 1px solid var(--dc-bg-3);
195
+
border-left: 5px solid var(--dc-bg-3);
196
+
border-radius: 0.25rem;
151
197
}
152
198
153
-
h5 {
154
-
font-size: 1rem;
199
+
blockquote *:last-child {
200
+
padding-bottom: 0;
201
+
margin-bottom: 0;
155
202
}
156
203
157
-
h6 {
158
-
font-size: 0.875rem;
204
+
/* 9. Header */
205
+
header {
206
+
background: var(--dc-bg-2);
207
+
border-bottom: 1px solid var(--dc-bg-3);
208
+
padding: 0.5rem calc(50vw - 50%);
209
+
margin: -2rem calc(50% - 50vw) 2rem;
159
210
}
160
211
161
-
a {
162
-
color: var(--dc-lk-1);
163
-
text-decoration: none;
212
+
header nav a + a::before {
213
+
content: "• ";
214
+
color: var(--dc-tx-2);
164
215
}
165
216
166
-
a:hover {
167
-
text-decoration: underline;
217
+
header * {
218
+
padding-top: 0rem;
219
+
padding-bottom: 0rem;
220
+
margin-top: 0.25rem;
221
+
margin-bottom: 0.25rem;
168
222
}
169
223
170
-
abbr:hover {
171
-
cursor: help;
224
+
header h1,
225
+
header h2,
226
+
header h3 {
227
+
border-bottom: 0;
172
228
}
173
229
174
-
blockquote {
175
-
padding: 1.5rem;
176
-
background: var(--dc-bg-2);
177
-
border: 1px solid var(--dc-bg-3);
178
-
border-left: 5px solid var(--dc-bg-3);
179
-
border-radius: 4px;
230
+
header h1 {
231
+
font-size: 1.6rem;
180
232
}
181
233
182
-
blockquote *:last-child {
183
-
padding-bottom: 0;
184
-
margin-bottom: 0;
234
+
header h2 {
235
+
font-size: 1.4rem;
185
236
}
186
237
187
-
@media (max-width: calc(-1px + (750px + 4rem) + ((275px + 2rem)*2))) {
188
-
header {
189
-
background: var(--dc-bg-2);
190
-
border-bottom: 1px solid var(--dc-bg-3);
191
-
padding-top: 0.9rem;
192
-
padding-bottom: 0.6rem;
193
-
margin: -2rem calc(50% - 50vw) 2rem;
194
-
padding-left: calc(50vw - 50%);
195
-
padding-right: calc(50vw - 50%);
196
-
}
238
+
header h3 {
239
+
font-size: 1.2rem;
240
+
}
197
241
198
-
header nav a + a::before {
199
-
content: "• ";
200
-
color: var(--dc-tx-2);
201
-
}
242
+
header h4 {
243
+
font-size: 1rem;
244
+
}
202
245
203
-
header h1 {
204
-
font-size: 1.6rem;
205
-
}
246
+
header h5 {
247
+
font-size: 0.9rem;
248
+
}
206
249
207
-
header h2 {
208
-
font-size: 1.4rem;
209
-
}
250
+
header p {
251
+
font-size: 1rem;
252
+
}
210
253
211
-
header h3 {
212
-
font-size: 1.2rem;
213
-
}
214
-
215
-
header h4 {
216
-
font-size: 1rem;
217
-
}
218
-
219
-
header h5 {
220
-
font-size: 0.9rem;
221
-
}
222
-
223
-
header p {
224
-
font-size: 1rem;
225
-
}
226
-
227
-
header nav {
228
-
font-size: 0.9rem;
229
-
}
230
-
231
-
header h6 {
232
-
font-size: 0.8rem;
233
-
}
234
-
235
-
header * {
236
-
padding-top: 0.15rem;
237
-
padding-bottom: 0.15rem;
238
-
margin-top: 0rem;
239
-
margin-bottom: 0rem;
240
-
}
241
-
242
-
header > *:first-child {
243
-
margin-top: 0;
244
-
padding-top: 0;
245
-
}
254
+
header nav {
255
+
font-size: 0.9rem;
256
+
}
246
257
247
-
header > *:last-child {
248
-
margin-bottom: 0;
249
-
padding-bottom: 0;
250
-
}
258
+
header h6 {
259
+
font-size: 0.8rem;
251
260
}
252
261
253
-
@media (min-width: calc((750px + 4rem) + ((275px + 2rem)*2))) {
254
-
header {
255
-
padding: 2rem;
256
-
padding-right: 0;
257
-
margin: 0;
258
-
position: fixed;
259
-
top: 0;
260
-
left: calc(50% - ((750px + 4rem) / 2) - (275px + 2rem));
261
-
width: 275px;
262
-
height: calc(100% - 1rem);
263
-
overflow-y: auto;
264
-
}
262
+
/* 10. Footer */
263
+
footer {
264
+
border-top: 1px solid var(--dc-bg-3);
265
+
padding: 0.5rem calc(50vw - 50%);
266
+
margin: 2rem calc(50% - 50vw) -2rem;
267
+
}
265
268
266
-
header nav {
267
-
display: flex;
268
-
flex-direction: column;
269
-
border-top: 1px solid var(--dc-bg-3);
270
-
padding-top: 1rem;
271
-
margin-top: 0.5rem;
272
-
}
273
-
274
-
header nav a::before {
275
-
content: "• ";
276
-
color: var(--dc-tx-2);
277
-
}
269
+
footer * {
270
+
padding-top: 0rem;
271
+
padding-bottom: 0rem;
272
+
margin-top: 0.25rem;
273
+
margin-bottom: 0.25rem;
278
274
}
279
275
280
-
header h1,
281
-
header h2,
282
-
header h3,
283
-
header h4,
284
-
header h5,
285
-
header h6 {
286
-
border-bottom: 0;
276
+
footer h1,
277
+
footer h2,
278
+
footer h3 {
279
+
border-bottom: 0;
287
280
}
288
281
282
+
/* 11. Buttons and inputs */
289
283
a button,
290
284
button,
291
285
input[type="submit"],
292
286
input[type="reset"],
293
287
input[type="button"] {
294
-
font-size: 1rem;
295
-
display: inline-block;
296
-
padding: 6px 12px;
297
-
text-align: center;
298
-
text-decoration: none;
299
-
white-space: nowrap;
300
-
background: var(--dc-lkb-1);
301
-
color: var(--dc-lkb-tx);
302
-
border: 0;
303
-
border-radius: 4px;
304
-
box-sizing: border-box;
305
-
cursor: pointer;
288
+
display: inline-block;
289
+
padding: 0.25rem 0.75rem;
290
+
text-align: center;
291
+
text-decoration: none;
292
+
white-space: nowrap;
293
+
background: var(--dc-lkb-1);
294
+
color: var(--dc-lkb-tx);
295
+
border: 0;
296
+
border-radius: 0.25rem;
297
+
box-sizing: border-box;
298
+
cursor: pointer;
306
299
}
307
300
308
301
a button[disabled],
···
310
303
input[type="submit"][disabled],
311
304
input[type="reset"][disabled],
312
305
input[type="button"][disabled] {
313
-
cursor: not-allowed;
314
-
opacity: 0.5;
306
+
cursor: not-allowed;
307
+
opacity: 0.5;
315
308
}
316
309
317
310
.button:focus,
···
324
317
input[type="reset"]:enabled:hover,
325
318
input[type="button"]:focus,
326
319
input[type="button"]:enabled:hover {
327
-
background: var(--dc-lkb-2);
320
+
background: var(--dc-lkb-2);
328
321
}
329
322
330
-
a img {
331
-
margin-bottom: 0;
323
+
textarea,
324
+
select,
325
+
input {
326
+
padding: 0.25rem 0.5rem;
327
+
margin-bottom: 0.5rem;
328
+
background: var(--dc-bg-2);
329
+
color: var(--dc-tx-2);
330
+
border: 1px solid var(--dc-bg-3);
331
+
border-radius: 0.25rem;
332
+
box-shadow: none;
333
+
box-sizing: border-box;
332
334
}
333
335
334
-
code,
335
-
pre,
336
-
kbd,
337
-
samp {
338
-
font-family: var(--dc-font-mono);
336
+
textarea {
337
+
max-width: 100%;
339
338
}
340
339
340
+
/* 12. Code and keyboards */
341
341
code,
342
342
samp,
343
343
kbd,
344
344
pre {
345
-
background: var(--dc-bg-2);
346
-
border: 1px solid var(--dc-bg-3);
347
-
border-radius: 4px;
348
-
padding: 2px 4px;
349
-
font-size: 0.9rem;
345
+
background: var(--dc-bg-2);
346
+
border: 1px solid var(--dc-bg-3);
347
+
border-radius: 0.25rem;
348
+
padding: 0.125rem 0.25rem;
349
+
font-size: 0.9rem;
350
350
}
351
351
352
352
kbd {
353
-
border-bottom: 3px solid var(--dc-bg-3);
353
+
border-bottom: 3px solid var(--dc-bg-3);
354
354
}
355
355
356
356
pre {
357
-
padding: 1rem 1.4rem;
358
-
max-width: 100%;
359
-
overflow: auto;
360
-
}
361
-
362
-
pre code {
363
-
background: inherit;
364
-
font-size: inherit;
365
-
color: inherit;
366
-
border: 0;
367
-
padding: 0;
368
-
margin: 0;
369
-
}
370
-
371
-
code pre {
372
-
display: inline;
373
-
background: inherit;
374
-
font-size: inherit;
375
-
color: inherit;
376
-
border: 0;
377
-
padding: 0;
378
-
margin: 0;
357
+
padding: 1rem 1.5rem;
358
+
max-width: 100%;
359
+
overflow: auto;
379
360
}
380
361
362
+
/* 13. Details */
381
363
details {
382
-
padding: 0.6rem 1rem;
383
-
background: var(--dc-bg-2);
384
-
border: 1px solid var(--dc-bg-3);
385
-
border-radius: 4px;
364
+
padding: 0.5rem 1rem;
365
+
background: var(--dc-bg-2);
366
+
border: 1px solid var(--dc-bg-3);
367
+
border-radius: 0.25rem;
386
368
}
387
369
388
370
summary {
389
-
cursor: pointer;
390
-
font-weight: bold;
371
+
cursor: pointer;
372
+
font-weight: bold;
391
373
}
392
374
393
375
details[open] summary {
394
-
margin-bottom: 8px;
376
+
margin-bottom: 0.5rem;
395
377
}
396
378
397
379
details[open] > *:first-child {
398
-
margin-top: 0;
399
-
padding-top: 0;
380
+
margin-top: 0;
381
+
padding-top: 0;
400
382
}
401
383
402
384
details[open] > *:last-child {
403
-
margin-bottom: 0;
404
-
padding-bottom: 0;
385
+
margin-bottom: 0;
386
+
padding-bottom: 0;
405
387
}
406
388
389
+
/* 14. Description lists */
407
390
dt {
408
-
font-weight: bold;
391
+
font-weight: bold;
409
392
}
410
393
411
394
dd::before {
412
-
content: "→ ";
395
+
content: "→ ";
413
396
}
414
397
398
+
/* 15. Horizontal rules */
415
399
hr {
416
-
border: 0;
417
-
border-bottom: 1px solid var(--dc-bg-3);
418
-
margin: 1rem auto;
400
+
border: 0;
401
+
border-bottom: 1px solid var(--dc-bg-3);
402
+
margin: 1rem auto;
419
403
}
420
404
405
+
/* 16. Fieldsets */
421
406
fieldset {
422
-
margin-top: 1rem;
423
-
padding: 2rem;
424
-
border: 1px solid var(--dc-bg-3);
425
-
border-radius: 4px;
407
+
margin-top: 1rem;
408
+
padding: 2rem;
409
+
border: 1px solid var(--dc-bg-3);
410
+
border-radius: 0.25rem;
426
411
}
427
412
428
413
legend {
429
-
padding: auto 0.5rem;
414
+
padding: auto 0.5rem;
430
415
}
431
416
417
+
/* 17. Tables */
432
418
table {
433
-
border-collapse: collapse;
434
-
width: 100%;
419
+
border-collapse: collapse;
420
+
width: 100%;
435
421
}
436
422
437
423
td,
438
424
th {
439
-
border: 1px solid var(--dc-bg-3);
440
-
text-align: left;
441
-
padding: 0.5rem;
425
+
border: 1px solid var(--dc-bg-3);
426
+
text-align: left;
427
+
padding: 0.5rem;
442
428
}
443
429
444
430
th {
445
-
background: var(--dc-bg-2);
431
+
background: var(--dc-bg-2);
446
432
}
447
433
448
434
tr:nth-child(even) {
449
-
background: var(--dc-bg-2);
435
+
background: var(--dc-bg-2);
450
436
}
451
437
452
438
table caption {
453
-
font-weight: bold;
454
-
margin-bottom: 0.5rem;
439
+
font-weight: bold;
440
+
margin-bottom: 0.5rem;
455
441
}
456
442
457
-
textarea {
458
-
max-width: 100%;
459
-
}
460
-
443
+
/* 18. Lists */
461
444
ol,
462
445
ul {
463
-
padding-left: 2rem;
446
+
padding-left: 2rem;
464
447
}
465
448
466
449
li {
467
-
margin-top: 0.4rem;
450
+
margin-top: 0.4rem;
468
451
}
469
452
470
453
ul ul,
471
454
ol ul,
472
455
ul ol,
473
456
ol ol {
474
-
margin-bottom: 0;
475
-
}
476
-
477
-
mark {
478
-
padding: 2px 4px;
479
-
background: var(--dc-ac-1);
480
-
color: var(--dc-ac-tx);
481
-
border-radius: 4px;
482
-
}
483
-
484
-
textarea,
485
-
select,
486
-
input {
487
-
padding: 6px 12px;
488
-
margin-bottom: 0.5rem;
489
-
background: var(--dc-bg-2);
490
-
color: var(--dc-tx-2);
491
-
border: 1px solid var(--dc-bg-3);
492
-
border-radius: 4px;
493
-
box-shadow: none;
494
-
box-sizing: border-box;
495
-
}
496
-
497
-
img {
498
-
max-width: 100%;
457
+
margin-bottom: 0;
499
458
}