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