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