tiny, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet

feat: better comments, day theme

+66 -43
+1
addon/header-sidebar.css
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 /* warn: if using with the header-sticky addon, be sure to include this after it */ 3 4 @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: turns the header into a sidebar if the viewport is wide enough */ 3 /* warn: if using with the header-sticky addon, be sure to include this after it */ 4 5 @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
+1
addon/header-sticky.css
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 /* warn: if using with the header-sidebar addon, be sure to include this before it */ 3 /* warn: i do not recommend using this if your header is large, may affect usability */ 4
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: makes the header sticky, always at the top of the screen */ 3 /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 /* warn: i do not recommend using this if your header is large, may affect usability */ 5
+41 -40
dev.css
··· 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; ··· 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; ··· 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); ··· 72 } 73 } 74 75 - /* 3. CSS Reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */ 76 *, 77 *::before, 78 *::after { ··· 106 isolation: isolate; 107 } 108 109 - /* 4. Margins for Most Elements */ 110 address, 111 area, 112 article, ··· 140 margin-bottom: 1rem; 141 } 142 143 - /* 5. Font Family */ 144 html { 145 font-family: var(--dc-font-sans); 146 } ··· 152 font-family: var(--dc-font-mono); 153 } 154 155 - /* 6. Body and Selection Styling */ 156 body { 157 margin: 0 auto; 158 max-width: 48rem; ··· 166 color: var(--dc-ac-tx); 167 } 168 169 - /* 7. Typography */ 170 h1, 171 h2, 172 h3, ··· 208 border-radius: 0.25rem; 209 } 210 211 - /* 8. Blockquotes */ 212 blockquote { 213 padding: 1.25rem; 214 background: var(--dc-bg-2); ··· 222 margin-bottom: 0; 223 } 224 225 - /* 9. Header */ 226 header { 227 background: var(--dc-bg-2); 228 border-bottom: 1px solid var(--dc-bg-3); ··· 288 content: "• "; 289 } 290 291 - /* 10. Footer */ 292 footer { 293 border-top: 1px solid var(--dc-bg-3); 294 padding: 0.5rem calc(50vw - 50%); ··· 308 border-bottom: 0; 309 } 310 311 - /* 11. Buttons and Inputs */ 312 a button, 313 button, 314 input[type="submit"], ··· 366 max-width: 100%; 367 } 368 369 - /* 12. Code and Keyboards */ 370 code, 371 samp, 372 kbd, ··· 388 overflow: auto; 389 } 390 391 - /* 13. Details */ 392 details { 393 padding: 0.5rem 1rem; 394 background: var(--dc-bg-2); ··· 415 padding-bottom: 0; 416 } 417 418 - /* 14. Description Lists */ 419 dt { 420 font-weight: bold; 421 } ··· 424 content: "→ "; 425 } 426 427 - /* 15. Horizontal Rules */ 428 hr { 429 border: 0; 430 border-bottom: 1px solid var(--dc-bg-3); 431 margin: 1rem auto; 432 } 433 434 - /* 16. Fieldsets */ 435 fieldset { 436 margin-top: 1rem; 437 padding: 2rem; ··· 443 padding: auto 0.5rem; 444 } 445 446 - /* 17. Tables */ 447 table { 448 border-collapse: collapse; 449 width: 100%; ··· 469 margin-bottom: 0.5rem; 470 } 471 472 - /* 18. Lists */ 473 ol, 474 ul { 475 padding-left: 2rem;
··· 1 /* dev.css v3, a classless 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. configuration 6 + 2. dark mode handling 7 + 3. css reset 8 + 4. margins for most elements 9 + 5. font family 10 + 6. body and selection styling 11 + 7. typography 12 + 8. blockquotes 13 + 9. header 14 + 10. footer 15 + 11. buttons and inputs 16 + 12. code and keyboards 17 + 13. details 18 + 14. description lists 19 + 15. horizontal rules 20 + 16. fieldsets 21 + 17. tables 22 + 18. lists 23 */ 24 25 + /* 1. configuration */ 26 :root { 27 + /* font families */ 28 --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, 29 "Segoe UI", sans-serif; 30 --dc-font-mono: "Geist Mono", monospace; 31 32 + /* light colors */ 33 --dc-tx-1: #000000; 34 --dc-tx-2: #1a1a1a; 35 --dc-bg-1: #fafafa; ··· 42 --dc-ac-1: #8e4ec6; 43 --dc-ac-tx: #ededed; 44 45 + /* dark colors */ 46 --dc-d-tx-1: #ededed; 47 --dc-d-tx-2: #a1a1a1; 48 --dc-d-bg-1: #000; ··· 56 --dc-d-ac-tx: #ededed; 57 } 58 59 + /* 2. dark mode handling */ 60 @media (prefers-color-scheme: dark) { 61 :root { 62 --dc-tx-1: var(--dc-d-tx-1); ··· 73 } 74 } 75 76 + /* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */ 77 *, 78 *::before, 79 *::after { ··· 107 isolation: isolate; 108 } 109 110 + /* 4. margins for most elements */ 111 address, 112 area, 113 article, ··· 141 margin-bottom: 1rem; 142 } 143 144 + /* 5. font family */ 145 html { 146 font-family: var(--dc-font-sans); 147 } ··· 153 font-family: var(--dc-font-mono); 154 } 155 156 + /* 6. body and selection styling */ 157 body { 158 margin: 0 auto; 159 max-width: 48rem; ··· 167 color: var(--dc-ac-tx); 168 } 169 170 + /* 7. typography */ 171 h1, 172 h2, 173 h3, ··· 209 border-radius: 0.25rem; 210 } 211 212 + /* 8. blockquotes */ 213 blockquote { 214 padding: 1.25rem; 215 background: var(--dc-bg-2); ··· 223 margin-bottom: 0; 224 } 225 226 + /* 9. header */ 227 header { 228 background: var(--dc-bg-2); 229 border-bottom: 1px solid var(--dc-bg-3); ··· 289 content: "• "; 290 } 291 292 + /* 10. footer */ 293 footer { 294 border-top: 1px solid var(--dc-bg-3); 295 padding: 0.5rem calc(50vw - 50%); ··· 309 border-bottom: 0; 310 } 311 312 + /* 11. buttons and inputs */ 313 a button, 314 button, 315 input[type="submit"], ··· 367 max-width: 100%; 368 } 369 370 + /* 12. code and keyboards */ 371 code, 372 samp, 373 kbd, ··· 389 overflow: auto; 390 } 391 392 + /* 13. details */ 393 details { 394 padding: 0.5rem 1rem; 395 background: var(--dc-bg-2); ··· 416 padding-bottom: 0; 417 } 418 419 + /* 14. description lists */ 420 dt { 421 font-weight: bold; 422 } ··· 425 content: "→ "; 426 } 427 428 + /* 15. horizontal rules */ 429 hr { 430 border: 0; 431 border-bottom: 1px solid var(--dc-bg-3); 432 margin: 1rem auto; 433 } 434 435 + /* 16. fieldsets */ 436 fieldset { 437 margin-top: 1rem; 438 padding: 2rem; ··· 444 padding: auto 0.5rem; 445 } 446 447 + /* 17. tables */ 448 table { 449 border-collapse: collapse; 450 width: 100%; ··· 470 margin-bottom: 0.5rem; 471 } 472 473 + /* 18. lists */ 474 ol, 475 ul { 476 padding-left: 2rem;
+2 -1
theme/boilerplate.css
··· 1 - /* This theme is a template that you can modify */ 2 3 :root { 4 /* Fonts */
··· 1 + /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: a template that you can modify */ 3 4 :root { 5 /* Fonts */
+17
theme/day.css
···
··· 1 + /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: makes it always light, regardless of device setting */ 3 + 4 + :root { 5 + /* Colors */ 6 + --dc-tx-1: #000000; 7 + --dc-tx-2: #1a1a1a; 8 + --dc-bg-1: #fafafa; 9 + --dc-bg-2: #fff; 10 + --dc-bg-3: #ebebeb; 11 + --dc-lk-1: #0068d6; 12 + --dc-lkb-1: #0072f5; 13 + --dc-lkb-2: #0062d1; 14 + --dc-lkb-tx: #ededed; 15 + --dc-ac-1: #8e4ec6; 16 + --dc-ac-tx: #ededed; 17 + }
+2 -1
theme/night.css
··· 1 - /* This theme will make it always dark, regardless of device setting */ 2 3 :root { 4 /* Colors */
··· 1 + /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: makes it always dark, regardless of device setting */ 3 4 :root { 5 /* Colors */
+2 -1
theme/terminal.css
··· 1 - /* This theme has a similar look to a computer terminal */ 2 3 @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"); 4
··· 1 + /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: has a similar look to a computer terminal */ 3 4 @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"); 5