PicoCSS Scale

[maurxce]

Hey everyone, just a general question to all picocss users out there: am I the only one that feels the scale of components is too big?

The components seem to have such a weird scale for me (on desktop at least) and I find myself almost always manually adjusting sizes.
I'm specifically speaking about:

• Inputs
• Buttons

[pietz]

I completely agree with you. That's also the basis for my post from 2 weeks ago. I don't want to be mean because Pico is such a great concept, but the size of desktop elements looks absolutely ridiculous. Almost like a UI made for seniors that have bad eye sight.

[maurxce]

That was my exact thought too!
I love that I don't have to use many classnames for styling components, they look already great out of the box - apart from the scale.

I like to use PicoCSS because you can quickly throw together a pretty good looking website imo, but having to manually adjust the scaling for desktop feels pretty painful for me (mind you, I'm no CSS expert, so that takes a lot of experimenting and time)

[pietz]

For anyone in a similar position, I just wanted to share my custom.css content to override some of the default design and scale choices from PicoCSS. I think Picos default styling appeals to marketing UIs but not necessarily to application UIs. The elements tend to be way too large.

Anyway, the nice thing is that you can quickly change those default styles, so here is mine that is largely inspired by shadcn/ui, which I really like:

:root {
    --pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
    --pico-font-size: 87.5%;
    /* Original: 100% */
    --pico-line-height: 1.25;
    /* Original: 1.5 */
    --pico-form-element-spacing-vertical: 0.5rem;
    /* Original: 1rem */
    --pico-form-element-spacing-horizontal: 1.0rem;
    /* Original: 1.25rem */
    --pico-border-radius: 0.375rem;
    /* Original: 0.25rem */
}

@media (min-width: 576px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 106.25% */
    }
}

@media (min-width: 768px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 112.5% */
    }
}

@media (min-width: 1024px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 118.75% */
    }
}

@media (min-width: 1280px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 125% */
    }
}

@media (min-width: 1536px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 131.25% */
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --pico-font-weight: 600;
    /* Original: 700 */
}

article {
    border: 1px solid var(--pico-muted-border-color);
    /* Original doesn't have a border */
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}

article>footer {
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}

[hesusruiz]

This is exactly what I was looking for! I did my minimal tweaking, but yours is better!
Thanks.

[bluecraank]

Perfect! This should be a official answer to this.

[BapiGso]

Thank you! I hope more people with the same needs as me can see it

[bdeb1337]

Great, thank you.

[jedidja]

Thanks so much for this!! Wish Pico would acknowledge this and include a "small" option by default

[ronny-rentner]

I am having the same problem. Everything is too big. It would be nice if there was some generic css variable that is similar to just zooming in the browser.

[ghomem]

Hi! I fell the same as the OP. I love Pico and the widget size is my only complaint. I was successful using this:

<main class="container" style="transform: scale(0.8); transform-origin: 0 0; width: 500px;">
...

I size 0.8 it looks very good, in my opinion. Note: the transform-origin part is really necessary or strange padding will appear on top of the document.

[harrybiddle]

I couldn't agree more! It looks like a Fisher Price interface.

[anthony-mg]

You change the break points using scss variables https://picocss.com/docs/container