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