Something went wrong. Try again.
lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css *//* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
/* table of contents 1. default configuration 2. dark mode handling 3. root color scheme 4. css reset 5. margins for most elements 6. font family 7. body and selection styling 8. typography 9. blockquotes 10. header 11. footer 12. buttons and inputs 13. code and keyboards 14. details 15. description lists 16. horizontal rules 17. fieldsets 18. tables 19. lists*/
/* 1. default configuration */:root { /* font families */ --dc-font-sans: "Geist", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --dc-font-mono: "Geist Mono", ui-monospace, Consolas, Monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
/* light colors */ --dc-cs: light; --dc-tx-1: #000000; --dc-tx-2: #1a1a1a; --dc-bg-1: #fafafa; --dc-bg-2: #fff; --dc-bg-3: #ebebeb; --dc-lk-1: #0068d6; --dc-lkb-1: #0072f5; --dc-lkb-2: #0062d1; --dc-lkb-tx: #ededed; --dc-ac-1: #8e4ec6; --dc-ac-tx: #ededed;
/* dark colors */ --dc-d-cs: dark; --dc-d-tx-1: #ededed; --dc-d-tx-2: #a1a1a1; --dc-d-bg-1: #000; --dc-d-bg-2: #0a0a0a; --dc-d-bg-3: #2e2e2e; --dc-d-lk-1: #52a8ff; --dc-d-lkb-1: #0072f5; --dc-d-lkb-2: #0062d1; --dc-d-lkb-tx: #ededed; --dc-d-ac-1: #8e4ec6; --dc-d-ac-tx: #ededed;}
/* 2. dark mode handling */@media (prefers-color-scheme: dark) { :root { --dc-cs: var(--dc-d-cs); --dc-tx-1: var(--dc-d-tx-1); --dc-tx-2: var(--dc-d-tx-2); --dc-bg-1: var(--dc-d-bg-1); --dc-bg-2: var(--dc-d-bg-2); --dc-bg-3: var(--dc-d-bg-3); --dc-lk-1: var(--dc-d-lk-1); --dc-lkb-1: var(--dc-d-lkb-1); --dc-lkb-2: var(--dc-d-lkb-2); --dc-lkb-tx: var(--dc-d-lkb-tx); --dc-ac-1: var(--dc-d-ac-1); --dc-ac-tx: var(--dc-d-ac-tx); }}
/* 3. root color scheme */:root { color-scheme: only var(--dc-cs);}
/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */*,*::before,*::after { box-sizing: border-box; margin: 0; word-break: break-word;}
body { line-height: 1.5;}
img,picture,video,canvas,svg { display: block; max-width: 100%;}
input,button,textarea,select { font: inherit;}
#root,#__next { isolation: isolate;}
/* 5. margins for most elements */address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video { margin-bottom: 1rem;}
/* 6. font family */html { font-family: var(--dc-font-sans);}
code,pre,kbd,samp { font-family: var(--dc-font-mono);}
/* 7. body and selection styling */body { margin: 0 auto; max-width: 48rem; padding: 2rem; background: var(--dc-bg-1); color: var(--dc-tx-2); overflow-wrap: break-word; overflow-x: hidden;}
::selection { background: var(--dc-ac-1); color: var(--dc-ac-tx);}
/* 8. typography */h1 { font-size: 2rem;}
h2 { font-size: 1.5rem;}
h3 { font-size: 1.17rem;}
h4 { font-size: 1rem;}
h5 { font-size: 0.83rem;}
h6 { font-size: 0.67rem;}
p,a { font-size: 1rem;}
h1,h2,h3,h4,h5,h6 { line-height: 1; color: var(--dc-tx-1); padding-top: 1rem;}
h1,h2,h3 { padding-bottom: 0.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--dc-bg-3);}
h4,h5,h6 { margin-bottom: 0.25rem;}
a { color: var(--dc-lk-1); text-decoration: none;}
a:hover { text-decoration: underline;}
mark { padding: 0.125rem 0.25rem; background: var(--dc-ac-1); color: var(--dc-ac-tx); border-radius: 0.25rem;}
/* 9. blockquotes */blockquote { padding: 1.25rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-left: 5px solid var(--dc-bg-3); border-radius: 0.25rem;}
blockquote *:last-child { padding-bottom: 0; margin-bottom: 0;}
/* 10. header - make sure header addons dont break when modifying */header { background: var(--dc-bg-2); border-bottom: 1px solid var(--dc-bg-3); padding: 0.5rem calc(50vw - 50%); margin: -2rem calc(50% - 50vw) 2rem;}
header * { padding-top: 0rem; padding-bottom: 0rem; margin-top: 0.25rem; margin-bottom: 0.25rem;}
header h1,header h2,header h3 { border-bottom: 0;}
header nav ul { padding: 0;}
header nav ul li { display: inline-block; margin: 0;}
header nav ul li:not(:first-child)::before { content: "• ";}
/* 11. footer */footer { border-top: 1px solid var(--dc-bg-3); padding-top: 0.5rem;}
footer h1,footer h2,footer h3 { border-bottom: 0;}
/* 12. buttons and inputs */a button,button,input[type="submit"],input[type="reset"],input[type="button"] { display: inline-block; padding: 0.25rem 0.75rem; text-align: center; text-decoration: none; white-space: nowrap; background: var(--dc-lkb-1); color: var(--dc-lkb-tx); border: 0; border-radius: 0.25rem; box-sizing: border-box; cursor: pointer;}
a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled] { cursor: not-allowed; opacity: 0.5;}
.button:focus,.button:enabled:hover,button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover { background: var(--dc-lkb-2);}
textarea,select,input { padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; background: var(--dc-bg-2); color: var(--dc-tx-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem; box-shadow: none; box-sizing: border-box;}
textarea { max-width: 100%;}
input,progress { accent-color: var(--dc-ac-1);}
/* 13. code and keyboards */code,samp,kbd,pre { background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem; padding: 0.125rem 0.25rem; font-size: 0.9rem; tab-size: 2;}
kbd { border-bottom: 3px solid var(--dc-bg-3);}
pre { padding: 1rem 1.5rem; max-width: 100%; overflow: auto;}
pre code { padding: 0; border: 0;}
/* 14. details */details { padding: 0.5rem 1rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem;}
summary { cursor: pointer; font-weight: bold;}
details[open] summary { margin-bottom: 0.5rem;}
details[open] > *:first-child { margin-top: 0; padding-top: 0;}
details[open] > *:last-child { margin-bottom: 0; padding-bottom: 0;}
/* 15. description lists */dt { font-weight: bold;}
dd::before { content: "→ ";}
/* 16. horizontal rules */hr { border: 0; border-bottom: 1px solid var(--dc-bg-3); margin: 1rem auto;}
/* 17. fieldsets */fieldset { margin-top: 1rem; padding: 2rem; border: 1px solid var(--dc-bg-3); border-radius: 0.25rem;}
legend { padding: auto 0.5rem;}
/* 18. tables */table { border-collapse: collapse; width: 100%;}
td,th { border: 1px solid var(--dc-bg-3); text-align: left; padding: 0.5rem;}
th { background: var(--dc-bg-2);}
tr:nth-child(even) { background: var(--dc-bg-2);}
table caption { font-weight: bold; margin-bottom: 0.5rem;}
/* 19. lists */ol,ul { padding-left: 2rem;}
li { margin-top: 0.4rem;}
ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}