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