Pico 2 ✨

[lucaslarroche]

The first alpha version for Pico 2 is here: v2.0.0-alpha1!

This version significantly improves the look and feel, accessibility, and customization options. Pico v2 features a new color palette with 380 manually crafted colors, new breakpoints, and a new group component for stacking form elements and buttons horizontally.

Here are all the links to discover Pico 2 alpha1:

• Online documentation
• NPM pre-release
• GitHub pre-release
• Website code
• v2 branch

Feel free to comment here, or to open PRs again v2 or the documentation.

😎 New look and feel

All colors have been carefully and manually redefined for a more contrasted, neutral (less bluish) look and feel.

The default color theme is much more accessible, with most colors now following the WCAG 2.1 AAA standard. Some secondary muted colors follow the WCAG 2.1 AA standard.

Focus states have been improved for more consistency and contrast.

🛠️ Easier customization

We have refactored all .scss files to make it easier for you to compile your own version of Pico with SASS. All modules can now be enabled or disabled using @use and vars.

🎨 Color palette

Pico v2 comes with 380 manually crafted colors to help you personalize your brand design system. The colors can be imported into any .scssfile, and a new stylesheet with all the color utilities is provided.

📐 Better breakpoints

We have updated the breakpoints to follow the width of standard devices and added a new breakpoint for larger screens.

🧩 New group component

With group (role="group"), you can now stack forms elements and buttons horizontally.

💥 Breaking changes

CSS Vars

All CSS custom properties are prefixed with pico-to avoid collisions with other CSS frameworks or your own vars. We also added new CSS variables and renamed some to follow a consistent pattern{component}-{state}-{property}.

SCSS files

We renamed and moved many .scss files. If you import Pico modules, you need to update your paths.

Buttons

Buttons are not width: 100%; by default anymore. Only form buttons are full-width to be consistent with other form elements.

Table

The .striped class is now used for the striped table's style.

Dropdowns

While accordions are still classless, dropdowns now use.dropdown. We also removed the experimental syntax that allowed dropdowns in the nav using nested lists.

Grid

Grid columns now collapse on small devices (<768px).

[lucaslarroche]

In the following weeks, I will work on the examples:

• HTML Preview
• Classless HTML Preview
• React
• Svelte
• Gatsby
• Next

[micene09]

what about Vue/Nuxt?

[bozzhik]

what about Astro?
https://astro.build/

[peteringram0]

@lucaslarroche Is V2 still on the way at all?

[lucaslarroche]

Yes. I find it difficult to find time for my work.
The library shouldn't change too much.
I still have to build the examples and the homepage.

[ralacerda]

Oh, that is a really nice release.
I was wondering if you are planning on using :focus-visible instead of :focus in clickable elements. It prevents buttons and anchors tags to keep the focus state after being clicked on, but It's not supported on IE.

I'll probably keep a fork with that change anyway since I don't plan on supporting IE.

[jeffschwartz]

This release looks to be a real step up and thank you for this amazing library. Can you provide a timeline for its release?

[jeffschwartz]

BTW have you considered adding tabs as a component to v2? An example can be found here https://erikpoehler.com/2022/12/15/picocss-content-tabs/. It would make a great addition to Pico's components.

[asbjornu]

The project seems to accept pull requests, so I suppose it's just to submit one?

[brentarias]

I would love to see a responsive hamburger menu. Indeed I made a hamburger menu for PicoCSS v1 you could reference.

[brentarias]

Also, this might be too "radical" for inclusion in PicoCSS...though have you seen this cool "re-working" of the idea of "containers"? I was rather impressed.

[micene09]

Hey @lucaslarroche, what a great job you did with this v2 release...I love it, simply amazing!
It's been a while since the last commit and I hope you are fine.
In the meanwhile, looking at the v2 branch, the issues (not so many and not all real issues) and the Projects board, it's not clear to me what do you need to stabilize the v2, I would like to help you somehow.

[Shreyans13]

Hey @lucaslarroche
This release looks really good.....liked a lot of features was planning to use in my project ......when can we see a released version for this ?

[xpiu]

I'm enjoying Pico v1 classless <3
Minor comment for v2: I would like a little extra info on the differences between pico.classless.scss and pico.fluid.classless.scss Perhaps there's some place for it in the Readme file.
Great work guys.

[peterbe]

Gongrats on the launch! It looks great. I'm putting 2.0 into https://www.peterbe.com as we speak.