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 */
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 nav a + a::before {
234 content: "• ";
235 color: var(--dc-tx-2);
236}
237
238header * {
239 padding-top: 0rem;
240 padding-bottom: 0rem;
241 margin-top: 0.25rem;
242 margin-bottom: 0.25rem;
243}
244
245header h1,
246header h2,
247header h3 {
248 border-bottom: 0;
249}
250
251header h1 {
252 font-size: 1.6rem;
253}
254
255header h2 {
256 font-size: 1.4rem;
257}
258
259header h3 {
260 font-size: 1.2rem;
261}
262
263header h4 {
264 font-size: 1rem;
265}
266
267header h5 {
268 font-size: 0.9rem;
269}
270
271header p {
272 font-size: 1rem;
273}
274
275header nav {
276 font-size: 0.9rem;
277}
278
279header h6 {
280 font-size: 0.8rem;
281}
282
283/* 10. Footer */
284footer {
285 border-top: 1px solid var(--dc-bg-3);
286 padding: 0.5rem calc(50vw - 50%);
287 margin: 2rem calc(50% - 50vw) -2rem;
288}
289
290footer * {
291 padding-top: 0rem;
292 padding-bottom: 0rem;
293 margin-top: 0.25rem;
294 margin-bottom: 0.25rem;
295}
296
297footer h1,
298footer h2,
299footer h3 {
300 border-bottom: 0;
301}
302
303/* 11. Buttons and Inputs */
304a button,
305button,
306input[type="submit"],
307input[type="reset"],
308input[type="button"] {
309 display: inline-block;
310 padding: 0.25rem 0.75rem;
311 text-align: center;
312 text-decoration: none;
313 white-space: nowrap;
314 background: var(--dc-lkb-1);
315 color: var(--dc-lkb-tx);
316 border: 0;
317 border-radius: 0.25rem;
318 box-sizing: border-box;
319 cursor: pointer;
320}
321
322a button[disabled],
323button[disabled],
324input[type="submit"][disabled],
325input[type="reset"][disabled],
326input[type="button"][disabled] {
327 cursor: not-allowed;
328 opacity: 0.5;
329}
330
331.button:focus,
332.button:enabled:hover,
333button:focus,
334button:enabled:hover,
335input[type="submit"]:focus,
336input[type="submit"]:enabled:hover,
337input[type="reset"]:focus,
338input[type="reset"]:enabled:hover,
339input[type="button"]:focus,
340input[type="button"]:enabled:hover {
341 background: var(--dc-lkb-2);
342}
343
344textarea,
345select,
346input {
347 padding: 0.25rem 0.5rem;
348 margin-bottom: 0.5rem;
349 background: var(--dc-bg-2);
350 color: var(--dc-tx-2);
351 border: 1px solid var(--dc-bg-3);
352 border-radius: 0.25rem;
353 box-shadow: none;
354 box-sizing: border-box;
355}
356
357textarea {
358 max-width: 100%;
359}
360
361/* 12. Code and Keyboards */
362code,
363samp,
364kbd,
365pre {
366 background: var(--dc-bg-2);
367 border: 1px solid var(--dc-bg-3);
368 border-radius: 0.25rem;
369 padding: 0.125rem 0.25rem;
370 font-size: 0.9rem;
371}
372
373kbd {
374 border-bottom: 3px solid var(--dc-bg-3);
375}
376
377pre {
378 padding: 1rem 1.5rem;
379 max-width: 100%;
380 overflow: auto;
381}
382
383/* 13. Details */
384details {
385 padding: 0.5rem 1rem;
386 background: var(--dc-bg-2);
387 border: 1px solid var(--dc-bg-3);
388 border-radius: 0.25rem;
389}
390
391summary {
392 cursor: pointer;
393 font-weight: bold;
394}
395
396details[open] summary {
397 margin-bottom: 0.5rem;
398}
399
400details[open] > *:first-child {
401 margin-top: 0;
402 padding-top: 0;
403}
404
405details[open] > *:last-child {
406 margin-bottom: 0;
407 padding-bottom: 0;
408}
409
410/* 14. Description Lists */
411dt {
412 font-weight: bold;
413}
414
415dd::before {
416 content: "→ ";
417}
418
419/* 15. Horizontal Rules */
420hr {
421 border: 0;
422 border-bottom: 1px solid var(--dc-bg-3);
423 margin: 1rem auto;
424}
425
426/* 16. Fieldsets */
427fieldset {
428 margin-top: 1rem;
429 padding: 2rem;
430 border: 1px solid var(--dc-bg-3);
431 border-radius: 0.25rem;
432}
433
434legend {
435 padding: auto 0.5rem;
436}
437
438/* 17. Tables */
439table {
440 border-collapse: collapse;
441 width: 100%;
442}
443
444td,
445th {
446 border: 1px solid var(--dc-bg-3);
447 text-align: left;
448 padding: 0.5rem;
449}
450
451th {
452 background: var(--dc-bg-2);
453}
454
455tr:nth-child(even) {
456 background: var(--dc-bg-2);
457}
458
459table caption {
460 font-weight: bold;
461 margin-bottom: 0.5rem;
462}
463
464/* 18. Lists */
465ol,
466ul {
467 padding-left: 2rem;
468}
469
470li {
471 margin-top: 0.4rem;
472}
473
474ul ul,
475ol ul,
476ul ol,
477ol ol {
478 margin-bottom: 0;
479}