minimal
editable
scalable
standard

minimal

Scaler redefines efficiency, offering maximum functionality with a minimal footprint. Forget installations, cloning, or compiling. Scaler is your go-to starting point; simply copy the code below and integrate it seamlessly into your next project. Designed for developers who value simplicity and directness, Scaler ensures your project begins on solid ground without the weight of unnecessary complexity.

editable

Customization is at the heart of Scaler. Crafted with pure vanilla CSS, it's engineered for flexibility, allowing you to tweak, modify, and tailor it to your project's specific needs effortlessly. Need to adjust for different viewports or remove unused styles? Scaler's straightforward structure means you can make changes without disrupting the core functionality, ensuring a personalized fit for any project.

scalable

Scaler ensures interfaces adapt flawlessly across devices, offering seamless experiences at every screen size. This framework, a bedrock for scalable interfaces, automatically adjusts for an ideal fit from smartphones to desktops. It provides a responsive design toolkit right from the start. Its ultra lean codebase guarantees your UI stays elegant and functional everywhere. Scaler boosts your projects with precision scaling, enhancing usability and engagement on any device.

standard

Scaler adheres to web standards, ensuring compatibility and performance across all modern browsers. It's designed with best practices in mind. There's no need to worry about deprecated code or non-standard implementations. With Scaler, your project's foundation becomes eternal by avoiding adapting bloated frameworks and passing trends. Just focus on building your project, not fixing compatibility issues.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text Text link

Ordered list item
Ordered list item
Ordered list item
Ordered list item

Unordered list item
Unordered list item
Unordered list item
Unordered list item

Blockquote text

Code text

Fieldset Input label Option label Textarea label

/*

scaler

*/

:root {
    --font-size: 4vw;
    --heading-scale: 1.2;
    --h6-size: calc(var(--font-size) * var(--heading-scale));
    --h5-size: calc(var(--h6-size) * var(--heading-scale));
    --h4-size: calc(var(--h5-size) * var(--heading-scale));
    --h3-size: calc(var(--h4-size) * var(--heading-scale));
    --h2-size: calc(var(--h3-size) * var(--heading-scale));
    --h1-size: calc(var(--h2-size) * var(--heading-scale));
    --heading-weight: 700;
    --heading-style: normal;
    --heading-margin: 1rem 0;

    --body-font: sans-serif;
    --heading-font: sans-serif;
    --code-font: monospace;

    --std-line-thickness: .125em;
    --std-border: var(--std-line-thickness) solid black;
    --std-border-radius: 0;
    --std-padding: 1rem;

    --section-padding: 2rem 1rem;
}
@media(min-width: 480px){
    :root {
        --font-size: 2.5vw;
        --heading-scale: 1.25;
        --std-padding: 2rem;
        --section-padding: 2rem;
    }
}
@media (min-width: 960px) {
    :root {
        --font-size: 1.25vw;
        --heading-scale: 1.333;
        --std-padding: 4rem;
        --section-padding: 4rem;
    }
}
@media (min-width: 1440px) {
    :root {
        --font-size: 1vw;
        --heading-scale: 1.414;
        --std-padding: 8rem;
        --section-padding: 4rem 8rem;
    }
}
@media (min-width: 1920px){
    :root {
        --font-size: .835vw;
        --heading-scale: 1.5;
        --std-padding: 16rem;
        --section-padding: 4rem 16rem;
    }
}


*{
    box-sizing: border-box;
}
html{
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    font-family: var(--body-font);
}
body{
    margin: 0;
    padding :0;
    line-height: 1.2;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
    font-family: var(--heading-font);
    margin: var(--heading-margin);
    font-weight: var(--heading-weight);
    line-height: 1em;
    font-style: var(--heading-style);
}
h1{
    font-size: var(--h1-size);
}
h2{
    font-size: var(--h2-size);
}
h3{
    font-size: var(--h3-size);
}
h4{
    font-size: var(--h4-size);
}
h5{
    font-size: var(--h5-size);
}
h6{
    font-size: var(--h6-size);
}
a{
    text-decoration-thickness: var(--std-line-thickness);
    color: inherit;
}
p{
    line-height: 1.5;
}
ul,ol{
    padding-inline-start: 1em;
    padding-left: 0;
    list-style-position: inside;
}
li{
    margin: .5em 0;
}
img{
    max-width: 100%;
}

blockquote, figure{
    margin-inline-start: 2em;
    margin-inline-end: 2em;
}
code{
    font-family: var(--code-font);
}
input, select, textarea{
    font-family: var(--body-font);
    padding: 1em;
    font-size: 1rem;
    margin: 1rem 0;
    border: var(--std-border);
    border-radius: var(--std-border-radius);
    display: block;
    min-width: 14em;
}
select{
    appearance: none;
    background: url();
    background-size: .5rem .5rem;
    background-position: 95% center;
    background-repeat: no-repeat;
}
label{
    display: block;
    margin: 1rem 0;
}
label > *{
    margin: 0;
}
fieldset {
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 1rem;
    border: var(--std-border);
    min-inline-size: min-content;
    margin: .5rem 0 1rem;
    width: max-content;
}
legend{
    padding-inline: 1rem;
    height: 1em;
}
button{
    font-family: var(--body-font);
    font-size: 1rem;
    padding: 1em 2em;
    min-width: 10em;
    background: none;
    border: var(--std-border);
    border-radius: var(--std-border-radius);
    cursor: pointer;
    display: block;
    background-color: white;
}

/*

scaler

andrew fishback made this
https://andrewfishback.com

license: MIT - Use, copy, modify, and distribute freely with this notice intact.

*/

minimal editable scalable standard

Intro