Replies: 2 comments 2 replies
-
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. |
Beta Was this translation helpful? Give feedback.
-
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) */
} |
Beta Was this translation helpful? Give feedback.
-
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:
Beta Was this translation helpful? Give feedback.
All reactions