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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420/* dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css *//* about: tiny, simple, classless CSS framework inspired by new.css */
/* table of contents 1. configurable variables 2. typography 3. document 4. blockquotes 5. buttons and inputs 6. code and keyboards 7. details 8. description lists 9. horizontal rules 10. fieldsets 11. tables 12. lists 13. media*/
/* 1. configurable variables *//* adjustable by you! see ./theme/boilerplate.user.css */:root { /* font families */ --dc-font: ui-sans-serif, system-ui, sans-serif; --dc-font-mono: ui-monospace, monospace;
/* light/dark colors */ color-scheme: light dark; /* light and dark scrollbars, inputs, etc */ --dc-tx-1: light-dark(#171717, #ededed); /* primary text */ --dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */ --dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */ --dc-bg-2: light-dark(#fafafa, #000); /* secondary background */ --dc-bg-3: light-dark(#c9c9c9, #575757); /* border */ --dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */ --dc-lkb-1: light-dark(#006bff, #006efe); /* link button */ --dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */ --dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */ --dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */ --dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */}
/* 2. typography */
p,h1,h2,h3,h4,h5,h6 { overflow-wrap: break-word;}
p { text-wrap: pretty;}
h1,h2,h3,h4,h5,h6 { text-wrap: balance;}
body { font-family: var(--dc-font); color: var(--dc-tx-2); line-height: 1.5;}
code,pre,kbd,samp { font-family: var(--dc-font-mono); font-size: 0.9rem;}
h1,h2,h3,h4,h5,h6 { color: var(--dc-tx-1);}
h1,h2,h3 { padding-block-end: 0.125rem; border-block-end: 1px solid var(--dc-bg-3); line-height: 1;}
article h1,article h2,article h3 { padding-block-end: 0.125rem; border-block-end: none;}
a { color: var(--dc-lk-1);}
mark { border-radius: 0.375rem; padding: 0.125rem 0.25rem; background: var(--dc-ac-1); color: var(--dc-ac-tx);}
/* 3. document */body { max-width: 48rem; margin: 1rem auto 0; padding: 0 1rem; background: var(--dc-bg-2); overflow-x: hidden;}
header { padding: 1rem calc(50vw - 50%); margin: 0 calc(50% - 50vw) 0; margin-top: -1rem;}
header * { padding: 0; margin: 0;}
header > *:not(:last-child) { margin-block-end: 0.25rem;}
header h1,header h2,header h3 { border-block-end: none; padding-block-end: 0;}
header nav ul,footer nav ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0;}
header nav ul li,footer nav ul li { margin: 0; display: flex;}
header nav ul li:not(:first-child)::before,footer nav ul li:not(:first-child)::before { content: "•"; margin: 0 0.25em;}
article { margin-block: 1rem;}
main,article { padding-inline: 1.5rem; background: var(--dc-bg-1); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem;}
main article { background: var(--dc-bg-2); border-radius: 0.375rem;}
@media only screen and (max-width: 48rem) { main { margin: -1rem; background: none; border: none; }
header { background-color: var(--dc-bg-1); border-block-end: 1px solid var(--dc-bg-3); margin-block-end: 1rem; }
footer { border-block-start: 1px solid var(--dc-bg-3); }
main, article { padding: 1rem; }}
@media only screen and (min-width: 82rem) { aside { position: absolute; width: 16rem; }
aside:nth-child(even) { left: calc(50% - ((48rem) / 2) - (16rem)); }
aside:nth-child(odd) { right: calc(50% - ((48rem) / 2) - (16rem)); }}
/* 4. blockquotes */blockquote { padding: 1rem; margin-inline: 0; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-inline-start: 5px solid var(--dc-bg-3); border-radius: 0.375rem;}
/* 5. buttons and inputs */input,button,textarea,select { font: inherit;}
button,input[type="submit"],input[type="reset"],input[type="button"] { display: inline-block; padding: 0.25rem 0.75rem; text-align: center; text-decoration: none; background: var(--dc-lkb-1); color: var(--dc-lkb-tx); border: 0; border-radius: 0.375rem; box-sizing: border-box; cursor: pointer;}
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; background: var(--dc-bg-2); color: var(--dc-tx-2); border: 1px solid var(--dc-bg-3); border-radius: 0.375rem; box-shadow: none; box-sizing: border-box;}
textarea { max-width: 100%;}
input,progress { accent-color: var(--dc-ac-1);}
/* 6. code and keyboards */code,samp,kbd,pre { background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.375rem; padding: 0.125rem 0.25rem; tab-size: 4;}
kbd { border-block-end: 3px solid var(--dc-bg-3);}
pre { padding: 1rem; max-width: 100%; overflow: auto;}
pre code { padding: 0; border: 0;}
/* 7. details */details { margin-block: 1rem;}
details:not(aside details) { padding: 1rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.375rem;}
aside details { margin-block-start: 0;}
summary { cursor: pointer; font-weight: bold;}
details[open] > :last-child { margin-block-end: 0;}
/* 8. description lists */dt { font-weight: bold;}
dd::before { content: "→ ";}
/* 9. horizontal rules */hr { border: 0; border-block-end: 2px solid var(--dc-bg-3);}
/* 10. fieldsets */fieldset { padding: 1rem; border: 1px solid var(--dc-bg-3); border-radius: 0.375rem;}
legend { padding: auto 0.5rem;}
/* 11. 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;}
/* 12. lists */ol,ul { padding-inline-start: 2rem;}
li { margin-top: 0.4rem;}
/* 13. media */img,picture,video,canvas,svg { max-width: 100%; height: auto;}