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