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