diff --git a/docs/index.html b/docs/index.html index ad4060efb..e32341c1f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,7 +1,7 @@ - + 30 seconds of code @@ -1253,7 +1253,7 @@ Use Number() to check if the coercion holds.


diff --git a/docs/mini.css b/docs/mini.css new file mode 100644 index 000000000..d87d6eadb --- /dev/null +++ b/docs/mini.css @@ -0,0 +1 @@ +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--mark-back-color:#0277bd;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#424242;--toast-fore-color:#fafafa}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#212121;--tooltip-fore-color:#fafafa}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#212121}.tooltip.bottom:before{border-bottom-color:#212121}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#444;--modal-close-hover-color:#f0f0f0}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#e8e8e8;--collapse-label-fore-color:#212121;--collapse-label-hover-back-color:#f0f0f0;--collapse-selected-label-back-color:#ececec;--collapse-border-color:#ddd;--collapse-content-back-color:#fafafa;--collapse-selected-label-border-color:#0277bd}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>:checked:last-of-type+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#d32f2f}mark.tertiary{--mark-back-color:#308732}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em} diff --git a/docs/mini/_contextual.scss b/docs/mini/_contextual.scss new file mode 100644 index 000000000..08bd3c988 --- /dev/null +++ b/docs/mini/_contextual.scss @@ -0,0 +1,351 @@ +/* + Definitions for contextual background elements, toasts and tooltips. +*/ +$mark-back-color: #0277bd !default; // Background color for +$mark-fore-color: #fafafa !default; // Text color for +$mark-font-size: 0.95em !default; // Font size for +$mark-line-height: 1em !default; // Line height for +$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block +$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean) +$toast-name: 'toast' !default; // Class name for toast component +$toast-back-color: #424242 !default; // Background color for toast component +$toast-fore-color: #fafafa !default; // Text color for toast component +$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean) +$tooltip-name: 'tooltip' !default; // Class name for tooltip component +$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name +$tooltip-back-color: #212121 !default; // Background color for tooltip component +$tooltip-fore-color: #fafafa !default; // Text color for tooltip component +$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean) +$modal-name: 'modal' !default; // Class name for modal dialog component +$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component +$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button +$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component +$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus) +$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component +$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean) +$collapse-name: 'collapse' !default; // Class name for collapse component +$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component +$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component +$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component +$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component +$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover) +$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component +$collapse-border-color: #ddd !default; // Border color for collapse component +$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels +$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes +// CSS variable name definitions [exercise caution if modifying these] +$mark-back-color-var: '--mark-back-color' !default; +$mark-fore-color-var: '--mark-fore-color' !default; +$toast-back-color-var: '--toast-back-color' !default; +$toast-fore-color-var: '--toast-fore-color' !default; +$tooltip-back-color-var: '--tooltip-back-color' !default; +$tooltip-fore-color-var: '--tooltip-fore-color' !default; +$modal-overlay-color-var: '--modal-overlay-color' !default; +$modal-close-color-var: '--modal-close-color' !default; +$modal-close-hover-back-color-var: '--modal-close-hover-color' !default; +$collapse-label-back-color-var: '--collapse-label-back-color' !default; +$collapse-label-fore-color-var: '--collapse-label-fore-color' !default; +$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default; +$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default; +$collapse-border-color-var: '--collapse-border-color' !default; +$collapse-content-back-color-var: '--collapse-content-back-color' !default; +$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default; +// == Uncomment below code if this module is used on its own == +// +// $base-line-height: 1.5 !default; // Line height for most elements +// $universal-margin: 0.5rem !default; // Universal margin for the most elements +// $universal-padding: 0.5rem !default; // Universal padding for the most elements +// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements +// $universal-box-shadow: none !default; // Universal box-shadow for most elements +// $universal-margin-var: '--universal-margin' !default; +// $universal-padding-var: '--universal-padding' !default; +// $universal-border-radius-var: '--universal-border-radius' !default; +// $universal-box-shadow-var: '--universal-box-shadow' !default; +// :root { +// #{$universal-margin-var}: $universal-margin; +// #{$universal-padding-var}: $universal-padding; +// #{$universal-border-radius-var}: $universal-border-radius; +// @if $universal-box-shadow != none { +// #{$universal-box-shadow-var}: $universal-box-shadow; +// } +// } +// +// ============================================================ +// Check the `_contextual_mixins.scss` file to find this module's mixins. +@import '_contextual_mixins'; +/* Contextual module CSS variable definitions */ +:root { + #{$mark-back-color-var}: $mark-back-color; + #{$mark-fore-color-var}: $mark-fore-color; +} +// Default styling for mark. Use mixins for alternate styles. +mark { + background: var(#{$mark-back-color-var}); + color: var(#{$mark-fore-color-var}); + font-size: $mark-font-size; + line-height: $mark-line-height; + border-radius: var(#{$universal-border-radius-var}); + padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + &.#{$mark-inline-block-name} { + display: inline-block; + // This is hardcoded, as we want inline-block elements to be styled as normal pieces of text, instead of look small and weird. + font-size: 1em; + // Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons. + line-height: $base-line-height; + padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var}); + } +} +// Styling for toasts. - No border styling, I think it's unnecessary anyways. +@if $_include-toast { + :root { + #{$toast-back-color-var}: $toast-back-color; + #{$toast-fore-color-var}: $toast-fore-color; + } + .#{$toast-name} { + position: fixed; + bottom: calc(var(#{$universal-margin-var}) * 3); + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(#{$toast-fore-color-var}); + background: var(#{$toast-back-color-var}); + border-radius: calc(var(#{$universal-border-radius-var}) * 16); + padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + } +} +// Styling for tooltips. +@if $_include-tooltip { + :root { + #{$tooltip-back-color-var}: $tooltip-back-color; + #{$tooltip-fore-color-var}: $tooltip-fore-color; + } + .#{$tooltip-name} { + position: relative; + display: inline-block; + &:before, &:after { + position: absolute; + opacity: 0; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: all 0.3s; + // Remember to keep this index a lower value than the one used for stickies. + z-index: 1010; // Deals with certain problems when combined with cards and tables. + left: 50%; + } + &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling + bottom: 75%; + } + &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling + top: 75%; + } + &:hover, &:focus { + &:before, &:after { + opacity: 1; + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + } + } + &:before { // This is the little tooltip triangle + content: ''; + background: transparent; + border: var(#{$universal-margin-var}) solid transparent; + // Newer browsers will center the tail properly + left: calc(50% - var(#{$universal-margin-var})); + } + &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling + border-top-color: $tooltip-back-color; + } + &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling + border-bottom-color: $tooltip-back-color; + } + &:after { // This is the actual tooltip's text block + content: attr(aria-label); + color: var(#{$tooltip-fore-color-var}); + background: var(#{$tooltip-back-color-var}); + border-radius: var(#{$universal-border-radius-var}); + padding: var(#{$universal-padding-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + white-space: nowrap; + transform: translateX(-50%); + } + &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling + margin-bottom: calc(2 * var(#{$universal-margin-var})); + } + &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling + margin-top: calc(2 * var(#{$universal-margin-var})); + } + } +} +// Styling for modal dialogs. +@if $_include-modal { + :root { + #{$modal-overlay-color-var}: $modal-overlay-color; + #{$modal-close-color-var}: $modal-close-color; + #{$modal-close-hover-back-color-var}: $modal-close-hover-back-color; + } + [type="checkbox"].#{$modal-name} { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + & + div { + position: fixed; + top: 0; + left: 0; + display: none; + width: 100vw; + height: 100vh; + background: var(#{$modal-overlay-color-var}); + & .card { + margin: 0 auto; + max-height: 50vh; + overflow: auto; + & .#{$modal-close-name} { + position: absolute; + top: 0; + right: 0; + width: $modal-close-size; + height: $modal-close-size; + border-radius: var(#{$universal-border-radius-var}); + padding: var(#{$universal-padding-var}); + margin: 0; + cursor: pointer; + transition: background 0.3s; + &:before { + display: block; + content: '\00D7'; + color: var(#{$modal-close-color-var}); + position: relative; + font-family: sans-serif; + font-size: $modal-close-size; + line-height: 1; + text-align: center; + } + &:hover, &:focus { + background: var(#{$modal-close-hover-back-color-var}); + } + } + } + } + &:checked + div { + display: flex; + flex: 0 1 auto; + z-index: 1200; + & .card { + & .#{$modal-close-name} { + z-index: 1211; + } + } + } + } +} +// Styling for collapse. +@if $_include-collapse { + :root { + #{$collapse-label-back-color-var}: $collapse-label-back-color; + #{$collapse-label-fore-color-var}: $collapse-label-fore-color; + #{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color; + #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color; + #{$collapse-border-color-var}: $collapse-border-color; + #{$collapse-content-back-color-var} : $collapse-content-back-color; + #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color; + } + .#{$collapse-name} { + width: calc(100% - 2 * var(#{$universal-margin-var})); + opacity: 1; + display: flex; + flex-direction: column; + margin: var(#{$universal-margin-var}); + border-radius: var(#{$universal-border-radius-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + & > [type="radio"], & > [type="checkbox"] { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + } + & > label { + flex-grow: 1; + display: inline-block; + height: $collapse-label-height; + cursor: pointer; + transition: background 0.3s; + color: var(#{$collapse-label-fore-color-var}); + background: var(#{$collapse-label-back-color-var}); + border: $__1px solid var(#{$collapse-border-color-var}); + padding: calc(1.5 * var(#{$universal-padding-var})); + &:hover, &:focus { + background: var(#{$collapse-label-hover-back-color-var}); + } + + div { + flex-basis: auto; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: max-height 0.3s; + max-height: 1px; // for transition + } + } + > :checked + label { + background: var(#{$collapse-selected-label-back-color-var}); + // border: 0.0625rem solid #bdbdbd; // var it + border-bottom-color: var(#{$collapse-selected-label-border-color-var}); + & + div { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + overflow: auto; + margin: 0; + background: var(#{$collapse-content-back-color-var}); + border: $__1px solid var(#{$collapse-border-color-var}); + border-top: 0; + padding: var(#{$universal-padding-var}); + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + max-height: $collapse-content-max-height; + } + } + & > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles. + border-top: 0; + } + & > label:first-of-type { + border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize + } + & > label:last-of-type { + border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize + } + & > :checked:last-of-type + label { + border-radius: 0; + + div { + border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize + } + } + } +} diff --git a/docs/mini/_contextual_mixins.scss b/docs/mini/_contextual_mixins.scss new file mode 100644 index 000000000..8b004b9b5 --- /dev/null +++ b/docs/mini/_contextual_mixins.scss @@ -0,0 +1,27 @@ +// Contextual module's mixin definitions are here. For the module itself +// check `_contextual.scss`. +// Mark color variant mixin: +// $mark-alt-name: The name of the class used for the variant. +// $mark-alt-back-color: Background color for variant. +// $mark-alt-fore-color: Text color for variant. +@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color, + $mark-alt-fore-color : $mark-fore-color) { + mark.#{$mark-alt-name} { + @if $mark-alt-back-color != $mark-back-color { + #{$mark-back-color-var}: $mark-alt-back-color; + } + @if $mark-alt-fore-color != $mark-fore-color{ + #{$mark-fore-color-var}: $mark-alt-fore-color; + } + } +} +// Mark size variant mixin: +// $mark-alt-name: The name of the class used for the variant. +// $mark-alt-padding: The padding of the variant. +// $mark-alt-border-radius: The border radius of the variant. +@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) { + mark.#{$mark-alt-name} { + padding: $mark-alt-padding; + border-radius: $mark-alt-border-radius; + } +} diff --git a/docs/mini/_core.scss b/docs/mini/_core.scss new file mode 100644 index 000000000..ccbc37661 --- /dev/null +++ b/docs/mini/_core.scss @@ -0,0 +1,304 @@ +/* + Browsers resets and base typography. +*/ + +// TODO: Add fluid type and test thoroughly +$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only) +$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean) +$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px` +$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements +$base-line-height: 1.5 !default; // Line height for most elements +$base-font-size: 1rem !default; // Font sizing for all elements +$_body-margin: 0 !default; // [Hidden] Margin for body +$fore-color: #111 !default; // Text & foreground color +$secondary-fore-color: #444 !default; // Secondary text & foreground color +$back-color: #f8f8f8 !default; // Background color +$secondary-back-color: #f0f0f0 !default; // Secondary background color +$blockquote-color: #f57c00 !default; //
sidebar and quotation color +$pre-color: #1565c0 !default; // 
 sidebar color
