diff --git a/README.md b/README.md index a385470..67e0a12 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ If you know of a minimal framework that hasn't been included here, please create ### List of frameworks * [a11yana](https://github.com/alexandersandberg/a11yana) by @alexandersandberg ([Preview](https://dohliam.github.io/dropin-minimal-css/?a11yana) · [MIT](https://github.com/alexandersandberg/a11yana/blob/master/LICENSE.md)) +* [axist](https://github.com/ruanmartinelli/axist) by @ruanmartinelli ([Preview](https://dohliam.github.io/dropin-minimal-css/?axist) · [MIT](https://github.com/ruanmartinelli/axist/blob/master/license)) * [bahunya](https://github.com/Kimeiga/bahunya) by @Kimeiga ([Preview](https://dohliam.github.io/dropin-minimal-css/?bahunya) · [MIT](https://github.com/Kimeiga/bahunya/blob/master/LICENSE)) * [bare](https://github.com/longsien/BareCSS) by @longsien ([Preview](https://dohliam.github.io/dropin-minimal-css/?bare) · [MIT](https://github.com/longsien/BareCSS/blob/master/LICENSE)) * [base](https://github.com/matthewhartman/base) by @matthewhartman ([Preview](https://dohliam.github.io/dropin-minimal-css/?base) · [MIT](https://github.com/matthewhartman/base#license)) diff --git a/min/axist.min.css b/min/axist.min.css new file mode 100644 index 0000000..c2ec384 --- /dev/null +++ b/min/axist.min.css @@ -0,0 +1 @@ +:root{--primary:#1524d9;--light-primary:#2332ea;--secondary:#ff2e88;--light-secondary:#fc77b1;--red:red;--black:#212529;--white:#fdfdfd;--dark-gray:#343334;--gray:#616060;--light-gray:#ccc;--lighter-gray:#f6f6f6;--font-sans-serif:system-ui,-apple-system,segoe ui,roboto,ubuntu,helvetica,cantarell,noto sans,sans-serif;--font-monospace:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace,serif;--boder-radius:.2rem}*{box-sizing:border-box;margin:0;padding:0;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-family:var(--font-sans-serif)}html{font-size:calc(16px + ((100vw - 600px) / 250));padding:0;text-decoration-skip-ink:"auto";line-height:1.953rem;margin:auto;min-height:100%;overflow-x:hidden;max-width:1140px}body{padding:0;margin:calc((100vh / 25) * 1.563) calc((100vw / 25) * 1.563);background-color:var(--white);color:var(--black);caret-color:var(--black);word-wrap:break-word}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;margin-top:1em;font-weight:bold}h1{font-size:3.052rem;letter-spacing:-0.15rem;line-height:1}h2{font-size:2.441rem;letter-spacing:-0.12rem;line-height:1.2}h3{font-size:1.953rem;letter-spacing:-0.09rem;line-height:1.2}h4{font-size:1.563rem;letter-spacing:-0.06rem;line-height:1.3}h5{font-size:1.25rem;letter-spacing:-0.03rem;line-height:1.4}h6{font-size:1rem;letter-spacing:0;line-height:1.5}p{margin-bottom:1.563rem}p>*:last-child{margin-bottom:0}blockquote{border-left:1px solid var(--light-gray);padding:0 1rem;margin-bottom:1.563rem}a{color:var(--primary);text-decoration:none}@media(hover:hover){a:hover{text-decoration:underline}}small{font-size:.888rem}hr{border:0;height:2px;margin:1rem 0;background:var(--light-gray)}fieldset{border:0;padding:0;margin:0}label,legend{font-weight:bold;display:inline-block}input[type="email"],input[type="text"],input[type="number"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="datetime"],input[type="datetime-local"],input[type="url"],input[type="search"],input[type="tel"],input:not([type]){display:block;padding:1rem;font-size:1rem;border:2px solid var(--lighter-gray);color:var(--black);appearance:none;border-radius:var(--boder-radius);background-color:var(--lighter-gray);-webkit-appearance:none;-moz-appearance:none}select{display:block;padding:1rem;font-size:1em;border:2px solid var(--lighter-gray);border-radius:var(--boder-radius);color:var(--black);background-color:var(--lighter-gray);appearance:none;-webkit-appearance:none;-moz-appearance:none}textarea{display:block;font-size:1rem;padding:1rem;line-height:1rem;color:var(--black);border-radius:var(--boder-radius);border:2px solid var(--lighter-gray);background-color:var(--lighter-gray);box-sizing:border-box;resize:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}input:focus,select:focus,textarea:focus{outline:0;border:2px solid var(--primary)}input:invalid,select:invalid,textarea:invalid{border:2px solid var(--red);outline:0}input[type="checkbox"]:hover,input[type="radio"]:hover{cursor:pointer}input[type="submit"],input[type="reset"],input[type="button"],button{padding:.5rem 1.25rem;font-size:1rem;border:0;border-radius:var(--boder-radius);color:var(--lighter-gray);height:2.5rem;background-color:var(--primary);-webkit-appearance:none;-moz-appearance:none;font-weight:bold}@media(hover:hover){input[type="reset"]:hover,input[type="submit"]:hover,input[type="button"]:hover,button:hover{cursor:pointer;background-color:var(--light-primary)}}button:focus-visible,input[type="submit"]:focus-visible,input[type="reset"]:focus-visible,input[type="button"]:focus-visible{border-color:var(--light-primary);outline:0}input[disabled],button:disabled{background-color:var(--gray)}table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-variant-numeric:tabular-nums}th,td{vertical-align:top;border-bottom:2px solid var(--light-gray);line-height:15px;padding:15px}th{font-weight:bold;text-align:left;color:var(--dark-gray)}code,pre{font-family:var(--font-monospace);color:var(--dark-gray);background-color:var(--lighter-gray);font-size:.8rem;vertical-align:middle;overflow:scroll;border-radius:var(--boder-radius)}code{white-space:nowrap;vertical-align:baseline;padding:0 .328rem}pre{white-space:pre;margin:.262rem 0;padding:.64rem 1rem}pre::after{content:" "}ul{margin:0;padding:0 1px;list-style:disc outside;font-variant-numeric:tabular-nums}ol{list-style:decimal outside}ol,ul{padding-left:0;margin-top:1rem;margin-bottom:1rem}li{list-style-position:inside}kbd{display:inline-block;padding:0 .328rem;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.64rem;color:var(--dark-gray);vertical-align:middle;background-color:#f9f9f9;border:solid 1px #d8d8d8;border-bottom:solid 2px #a6a5a6;border-radius:5px}abbr{text-decoration:none;border-bottom:2px dashed #949394}@media(hover:hover){abbr:hover{cursor:help}} diff --git a/scripts/frameworks.yml b/scripts/frameworks.yml index a591240..522bd01 100644 --- a/scripts/frameworks.yml +++ b/scripts/frameworks.yml @@ -8,6 +8,13 @@ frameworks: license_url: https://github.com/alexandersandberg/a11yana/blob/master/LICENSE.md repo: https://github.com/alexandersandberg/a11yana url: https://github.com/alexandersandberg/a11yana/blob/master/dist/a11yana.css + axist: + author: ruanmartinelli + author_name: Ruan Martinelli + license: MIT + license_url: https://github.com/ruanmartinelli/axist/blob/master/license + repo: https://github.com/ruanmartinelli/axist + url: https://unpkg.com/axist@latest/dist/axist.css bahunya: author: Kimeiga author_name: Hakan Alpay diff --git a/src/axist.css b/src/axist.css new file mode 100644 index 0000000..7d715fc --- /dev/null +++ b/src/axist.css @@ -0,0 +1,373 @@ +:root { + --primary: #1524d9; + --light-primary: #2332ea; + --secondary: #ff2e88; + --light-secondary: #fc77b1; + --red: red; + --black: #212529; + --white: #fdfdfd; + --dark-gray: #343334; + --gray: #616060; + --light-gray: #ccc; + --lighter-gray: #f6f6f6; + --font-sans-serif: + system-ui, + -apple-system, + segoe ui, + roboto, + ubuntu, + helvetica, + cantarell, + noto sans, + sans-serif; + --font-monospace: + menlo, + monaco, + lucida console, + liberation mono, + dejavu sans mono, + bitstream vera sans mono, + courier new, + monospace, + serif; + --boder-radius: 0.2rem; + } + + * { + box-sizing: border-box; + margin: 0; + padding: 0; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; + font-family: var(--font-sans-serif); + } + + html { + font-size: calc(16px + ((100vw - 600px) / 250)); + padding: 0; + text-decoration-skip-ink: "auto"; + line-height: 1.953rem; + margin: auto; + min-height: 100%; + overflow-x: hidden; + max-width: 1140px; + } + + body { + padding: 0; + margin: calc((100vh / 25) * 1.563) calc((100vw / 25) * 1.563); + background-color: var(--white); + color: var(--black); + caret-color: var(--black); + word-wrap: break-word; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: 1rem; + margin-top: 1em; + font-weight: bold; + } + + h1 { + font-size: 3.052rem; + letter-spacing: -0.15rem; + line-height: 1; + } + + h2 { + font-size: 2.441rem; + letter-spacing: -0.12rem; + line-height: 1.2; + } + + h3 { + font-size: 1.953rem; + letter-spacing: -0.09rem; + line-height: 1.2; + } + + h4 { + font-size: 1.563rem; + letter-spacing: -0.06rem; + line-height: 1.3; + } + + h5 { + font-size: 1.25rem; + letter-spacing: -0.03rem; + line-height: 1.4; + } + + h6 { + font-size: 1rem; + letter-spacing: 0; + line-height: 1.5; + } + + p { + margin-bottom: 1.563rem; + } + + p > *:last-child { + margin-bottom: 0; + } + + blockquote { + border-left: 1px solid var(--light-gray); + padding: 0 1rem; + margin-bottom: 1.563rem; + } + + a { + color: var(--primary); + text-decoration: none; + } + + @media (hover: hover) { + a:hover { + text-decoration: underline; + } + } + + small { + font-size: 0.888rem; + } + + hr { + border: 0; + height: 2px; + margin: 1rem 0; + background: var(--light-gray); + } + + fieldset { + border: none; + padding: 0; + margin: 0; + } + + label, + legend { + font-weight: bold; + display: inline-block; + } + + input[type="email"], + input[type="text"], + input[type="number"], + input[type="password"], + input[type="date"], + input[type="month"], + input[type="week"], + input[type="datetime"], + input[type="datetime-local"], + input[type="url"], + input[type="search"], + input[type="tel"], + input:not([type]) { + display: block; + padding: 1rem; + font-size: 1rem; + border: 2px solid var(--lighter-gray); + color: var(--black); + appearance: none; + border-radius: var(--boder-radius); + background-color: var(--lighter-gray); + -webkit-appearance: none; + -moz-appearance: none; + } + + select { + display: block; + padding: 1rem; + font-size: 1em; + border: 2px solid var(--lighter-gray); + border-radius: var(--boder-radius); + color: var(--black); + background-color: var(--lighter-gray); + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + } + + textarea { + display: block; + font-size: 1rem; + padding: 1rem; + line-height: 1rem; + color: var(--black); + border-radius: var(--boder-radius); + border: 2px solid var(--lighter-gray); + background-color: var(--lighter-gray); + box-sizing: border-box; + resize: none; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + } + + input:focus, + select:focus, + textarea:focus { + outline: none; + border: 2px solid var(--primary); + } + + input:invalid, + select:invalid, + textarea:invalid { + border: 2px solid var(--red); + outline: none; + } + + input[type="checkbox"]:hover, + input[type="radio"]:hover { + cursor: pointer; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button { + padding: 0.5rem 1.25rem; + font-size: 1rem; + border: 0; + border-radius: var(--boder-radius); + color: var(--lighter-gray); + height: 2.5rem; + background-color: var(--primary); + -webkit-appearance: none; + -moz-appearance: none; + font-weight: bold; + } + + @media (hover: hover) { + input[type="reset"]:hover, + input[type="submit"]:hover, + input[type="button"]:hover, + button:hover { + cursor: pointer; + background-color: var(--light-primary); + } + } + + button:focus-visible, + input[type="submit"]:focus-visible, + input[type="reset"]:focus-visible, + input[type="button"]:focus-visible { + border-color: var(--light-primary); + outline: none; + } + + input[disabled], + button:disabled { + background-color: var(--gray); + } + + table { + width: 100%; + border-collapse: collapse; + margin: 1.75rem 0; + font-variant-numeric: tabular-nums; + } + + th, + td { + vertical-align: top; + border-bottom: 2px solid var(--light-gray); + line-height: 15px; + padding: 15px; + } + + th { + font-weight: bold; + text-align: left; + color: var(--dark-gray); + } + + code, + pre { + font-family: var(--font-monospace); + color: var(--dark-gray); + background-color: var(--lighter-gray); + font-size: 0.8rem; + vertical-align: middle; + overflow: scroll; + border-radius: var(--boder-radius); + } + + code { + white-space: nowrap; + vertical-align: baseline; + padding: 0 0.328rem; + } + + pre { + white-space: pre; + margin: 0.262rem 0; + padding: 0.64rem 1rem; + } + + pre::after { + content: " "; + } + + ul { + margin: 0; + padding: 0 1px; + list-style: disc outside; + font-variant-numeric: tabular-nums; + } + + ol { + list-style: decimal outside; + } + + ol, + ul { + padding-left: 0; + margin-top: 1rem; + margin-bottom: 1rem; + } + + li { + list-style-position: inside; + } + + kbd { + display: inline-block; + padding: 0 0.328rem; + font-family: + "SFMono-Regular", + Consolas, + "Liberation Mono", + Menlo, + Courier, + monospace; + font-size: 0.64rem; + color: var(--dark-gray); + vertical-align: middle; + background-color: #f9f9f9; + border: solid 1px #d8d8d8; + border-bottom: solid 2px #a6a5a6; + border-radius: 5px; + } + + abbr { + text-decoration: none; + border-bottom: 2px dashed #949394; + } + + @media (hover: hover) { + abbr:hover { + cursor: help; + } + } + \ No newline at end of file diff --git a/switcher.js b/switcher.js index a87e40e..8fe34f0 100644 --- a/switcher.js +++ b/switcher.js @@ -1,4 +1,4 @@ -var frameworks = "a11yana,bahunya,bare,base,basic,bonsai,bullframe,bulma,caiuss,caramel,cardinal,centurion,chota,cirrus,clmaterial,codify,comet,concise,concrete,cutestrap,flat-ui,fluidity,furtive,generic,github-markdown,gutenberg,hack,hello,hiq,holiday,html-starterkit,hyp,kathamo,koochak,kraken,kube,latex,lemon,lit,lotus,markdown,marx,material,materialize,mercury,milligram,min,mini,minimal,minimal-stylesheet,mobi,motherplate,mu,mui,mvp,new,no-class,normalize,oh-my-css,paper,papier,pavilion,picnic,preface,primer,propeller,pure,roble,sakura,sanitize,scooter,semantic-ui,shoelace,siimple,simple,skeleton,skeleton-framework,skeleton-plus,snack,spectre,style,stylize,tachyons,tacit,tent,thao,vanilla,vital,water,wing,writ,yamb,yorha,ads-gazette,ads-medium,ads-notebook,ads-tufte,awsm-default,awsm-black,awsm-bigstone,awsm-gondola,awsm-mischka,awsm-pastelpink,awsm-pearllusta,awsm-tasman,awsm-white,boot-cerulean,boot-cosmo,boot-cyborg,boot-darkly,boot-flatly,boot-journal,boot-lumen,boot-paper,boot-readable,boot-sandstone,boot-slate,boot-spacelab,boot-superhero,boot-yeti,md-air,md-modest,md-retro,md-splendor,w3c-chocolate,w3c-midnight,w3c-modernist,w3c-oldstyle,w3c-steely,w3c-swiss,w3c-traditional,w3c-ultramarine"; +var frameworks = "a11yana,axist,bahunya,bare,base,basic,bonsai,bullframe,bulma,caiuss,caramel,cardinal,centurion,chota,cirrus,clmaterial,codify,comet,concise,concrete,cutestrap,flat-ui,fluidity,furtive,generic,github-markdown,gutenberg,hack,hello,hiq,holiday,html-starterkit,hyp,kathamo,koochak,kraken,kube,latex,lemon,lit,lotus,markdown,marx,material,materialize,mercury,milligram,min,mini,minimal,minimal-stylesheet,mobi,motherplate,mu,mui,mvp,new,no-class,normalize,oh-my-css,paper,papier,pavilion,picnic,preface,primer,propeller,pure,roble,sakura,sanitize,scooter,semantic-ui,shoelace,siimple,simple,skeleton,skeleton-framework,skeleton-plus,snack,spectre,style,stylize,tachyons,tacit,tent,thao,vanilla,vital,water,wing,writ,yamb,yorha,ads-gazette,ads-medium,ads-notebook,ads-tufte,awsm-default,awsm-black,awsm-bigstone,awsm-gondola,awsm-mischka,awsm-pastelpink,awsm-pearllusta,awsm-tasman,awsm-white,boot-cerulean,boot-cosmo,boot-cyborg,boot-darkly,boot-flatly,boot-journal,boot-lumen,boot-paper,boot-readable,boot-sandstone,boot-slate,boot-spacelab,boot-superhero,boot-yeti,md-air,md-modest,md-retro,md-splendor,w3c-chocolate,w3c-midnight,w3c-modernist,w3c-oldstyle,w3c-steely,w3c-swiss,w3c-traditional,w3c-ultramarine"; add_switcher();