6 ms·

Pico CSS v2 comes with 380 manually crafted colors

40 points by Leftium 3y ago

meowtimemania 3y ago
I love picocss for side projects.
- d1sxeyes 3y ago
  Yes it’s fantastic for that, and because it’s classless, it’s easy to upgrade once you’ve got your MVP.
- ttfkam 3y ago
  PicoCSS with Svelte feels like a rocket. None of the bloat and keeping much of the power. https://youtu.be/-n84EMKIXQM?si=v_xZmZVtAsC39NZj https://youtu.be/-n84EMKIXQM?si=v_xZmZVtAsC39NZj
SuaveSteve 3y ago
There's so many of these "just add water" little "semantic" CSS projects. Going through projects and seeing which are dead is always a chore. Maybe an AI scanning projects for "life" would be helpful?
- eternityforest 3y ago
  I dug through a ton of these for several days before finally deciding to just make my own... All the lesser known ones tend to not be very extensible or themable beyond basic color changes, and they're a little too extreme about pure semantic HTML. This guy has a really good roundup with last commit and GitHub stars info: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css Currently working on getting some issues with their test case ironed out to get mine (https://eternityforest.github.io/barrel.css/ https://eternityforest.github.io/barrel.css/) included.
Brajeshwar 3y ago
Thanks to Tailwind for, kinda like, standardizing this color variations and hue/saturation thing.
- ttfkam 3y ago
  I think CSS's standard hsl(…) did most of the heavy lifting here. Tailwind took advantage and set variations to CSS classes. I am coming to prefer lch(…) to any library. It scratches that consistent color itch and has basically universal support now in browsers. Then again, I prefer setting my CSS values through CSS variables rather than setting visual styles in the markup. YMMV
  - Leftium 3y ago
    Thanks for teaching me about lch()! It looks like oklch() fixed a problem I noticed with blue-white gradients turning purple~
knowsuchagency 3y ago
picocss is underrated. Combine it with basscss and shoelace components, and you're overpowered without even realizing it.
- ttfkam 3y ago
  I love PicoCSS as well, only combined with Svelte. My only complaint is that I also like OpenProps, and I truly wish OpenProps and PicoCSS would join forces with a common CSS variable API. It would help to bridge the gap between basic personal project and something noticeably bigger.
nickf 3y ago
Is there anything folks are adding to Pico that adds a nice CSS grid? For dashboards and such.
- Leftium 3y ago
  PicoCSS provides a minimal responsive layout with `.grid`: https://picocss.com/docs/grid https://picocss.com/docs/grid For for complex grids, PicoCSS suggests complementing with: 1. Flexbox grid layouts (for a quick way to prototype or build a complex layout) - Bootstrap grid, Flexbox Grid 2. OR CSS Grid Generators (for a light and custom grid) - CSS Grid Generator, Layoutit!, Griddy 3. OR just use CSS Grid --- There are links to all the above in the link below: https://picocss.com/docs/grid https://picocss.com/docs/grid

40 points by Leftium 3y ago

meowtimemania 3y ago

I love picocss for side projects.

d1sxeyes 3y ago
Yes it’s fantastic for that, and because it’s classless, it’s easy to upgrade once you’ve got your MVP.
ttfkam 3y ago
PicoCSS with Svelte feels like a rocket. None of the bloat and keeping much of the power. https://youtu.be/-n84EMKIXQM?si=v_xZmZVtAsC39NZj https://youtu.be/-n84EMKIXQM?si=v_xZmZVtAsC39NZj

SuaveSteve 3y ago

There's so many of these "just add water" little "semantic" CSS projects. Going through projects and seeing which are dead is always a chore. Maybe an AI scanning projects for "life" would be helpful?

eternityforest 3y ago
I dug through a ton of these for several days before finally deciding to just make my own... All the lesser known ones tend to not be very extensible or themable beyond basic color changes, and they're a little too extreme about pure semantic HTML. This guy has a really good roundup with last commit and GitHub stars info: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css Currently working on getting some issues with their test case ironed out to get mine (https://eternityforest.github.io/barrel.css/ https://eternityforest.github.io/barrel.css/) included.

Brajeshwar 3y ago

Thanks to Tailwind for, kinda like, standardizing this color variations and hue/saturation thing.

ttfkam 3y ago
I think CSS's standard hsl(…) did most of the heavy lifting here. Tailwind took advantage and set variations to CSS classes. I am coming to prefer lch(…) to any library. It scratches that consistent color itch and has basically universal support now in browsers. Then again, I prefer setting my CSS values through CSS variables rather than setting visual styles in the markup. YMMV
- Leftium 3y ago
  Thanks for teaching me about lch()! It looks like oklch() fixed a problem I noticed with blue-white gradients turning purple~

knowsuchagency 3y ago

picocss is underrated. Combine it with basscss and shoelace components, and you're overpowered without even realizing it.

ttfkam 3y ago
I love PicoCSS as well, only combined with Svelte. My only complaint is that I also like OpenProps, and I truly wish OpenProps and PicoCSS would join forces with a common CSS variable API. It would help to bridge the gap between basic personal project and something noticeably bigger.

nickf 3y ago

Is there anything folks are adding to Pico that adds a nice CSS grid? For dashboards and such.

Leftium 3y ago
PicoCSS provides a minimal responsive layout with `.grid`: https://picocss.com/docs/grid https://picocss.com/docs/grid For for complex grids, PicoCSS suggests complementing with: 1. Flexbox grid layouts (for a quick way to prototype or build a complex layout) - Bootstrap grid, Flexbox Grid 2. OR CSS Grid Generators (for a light and custom grid) - CSS Grid Generator, Layoutit!, Griddy 3. OR just use CSS Grid --- There are links to all the above in the link below: https://picocss.com/docs/grid https://picocss.com/docs/grid