+$border-color:            #aaa !default;        // Border color
+$secondary-border-color:  #ddd !default;        // Secondary border color
+$heading-line-height:     1.2 !default;         // Line height for headings
+$heading-ratio:           1.19 !default;        // Ratio for headings (strictly unitless)
+$subheading-font-size:    0.75em !default;      // Font sizing for  elements in headings
+$subheading-top-margin:   -0.25rem !default;    // Top margin of  elements in headings
+$universal-margin:        0.5rem !default;      // Universal margin for the most elements
+$universal-padding:       0.5rem !default;      // Universal padding for the most elements
+$universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+$universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+$small-font-size:         0.75em !default;      // Font sizing for  elements
+$heading-font-weight:     500 !default;         // Font weight for headings
+$bold-font-weight:        700 !default;         // Font weight for  and 
+$horizontal-rule-line-height:  1.25em !default; // 
 line height
+$blockquote-quotation-size:    3rem !default;   // Font size for the quotation of 

+$blockquote-cite-size:         0.75em !default; // Font size for the [cite] of 

+$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
+$code-font-size:           0.85em;              // Font size for , 
+$small-element-font-size:     0.75em !default;  // Font size for , , 
+$sup-top:                  -0.5em !default;     //  top
+$sub-bottom:               -0.25em !default;    //  bottom
+$a-link-color:             #0277bd !default;    // Color for :link
+$a-visited-color:          #01579b !default;    // Color for :visited
+// CSS variable name definitions [exercise caution if modifying these]
+$fore-color-var:                '--fore-color' !default;
+$secondary-fore-color-var:      '--secondary-fore-color' !default;
+$back-color-var:                '--back-color' !default;
+$secondary-back-color-var:      '--secondary-back-color' !default;
+$blockquote-color-var:          '--blockquote-color' !default;
+$pre-color-var:                 '--pre-color' !default;
+$border-color-var:              '--border-color' !default;
+$secondary-border-color-var:    '--secondary-border-color' !default;
+$heading-ratio-var:             '--heading-ratio' !default;
+$universal-margin-var:          '--universal-margin' !default;
+$universal-padding-var:         '--universal-padding' !default;
+$universal-border-radius-var:   '--universal-border-radius' !default;
+$universal-box-shadow-var:      '--universal-box-shadow' !default;
+$a-link-color-var:              '--a-link-color' !default;
+$a-visited-color-var:           '--a-visited-color' !default;
+/* Core module CSS variable definitions */
+:root {
+  #{$fore-color-var}: $fore-color;
+  #{$secondary-fore-color-var}: $secondary-fore-color;
+  #{$back-color-var}: $back-color;
+  #{$secondary-back-color-var}: $secondary-back-color;
+  #{$blockquote-color-var}: $blockquote-color;
+  #{$pre-color-var}: $pre-color;
+  #{$border-color-var}: $border-color;
+  #{$secondary-border-color-var}: $secondary-border-color;
+  #{$heading-ratio-var}: $heading-ratio;
+  #{$universal-margin-var}: $universal-margin;
+  #{$universal-padding-var}: $universal-padding;
+  #{$universal-border-radius-var}: $universal-border-radius;
+  #{$a-link-color-var} : $a-link-color;
+  #{$a-visited-color-var} : $a-visited-color;
+  @if $universal-box-shadow != none {
+    #{$universal-box-shadow-var}: $universal-box-shadow;
+  }
+}
+html {
+  font-size: $base-root-font-size;  // Set root's font sizing.
+}
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em; // Fix for elements inside headings not displaying properly.
+}
+
+@if $_apply-defaults-to-all {
+  html, * {
+    font-family: #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
+  * {
+    font-size: $base-font-size;
+  }
+}
+@else {
+  html {
+    font-family:  #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
+}
+
+body {
+  margin: $_body-margin;
+  color: var(#{$fore-color-var});
+  background: var(#{$back-color-var});
+}
+
+// Correct display for Edge & Firefox.
+details {
+  display: block;
+}
+
+// Correct display in all browsers.
+summary {
+  display: list-item;
+}
+
+// Abbreviations
+abbr[title] {
+  border-bottom: none;           // Remove bottom border in Firefox 39-.
+  text-decoration: underline dotted;  // Opinionated style-fix for all browsers.
+}
+
+// Show overflow in Edge.
+input {
+  overflow: visible;
+}
+
+// Make images responsive by default.
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: $heading-line-height;
+  margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
+  font-weight: $heading-font-weight;
+  small {
+    color: var(#{$secondary-fore-color-var});
+    display: block;
+    @if $subheading-top-margin != 0 {
+      margin-top: $subheading-top-margin;
+    }
+    @if $subheading-font-size != $small-font-size {
+      font-size: $subheading-font-size;
+    }
+  }
+}
+
+h1 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h2 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h3 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h4 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}));
+}
+h5 {
+  font-size: 1rem;
+}
+h6 {
+  font-size: calc(1rem / var(#{$heading-ratio-var}));
+}
+
+p {
+  margin: var(#{$universal-margin-var});
+}
+
+ol, ul {
+  margin: var(#{$universal-margin-var});
+  padding-left: calc(2 * var(#{$universal-margin-var}));
+}
+
+b, strong {
+  font-weight: $bold-font-weight;
+}
+
+hr {
+  // Fixes and defaults for styling
+  box-sizing: content-box;
+  border: 0;
+  // Actual styling using variables
+  line-height: $horizontal-rule-line-height;
+  margin: var(#{$universal-margin-var});
+  height: $__1px;
+  background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
+}
+
+blockquote {  // Doesn't have a back color by default, can be added manually.
+  display: block;
+  position: relative;
+  font-style: italic;
+  color: var(#{$secondary-fore-color-var});
+  margin: var(#{$universal-margin-var});
+  padding: calc(3 * var(#{$universal-padding-var}));
+  border: $__1px solid var(#{$secondary-border-color-var});
+  border-left: 6*$__1px solid var(#{$blockquote-color-var});
+  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  &:before {
+    position: absolute;
+    top: calc(0rem - var(#{$universal-padding-var}));
+    left: 0;
+    font-family: sans-serif;
+    font-size: $blockquote-quotation-size;
+    font-weight: 700;
+    content: "\201c";
+    color: var(#{$blockquote-color-var});
+  }
+  &[cite]:after{
+    font-style: normal;
+    font-size: $blockquote-cite-size;
+    font-weight: 700;
+    content: "\a—  " attr(cite);
+    white-space: pre;
+  }
+}
+
+code, kbd, pre, samp {
+  font-family: #{$code-font-family};     // Display fix should be applied manually!
+  font-size: $code-font-size;
+}
+
+code { // No border color by default and fore color is the default for text, can be altered manually.
+  background: var(#{$secondary-back-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
+  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+kbd { // No border color by default, can be altered manually.
+  background: var(#{$fore-color-var});
+  color: var(#{$back-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
+  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+pre { // Fore color is the default, can be altered manually.
+  overflow: auto; // Responsiveness
+  background: var(#{$secondary-back-color-var});
+  padding: calc(1.5 * var(#{$universal-padding-var}));
+  margin: var(#{$universal-margin-var});
+  border: $__1px solid var(#{$secondary-border-color-var});
+  border-left: 4*$__1px solid var(#{$pre-color-var});
+  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+// Prevent elements from affecting the line height in all browsers.
+sup, sub, code, kbd {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+small, sup, sub, figcaption {
+  font-size: $small-element-font-size;
+}
+
+sup {
+  top: $sup-top;
+}
+sub {
+  bottom: $sub-bottom;
+}
+
+figure {
+  margin: var(#{$universal-margin-var});
+}
+figcaption {
+    color: var(#{$secondary-fore-color-var});
+}
+
+a {
+  text-decoration: none;
+  &:link{
+    color: var(#{$a-link-color-var});
+  }
+  &:visited {
+    color: var(#{$a-visited-color-var});
+  }
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
+}
diff --git a/docs/mini/_input_control.scss b/docs/mini/_input_control.scss
new file mode 100644
index 000000000..04635bac2
--- /dev/null
+++ b/docs/mini/_input_control.scss
@@ -0,0 +1,317 @@
+/*
+  Definitions for forms and input elements.
+*/
+// Different elements are styled based on the same set of rules.
+$input-group-name:           'input-group' !default;  // Class name for input groups.
+$_include-fluid-input-group: true !default;           // [Hidden] Should fluid input groups be included? (boolean)
+$input-group-fluid-name:     'fluid' !default;        // Class name for fluid input groups.
+$input-group-vertical-name:  'vertical' !default;     // Class name for vertical input groups.
+$input-group-mobile-breakpoint:   767px !default;     // Breakpoint for fluid input group mobile view.
+$button-class-name:           'button' !default;      // Class name for elements styled as buttons.
+$input-disabled-opacity:      0.75 !default;          // Opacity for input elements when disabled.
+$button-group-name:         'button-group' !default;  // Class name for button groups.
+$button-group-mobile-breakpoint: 767px !default;      // Mobile breakpoint for button groups.
+$form-back-color:             #f0f0f0 !default;       // Background color for forms.
+$form-fore-color:             #111 !default;          // Text color for forms.
+$form-border-color:           #ddd !default;          // Border color for forms.
+$input-back-color:            #f8f8f8 !default;       // Background color for input elements.
+$input-fore-color:            #111 !default;          // Text color for input elements.
+$input-border-color:          #ddd !default;          // Border color for input elements.
+$input-focus-color:           #0288d1 !default;       // Border color for focused input elements.
+$input-invalid-color:         #d32f2f !default;       // Border color for invalid input elements.
+$button-back-color:           #e2e2e2 !default;       // Background color for buttons.
+$button-hover-back-color:     #dcdcdc !default;       // Background color for buttons (hover).
+$button-fore-color:           #212121 !default;       // Text color for buttons.
+$button-border-color:         transparent !default;   // Border color for buttons.
+$button-hover-border-color:   transparent !default;   // Border color for buttons (hover).
+$button-group-border-color:  rgba(124,124,124, 0.54) !default;  // Border color for button groups.
+// CSS variable name definitions [exercise caution if modifying these]
+$form-back-color-var:         '--form-back-color' !default;
+$form-fore-color-var:         '--form-fore-color' !default;
+$form-border-color-var:       '--form-border-color' !default;
+$input-back-color-var:        '--input-back-color' !default;
+$input-fore-color-var:        '--input-fore-color' !default;
+$input-border-color-var:      '--input-border-color' !default;
+$input-focus-color-var:       '--input-focus-color' !default;
+$input-invalid-color-var:     '--input-invalid-color' !default;
+$button-back-color-var:       '--button-back-color' !default;
+$button-hover-back-color-var: '--button-hover-back-color' !default;
+$button-fore-color-var:       '--button-fore-color' !default;
+$button-border-color-var:       '--button-border-color' !default;
+$button-hover-border-color-var: '--button-hover-border-color' !default;
+$button-group-border-color-var: '--button-group-border-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $base-font-size:          1rem !default;        // Font sizing for all elements
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+// Check the `_input_control_mixins.scss` file to find this module's mixins.
+@import 'input_control_mixins';
+/* Input_control module CSS variable definitions */
+:root {
+  #{$form-back-color-var}: $form-back-color;
+  #{$form-fore-color-var}: $form-fore-color;
+  #{$form-border-color-var}: $form-border-color;
+  #{$input-back-color-var}: $input-back-color;
+  #{$input-fore-color-var}: $input-fore-color;
+  #{$input-border-color-var}: $input-border-color;
+  #{$input-focus-color-var}: $input-focus-color;
+  #{$input-invalid-color-var}: $input-invalid-color;
+  #{$button-back-color-var}: $button-back-color;
+  #{$button-hover-back-color-var}: $button-hover-back-color;
+  #{$button-fore-color-var}: $button-fore-color;
+  #{$button-border-color-var}: $button-border-color;
+  #{$button-hover-border-color-var}: $button-hover-border-color;
+  #{$button-group-border-color-var}: $button-group-border-color;
+}
+// Base form styling
+form {  // Text color is the default, this can be changed manually.
+  background: var(#{$form-back-color-var});
+  color: var(#{$form-fore-color-var});
+  border: $__1px solid var(#{$form-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+// Fieldset styling
+fieldset {
+  // Apply always to overwrite defaults for all of the below.
+  border: $__1px solid var(#{$form-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: calc(var(#{$universal-margin-var}) / 4);
+  padding: var(#{$universal-padding-var});
+}
+// Legend styling.
+legend {
+  // Edge fixes.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Actual styling.
+  font-weight: $bold-font-weight;
+  padding: calc(var(#{$universal-padding-var}) / 2);
+}
+// Label syling. - Basically just padding, but there might be more in the future.
+label {
+  padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
+}
+// Input group styling.
+.#{$input-group-name} {
+  display: inline-block;
+  // Fluid input groups
+  @if $_include-fluid-input-group {
+    &.#{$input-group-fluid-name} {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & > input {
+        max-width: 100%;
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+      // On mobile
+      @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
+        align-items: stretch;
+        flex-direction: column;
+      }
+    }
+    // Vertical input groups
+    &.#{$input-group-vertical-name} {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      & > input {
+        max-width: 100%;
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+    }
+  }
+}
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+// Correct style in Chrome and Safari.
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+// Correct style in Chrome and Safari.
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+// Common textual input styling. - Avoid using box-shadow with these.
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
+[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
+  box-sizing: border-box;
+  // Background, color and border should not be unassigned, as the browser defaults will apply.
+  background: var(#{$input-back-color-var});
+  color: var(#{$input-fore-color-var});
+  border: $__1px solid var(#{$input-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: calc(var(#{$universal-margin-var}) / 2);
+  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+}
+// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
+input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
+  &:hover, &:focus {
+    border-color: var(#{$input-focus-color-var});
+    box-shadow: none;
+  }
+  &:invalid, &:focus:invalid{
+    border-color: var(#{$input-invalid-color-var});
+    box-shadow: none;
+  }
+  &[readonly]{
+    background: var(#{$secondary-back-color-var});
+  }
+}
+// Fix for select and option elements overflowing their parent container.
+select {
+  max-width: 100%;
+}
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// Styling for checkboxes and radio buttons.
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+  width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+  vertical-align: text-bottom;
+  padding: 0; // Remove padding added from previous styles.
+  flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
+  flex-grow: 0 !important;  // Using with fluid input-groups is not recommended.
+  &:checked:before {
+    position: absolute;
+  }
+}
+[type="checkbox"] {
+  &:checked:before {
+    content: '\2713';
+    font-family: sans-serif;
+    font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+    top: calc(0rem - var(#{$universal-padding-var}));
+    left: calc(var(#{$universal-padding-var}) / 4);
+  }
+}
+[type="radio"] {
+  border-radius: 100%;
+  &:checked:before {
+    border-radius: 100%;
+    content: '';
+    top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
+    left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
+    background: var(#{$input-fore-color-var});
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+}
+// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
+:placeholder-shown {
+  color: var(#{$input-fore-color-var});
+}
+::-ms-placeholder {
+  color: var(#{$input-fore-color-var});
+  opacity: 0.54;
+}
+// Definitions for the button and button-like elements.
+// Different elements are styled based on the same set of rules.
+// Reset for Firefox focusing on button elements.
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+// Fixes for Android 4, iOS and Safari.
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+// Other fixes.
+button {
+  overflow: visible;      // Show the overflow in IE.
+  text-transform: none;    // Remove inheritance of text-transform in Edge, Firefox, and IE.
+}
+// Default styling
+button, [type="button"], [type="submit"], [type="reset"],
+a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
+a[role="button"], label[role="button"], [role="button"] {
+  display: inline-block;
+  background: var(#{$button-back-color-var});
+  color: var(#{$button-fore-color-var});
+  border: $__1px solid var(#{$button-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  margin: var(#{$universal-margin-var});
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.3s;
+  &:hover, &:focus {
+    background: var(#{$button-hover-back-color-var});
+    border-color: var(#{$button-hover-border-color-var});
+  }
+}
+// Disabled styling for input and button elements.
+input, textarea, select, button, .#{$button-class-name}, [role="button"] {
+  // .button[disabled] is actually higher specificity than a.button, so no need for more than that
+  &:disabled, &[disabled] {
+    cursor: not-allowed;
+    opacity: $input-disabled-opacity;
+  }
+}
+// Button group styling.
+.#{$button-group-name} {
+  display: flex;
+  border: $__1px solid var(#{$button-group-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  & > button, [type="button"], & > [type="submit"], & > [type="reset"],
+  & > .#{$button-class-name}, & > [role="button"] {
+    margin: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+    text-align: center;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  & > :not(:first-child) {
+    border-left: $__1px solid var(#{$button-group-border-color-var});
+  }
+  // Responsiveness for button groups
+  @media screen and (max-width: #{$button-group-mobile-breakpoint}) {
+    flex-direction: column;
+    & > :not(:first-child) {
+      border: 0;    // Reapply to remove the left border from elements.
+      border-top: $__1px solid var(#{$button-group-border-color-var});
+    }
+  }
+}
diff --git a/docs/mini/_input_control_mixins.scss b/docs/mini/_input_control_mixins.scss
new file mode 100644
index 000000000..4afba1cb8
--- /dev/null
+++ b/docs/mini/_input_control_mixins.scss
@@ -0,0 +1,46 @@
+// Input_control module's mixin definitions are here. For the module itself
+// check `_input_control.scss`.
+// Button color variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-back-color: Background color for button variant.
+//  $button-alt-hover-back-color: Background color for button variant (hover).
+//  $button-alt-fore-color: Text color for button variant.
+//  $button-alt-border-color: Border color for button variant.
+//  $button-alt-hover-border-color: Border color for button variant (hover).
+@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
+  $button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
+  $button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
+    button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+      &.#{$button-alt-name} {
+        @if $button-alt-back-color != $button-back-color {
+          #{$button-back-color-var}: $button-alt-back-color;
+        }
+        @if $button-alt-fore-color != $button-fore-color{
+          #{$button-fore-color-var}: $button-alt-fore-color;
+        }
+        @if $button-alt-border-color != $button-border-color{
+          #{$button-border-color-var}: $button-alt-border-color;
+        }
+        &:hover, &:focus {
+          @if $button-alt-hover-back-color != $button-hover-back-color{
+            #{$button-hover-back-color-var}: $button-alt-hover-back-color;
+          }
+          @if $button-alt-hover-border-color != $button-hover-border-color{
+            #{$button-hover-border-color-var}: $button-alt-hover-border-color;
+          }
+        }
+      }
+    }
+}
+// Button size variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-padding: The padding of the button variant.
+//  $button-alt-margin The margin of the button variant.
+@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
+  button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+    &.#{$button-alt-name} {
+      padding: $button-alt-padding;
+      margin: $button-alt-margin;
+    }
+  }
+}
diff --git a/docs/mini/_layout.scss b/docs/mini/_layout.scss
new file mode 100644
index 000000000..df2dc8bad
--- /dev/null
+++ b/docs/mini/_layout.scss
@@ -0,0 +1,199 @@
+/*
+  Definitions for the grid system, cards and containers.
+*/
+// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
+$_include-parent-layout:        true !default;        // [Hidden] Flag for rows defining column layouts (`true`/`false`).
+$grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
+$grid-container-name:          'container' !default;  // Class name for the grid system container.
+$grid-row-name:                'row' !default;        // Class name for the grid system rows.
+$grid-row-parent-layout-prefix:'cols' !default;       // Class name prefix for the grid's row parents.
+$grid-column-prefix:           'col' !default;        // Class name prefix for the grid's columns.
+$grid-column-offset-suffix:    'offset' !default;     // Class name suffix for the grid's offsets.
+$grid-order-normal-suffix:     'normal' !default;     // Class name suffix for grid columns with normal priority.
+$grid-order-first-suffix:      'first' !default;      // Class name suffix for grid columns with highest priority.
+$grid-order-last-suffix:       'last' !default;       // Class name suffix for grid columns with lowest priorty.
+$grid-small-prefix:            'sm' !default;         // Small screen class prefix for grid.
+$grid-medium-prefix:           'md' !default;         // Medium screen class prefix for grid.
+$grid-large-prefix:            'lg' !default;         // Large screen class prefix for grid.
+$grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
+$grid-large-breakpoint:        1280px !default;       // Large screen breakpoint for grid.
+$card-name:                    'card' !default;       // Class name for the cards.
+$card-section-name:            'section' !default;    // Class name for the cards' sections.
+$card-section-media-name:      'media' !default;      // Class name for the cards' sections (media cotent).
+$card-normal-width:            320px !default;        // Width for normal cards.
+$card-section-media-height:    200px !default;        // Height for cards' media sections.
+$card-fore-color:              #111 !default;         // Text color for the cards.
+$card-back-color:              #f8f8f8 !default;      // Background color for the cards.
+$card-border-color:            #ddd !default;         // Border color for the cards.
+// CSS variable name definitions [exercise caution if modifying these]
+$card-fore-color-var:          '--card-fore-color' !default;
+$card-back-color-var:          '--card-back-color' !default;
+$card-border-color-var:        '--card-border-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+// Check the `_layout_mixins.scss` file to find this module's mixins.
+@import 'layout_mixins';
+// Fluid grid system container definition.
+.#{$grid-container-name} {
+  margin: 0 auto;
+  padding: 0 calc(1.5 * var(#{$universal-padding-var}));
+}
+// Grid row definition.
+.#{$grid-row-name} {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+// Inline mixin, used to generate class definitions for each grid step.
+@mixin generate-grid-size ($size-prefix){
+  @if $_include-parent-layout {
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
+    .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > *  {
+      max-width: 100%;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+  }
+  @else {
+    // Grid column generic definitions.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
+      flex: 0 0 auto;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix} {
+      max-width: 100%;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+  }
+  // Grid column specific definitions for predefined columns.
+  @for $i from 1 through $grid-column-count {
+    @if $_include-parent-layout {
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i},
+      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
+        max-width: #{($i * 100% / $grid-column-count)};
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
+    }
+    @else {
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
+        max-width: #{($i * 100% / $grid-column-count)};
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
+    }
+    // Offest definitions.
+    .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
+      @if ($i - 1) == 0 {
+        margin-left: 0;
+      }
+      @else {
+        margin-left: #{(($i - 1) * 100% / $grid-column-count)};
+      }
+    }
+  }
+  // Reordering definitions.
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
+    order: initial;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix}  {
+    order: -999;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
+    order: 999;
+  }
+}
+// Definitions for smaller screens.
+@include generate-grid-size($grid-small-prefix);
+// Definitions for medium screens.
+@media screen and (min-width: #{$grid-medium-breakpoint}){
+  @include generate-grid-size($grid-medium-prefix);
+}
+// Definitions for large screens.
+@media screen and (min-width: #{$grid-large-breakpoint}){
+  @include generate-grid-size($grid-large-prefix);
+}
+/* Card component CSS variable definitions */
+:root {
+  #{$card-back-color-var}: $card-back-color;
+  #{$card-fore-color-var}: $card-fore-color;
+  #{$card-border-color-var}: $card-border-color;
+}
+// Card styling
+.#{$card-name} {
+  // New syntax
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-self: center;
+  position: relative;
+  width: 100%;
+  // Actual styling for the cards
+  background: var(#{$card-back-color-var});
+  color: var(#{$card-fore-color-var});
+  border: $__1px solid var(#{$card-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  overflow: hidden;   // Hide overflow from section borders
+  // Responsiveness (if the screen is larger than card, set max-width)
+  @media screen and (min-width: #{$card-normal-width}) {
+    max-width: $card-normal-width;
+  }
+  // Card sections
+  & > .#{$card-section-name} {
+    // Reapply background and foreground colors, so that mixins can be applied properly.
+    background: var(#{$card-back-color-var});
+    color: var(#{$card-fore-color-var});
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;        // Clean borders and radiuses for any element-based sections
+    border-radius: 0; // Clean borders and radiuses for any element-based sections
+    border-bottom: $__1px solid var(#{$card-border-color-var});
+    padding: var(#{$universal-padding-var});
+    width: 100%;
+    // Card media sections
+    &.#{$card-section-media-name} {
+      height: $card-section-media-height;
+      padding: 0;
+      -o-object-fit: cover;
+         object-fit: cover;
+    }
+  }
+  // Card sections - last
+  & > .#{$card-section-name}:last-child {
+    border-bottom: 0;  // Clean the extra border for last section
+  }
+}
diff --git a/docs/mini/_layout_mixins.scss b/docs/mini/_layout_mixins.scss
new file mode 100644
index 000000000..b8eac1ba0
--- /dev/null
+++ b/docs/mini/_layout_mixins.scss
@@ -0,0 +1,62 @@
+// Layout (card) module's mixin definitions are here. For the module itself
+// check `_layout.scss`.
+// Mixin for alternate card sizes:
+//  $card-alt-size-name: The name of the class used for the alternate size card.
+//  $card-alt-size-width: The width of the alternate size card.
+@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
+  @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
+    .#{$card-name}.#{$card-alt-size-name} {
+      max-width: $card-alt-size-width;
+      width: auto;
+    }
+  }
+  @else {
+    @media screen and (min-width: #{$card-alt-size-width}) {
+      .#{$card-name}.#{$card-alt-size-name} {
+        max-width: $card-alt-size-width;
+      }
+    }
+  }
+}
+// Mixin for alternate cards (card color variants):
+//  $card-alt-name: The name of the class used for the alternate card.
+//  $card-alt-back-color: The background color of the alternate card.
+//  $card-alt-fore-color: The text color of the alternate card.
+//  $card-alt-border-color: The border style of the alternate card.
+@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
+  $card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
+  .#{$card-name}.#{$card-alt-name} {
+    @if $card-alt-back-color != $card-back-color {
+      #{$card-back-color-var}: $card-alt-back-color;
+    }
+    @if $card-alt-fore-color != $card-fore-color {
+      #{$card-fore-color-var}: $card-alt-fore-color;
+    }
+    @if $card-alt-border-color != $card-border-color {
+      #{$card-border-color-var}: $card-alt-border-color;
+    }
+  }
+}
+// Mixin for alternate card sections (card section color variants):
+//  $card-section-alt-name: The name of the class used for the alternate card section.
+//  $card-section-alt-back-color: The background color of the alternate card section.
+//  $card-section-alt-fore-color: The text color of the alternate card section.
+@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
+  $card-section-alt-fore-color : $card-fore-color) {
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    @if $card-section-alt-back-color != $card-back-color {
+      #{$card-back-color-var}: $card-section-alt-back-color;
+    }
+    @if $card-section-alt-fore-color != $card-fore-color {
+      #{$card-fore-color-var}: $card-section-alt-fore-color;
+    }
+  }
+}
+// Mixin for alternate card sections (card section padding variants):
+//  $card-section-alt-name: The name of the class used for the alternate card section.
+//  $card-section-alt-padding: The padding of the alternate card section.
+@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    padding: $card-section-alt-padding;
+  }
+}
diff --git a/docs/mini/_navigation.scss b/docs/mini/_navigation.scss
new file mode 100644
index 000000000..6c905bf7d
--- /dev/null
+++ b/docs/mini/_navigation.scss
@@ -0,0 +1,315 @@
+/*
+  Definitions for navigation elements.
+*/
+// Different elements are styled based on the same set of rules.
+$header-height:     3.1875rem !default;      // Height of the header element.
+$header-back-color: #f8f8f8 !default;        // Background color for the header element.
+$header-hover-back-color: #f0f0f0 !default;  // Background color for the header element (hover).
+$header-fore-color:   #444 !default;         // Text color for the header element.
+$header-border-color: #ddd !default;         // Border color for the header element.
+$nav-back-color:      #f8f8f8 !default;      // Background color for the nav element.
+$nav-hover-back-color: #f0f0f0 !default;     // Background color for the nav element (hover).
+$nav-fore-color:      #444 !default;         // Text color for the nav element.
+$nav-border-color:    #ddd !default;         // Border color for the nav element.
+$nav-link-color:      #0277bd !default;      // Color for link in the nav element.
+$footer-fore-color:   #444 !default;         // Text color for the footer element.
+$footer-back-color:   #f8f8f8 !default;      // Background color for footer nav element.
+$footer-border-color: #ddd !default;         // Border color for the footer element.
+$footer-link-color:   #0277bd !default;      // Color for link in the footer element.
+$drawer-back-color:   #f8f8f8 !default;      // Background color for the drawer component.
+$drawer-border-color: #ddd !default;         // Border color for the drawer component.
+$drawer-hover-back-color: #f0f0f0 !default;  // Background color for the drawer component's close (hover).
+$drawer-close-color:  #444 !default;         // Color of the close element for the drawer component.
+$_header-only-bottom-border:  true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
+$_header-links-uppercase:     true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
+$header-logo-name:    'logo' !default;       // Class name for the header logo element.
+$header-logo-font-size: 1.75rem !default;    // Font ize for the header logo element.
+$nav-sublink-prefix:   'sublink' !default;   // Prefix for the subcategory tabs in nav.
+$nav-sublink-depth:    2 !default;           // Amount of subcategory classes to add.
+$_footer-only-top-border:  true !default;    // [Hidden] Apply styling only to the top border of footer? (boolean)
+$footer-font-size:    0.875rem !default;     // Font size for text in footer element.
+$sticky-name:         'sticky' !default;     // Class name for sticky headers and footers.
+$drawer-name:         'drawer' !default;     // Class name for the drawer component.
+$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
+$drawer-toggle-font-size: 1.5em !default;    // Font size for the drawer component's toggle. (prefer em units)
+$drawer-mobile-breakpoint: 768px !default;   // Mobile breakpoint for the drawer component.
+$_drawer-right:     true !default;           // [Hidden] Should the drawer appear on the right side of the screen?
+$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
+$drawer-width:      320px !default;          // Width of the drawer component.
+$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
+$drawer-close-size: 2rem !default;           // Size of the close element for the drawer component.
+$drawer-icons-color:  #212121 !default;      // Color for the icons used in the drawer component.
+// CSS variable name definitions [exercise caution if modifying these]
+$header-fore-color-var:          '--header-fore-color' !default;
+$header-back-color-var:          '--header-back-color' !default;
+$header-hover-back-color-var:    '--header-hover-back-color' !default;
+$header-border-color-var:        '--header-border-color' !default;
+$nav-fore-color-var:             '--nav-fore-color' !default;
+$nav-back-color-var:             '--nav-back-color' !default;
+$nav-hover-back-color-var:       '--nav-hover-back-color' !default;
+$nav-border-color-var:           '--nav-border-color' !default;
+$nav-link-color-var:             '--nav-link-color' !default;
+$footer-fore-color-var:          '--footer-fore-color' !default;
+$footer-back-color-var:          '--footer-back-color' !default;
+$footer-border-color-var:        '--footer-border-color' !default;
+$footer-link-color-var:          '--footer-link-color' !default;
+$drawer-back-color-var:          '--drawer-back-color' !default;
+$drawer-border-color-var:        '--drawer-border-color' !default;
+$drawer-hover-back-color-var:    '--drawer-hover-back-color' !default;
+$drawer-close-color-var:         '--drawer-close-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+/* Navigation module CSS variable definitions */
+:root {
+  #{$header-back-color-var}: $header-back-color;
+  #{$header-hover-back-color-var}: $header-hover-back-color;
+  #{$header-fore-color-var}: $header-fore-color;
+  #{$header-border-color-var}: $header-border-color;
+  #{$nav-back-color-var}: $nav-back-color;
+  #{$nav-hover-back-color-var}: $nav-hover-back-color;
+  #{$nav-fore-color-var}: $nav-fore-color;
+  #{$nav-border-color-var}: $nav-border-color;
+  #{$nav-link-color-var}: $nav-link-color;
+  #{$footer-fore-color-var}: $footer-fore-color;
+  #{$footer-back-color-var}: $footer-back-color;
+  #{$footer-border-color-var}: $footer-border-color;
+  #{$footer-link-color-var}: $footer-link-color;
+  #{$drawer-back-color-var}: $drawer-back-color;
+  #{$drawer-hover-back-color-var}: $drawer-hover-back-color;
+  #{$drawer-border-color-var}: $drawer-border-color;
+  #{$drawer-close-color-var}: $drawer-close-color;
+}
+// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
+header {
+  height: $header-height;
+  background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
+  color: var(#{$header-fore-color-var});
+  @if $_header-only-bottom-border {
+    border-bottom: $__1px solid var(#{$header-border-color-var});
+  }
+  @else {
+    border: $__1px solid var(#{$header-border-color-var});
+  }
+  padding: calc(var(#{$universal-padding-var}) / 4) 0;
+  // Responsiveness for smaller displays, scrolls horizontally.
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Fix for responsive header, using the grid system's row and column alignment.
+  &.#{$grid-row-name} {
+    box-sizing: content-box;
+  }
+  // Header logo styling.
+  .#{$header-logo-name} {
+    color: var(#{$header-fore-color-var});
+    font-size: $header-logo-font-size;
+    padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
+    text-decoration: none;
+  }
+  // Link styling.
+  button, [type="button"], .#{$button-class-name}, [role="button"] {
+    box-sizing: border-box;
+    position: relative;
+    top: calc(0rem - var(#{$universal-padding-var}) / 4);  // Use universal-padding to offset the padding of the header.
+    height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2);  // Fill header.
+    background: var(#{$header-back-color-var});        // Apply color regardless to override styling from other things.
+    line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
+    text-align: center;
+    color: var(#{$header-fore-color-var});
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+    @if $_header-links-uppercase {
+      text-transform: uppercase;
+    }
+    &:hover, &:focus {
+      background: var(#{$header-hover-back-color-var});
+    }
+  }
+}
+// Navigation sidebar styling.
+nav {
+  background: var(#{$nav-back-color-var});
+  color: var(#{$nav-fore-color-var});
+  border: $__1px solid var(#{$nav-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  * {
+    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  }
+  a, a:visited {
+    display: block;
+    color: var(#{$nav-link-color-var});    // Apply regardless to de-stylize visited links.
+    border-radius: var(#{$universal-border-radius-var});
+    transition: background 0.3s;
+    &:hover, &:focus {
+      text-decoration: none;
+      background: var(#{$nav-hover-back-color-var});
+    }
+  }
+  // Subcategories in navigation.
+  @for $i from 1 through $nav-sublink-depth {
+    .#{$nav-sublink-prefix}-#{$i} {
+      position: relative;
+      margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
+      &:before {
+        position: absolute;
+        left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
+        top: -#{$__1px};
+        content: '';
+        height: 100%;
+        border: $__1px solid var(#{$nav-border-color-var});
+        border-left: 0;
+      }
+    }
+  }
+}
+// Footer styling.
+footer {
+  background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
+  color: var(#{$footer-fore-color-var});
+  @if $_footer-only-top-border {
+    border-top: $__1px solid var(#{$footer-border-color-var});
+  }
+  @else {
+    border: $__1px solid var(#{$footer-border-color-var});
+  }
+  // margin: $footer-margin;
+  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
+  font-size: $footer-font-size;
+  a, a:visited {
+    color: var(#{$footer-link-color-var});
+  }
+}
+// Definitions for sticky headers and footers.
+header.#{$sticky-name} {
+  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
+  position: sticky;
+  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  top: 0;
+}
+footer.#{$sticky-name} {
+  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
+  position: sticky;
+  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  bottom: 0;
+}
+// Responsive drawer component.
+.#{$drawer-toggle-name} {
+  &:before {  // No color specified, should use the color of its surroundings!
+    display: inline-block;
+    position: relative;
+    vertical-align: bottom;
+    content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
+    font-family: sans-serif;
+    font-size: $drawer-toggle-font-size;   // Almost hardcoded, should be fully compatible with its surroundings.
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) {
+      display: none;
+    }
+  }
+}
+[type="checkbox"].#{$drawer-name} {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  + * {
+    display: block;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    width: $drawer-width;
+    height: 100vh;
+    overflow-y: auto;
+    background: var(#{$drawer-back-color-var});
+    border: $__1px solid var(#{$drawer-border-color-var});
+    border-radius: 0; // Set to 0 to override the value from `nav`.
+    margin: 0;        // Set to 0 to override the value from `nav`.
+    @if $universal-box-shadow != none {
+      box-shadow: var(#{$universal-box-shadow-var});
+    }
+    z-index: 1110;
+    @if $_drawer-right {
+      right: -$drawer-width;
+      transition: right 0.3s;
+    }
+    @else {
+      left: -$drawer-width;
+      transition: left 0.3s;
+    }
+    & .#{$drawer-close-name} {
+      position: absolute;
+      top: var(#{$universal-margin-var});
+      right: var(#{$universal-margin-var});
+      z-index: 1111;
+      width: $drawer-close-size;
+      height: $drawer-close-size;
+      border-radius: var(#{$universal-border-radius-var});
+      padding: var(#{$universal-padding-var});
+      margin: 0; // Fixes the offset from label
+      cursor: pointer;
+      transition: background 0.3s;
+      &:before {    // Transparent background unless hovered over. Does not block text behind it.
+        display: block;
+        content: '\00D7';
+        color: var(#{$drawer-close-color-var});
+        position: relative;
+        font-family: sans-serif;
+        font-size: $drawer-close-size;
+        line-height: 1;   // Setting to 1 seems to center the 'X' properly.
+        text-align: center;
+      }
+      &:hover, &:focus {
+        background: var(#{$drawer-hover-back-color-var});
+      }
+    }
+    @media screen and (max-width: #{$drawer-width}) {
+      width: 100%;
+    }
+  }
+  &:checked + * {
+    @if $_drawer-right {
+      right: 0;
+    }
+    @else {
+      left: 0;
+    }
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) + * {
+      position: static;
+      height: 100%;
+      z-index: 1100;
+      & .#{$drawer-close-name} {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
new file mode 100644
index 000000000..b8fde582e
--- /dev/null
+++ b/docs/mini/flavor.scss
@@ -0,0 +1,105 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+/*
+  Flavor name: Default (mini-default)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v3.0.0-alpha.2
+*/
+@import 'core';
+@import 'layout';
+
+/*
+  Custom elements for card elements.
+*/
+$card-small-name:              'small';            // Class name for small cards.
+$card-small-width:             240px;              // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name:              'large';            // Class name for large cards.
+$card-large-width:             480px;              // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name:              'fluid';            // Class name for fluid cards.
+$card-fluid-width:             100%;               // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name:            'warning';          // Class name for card warnging color variant.
+$card-warning-back-color:      #ffca28;            // Background color for card warnging color variant.
+$card-warning-fore-color:      #111;               // Text color for card warnging color variant.
+$card-warning-border-color:    #e8b825;            // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name:              'error';            // Class name for card error color variant.
+$card-error-back-color:        #b71c1c;            // Background color for card error color variant.
+$card-error-fore-color:        #f8f8f8;            // Text color for card error color variant.
+$card-error-border-color:      #a71a1a;            // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name:        'dark';            // Class name for card dark section variant.
+$card-section-dark-back-color:  #e0e0e0;           // Background color for card dark section variant.
+$card-section-dark-fore-color:  #111;              // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name:    'double-padded';   // Class name for card double-padded section variant.
+$card-section-double-padded-padding:  calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+@import 'input_control';
+
+/*
+  Custom elements for forms and input elements.
+*/
+$button-primary-name:            'primary';   // Class name for primary button color variant.
+$button-primary-back-color:      #1976d2;     // Background color for primary button color variant.
+$button-primary-hover-back-color:#1565c0;     // Background color for primary button color variant (hover).
+$button-primary-fore-color:      #f8f8f8;     // Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name:            'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color:      #d32f2f;     // Background color for secondary button color variant.
+$button-secondary-hover-back-color:#c62828;     // Background color for secondary button color variant (hover).
+$button-secondary-fore-color:      #f8f8f8;     // Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name:            'tertiary';  // Class name for tertiary button color variant.
+$button-tertiary-back-color:      #308732;     // Background color for tertiary button color variant.
+$button-tertiary-hover-back-color:#277529;     // Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color:      #f8f8f8;     // Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name:            'inverse';   // Class name for inverse button color variant.
+$button-inverse-back-color:      #212121;     // Background color for inverse button color variant.
+$button-inverse-hover-back-color:#111;        // Background color for inverse button color variant (hover).
+$button-inverse-fore-color:      #f8f8f8;     // Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name:    'small';              // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name:    'large';              // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+@import 'navigation';
+@import 'contextual';
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name:            'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color:      #d32f2f;     // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name:            'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color:      #308732;     // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius:        1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
diff --git a/scripts/web-script.js b/scripts/web-script.js
index 27e84fcc4..9c96dcb77 100644
--- a/scripts/web-script.js
+++ b/scripts/web-script.js
@@ -5,6 +5,22 @@
 // Load modules
 const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
   md = require('markdown-it')();
+const sass = require('node-sass');
+  sass.render({
+    file: path.join('docs','mini','flavor.scss'),
+    outFile: path.join('docs','mini.css'),
+    outputStyle: 'compressed'
+  }, function(err, result) {
+    if(!err){
+      fs.writeFile(path.join('docs','mini.css'), result.css, function(err2){
+        if(!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
+        else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+      });
+    }
+    else {
+      console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+    }
+  });
 // Set variables for paths
 const snippetsPath = './snippets',  staticPartsPath = './static-parts', docsPath = './docs';
 // Set variables for script
diff --git a/static-parts/index-end.html b/static-parts/index-end.html
index 453f9d4c4..1f11d9d4a 100644
--- a/static-parts/index-end.html
+++ b/static-parts/index-end.html
@@ -1,5 +1,5 @@
         
       
diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 5f1f3ff1a..6e633f426 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -1,7 +1,7 @@
 
 
   
-    
+    
     
     30 seconds of code