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