What about the Version 2?

[lucaslarroche]

It might be time to think about version 2, and be able to make deep changes (breaking changes).

Here's what I'm thinking:

• Use @use everywhere in the SCSS files (vs @import),
• Improve accessibility (colors contrast and maybe underline the links),
• Prefix CSS vars to avoid conflicts (--pico-background-color vs --background-color), the prefix would be configurable,
• Import CSS vars only when importing the related component (For example --range-thumb-color should not be present if the range component has not been imported),
• Build a High contrast theme,
• The main CSS file could be the classless version (still not sure),
• Extracts the documentation as a separate repository, 
• Remove the slim version from the main repository to move it in /examples,
• Remove hgroup which is not valid anymore,
• Enforce formatting rules with Prettier or ESLint,
• Move from NPM to Yarn,
• ...

What do you think?
What would you like to see in version 2?

[fkosmala]

I can made some easy tasks like :

• Create Yarn package
• Improve accessibility (with some tools like a11y / webAIM / LightHouse)
• convert @import to @use

And maybe some others if i found time. Do you have another features to add to v2 ?

I'll fork the repo this week to start.

[fkosmala]

Your package.json file is already Yarn compliant (on master & dev branches) :)
Instead of npm, just use yarn add picocss/pico to add Pico inside your project.

Don't forget to remove node_modules folder if you use npm before.

[lucaslarroche]

convert @import to @use

Actually, I already did some tests. I have a branch here:
https://github.com/picocss/pico/tree/ll/sass/import

[pauloxnet]

I really like these features :

• Improve accessibility
• Import CSS only when importing the related component
• Build a High contrast theme
• The main CSS file could be the classless version

Why is that? I use hgroup a lot.

• Remove hgroup which is not valid anymore

What would you like to see in version 2?

• It would be great to have a fixed main navbar to use as top menu in small screen devices.

• it would be possible to implement a css-only dark/light mode switch button ?

Note: I use pico.css as in my website without nay tool like npm, yarn, … so it would be great to let people to continue to use it in this way also in version 2.

[pauloxnet]

I've already understood that from his message. I tried only to say:
"don't forget backend people that are trying to avoid installing frontend stuff (npm, yarn, ...) and want use only a simple css file". 😄

[lucaslarroche]

Absolutely.
Pico should still be usable without a package manager.
That's also why I want to reduce the repository and remove all that is not necessary (The documentation, the examples like the slim version, etc.).

Basically, I would like to have a repository with just the scss/ and css/ folders and the build scripts to compile, autoprefix, and minify the CSS files.

[lucaslarroche]

hgroup is fully supported, but according to the W3C, "it is better to avoid using this tag".
Not sure what to do here.

[abernh]

@pauloxnet I saw Jason Knight advocating to use h1 + an inline small as this makes syntactically way more sense especially when it comes to screen readers.

<h1>
  11 Balloons<br>
  <small>A story in 3 acts</small>
</h1>

He further mocks hgroup to be actually redundant with header (as section header e.g. for article), an element that has been there from the early ages.

<section>
 <header>
  <h2>The man in the red dress</h2>
  <p>Act 1</p>
 </header>
  ...
</section>

So you can drop hgroup and use the hX element only or header instead.

[lucaslarroche]

After much reading and questioning, I finally decided to keep hgroup.
The problem was more with the example using an h1 followed by an h2 than with hgroup tag itself.

See the v2 announcement here:
#355

hgroup documentation:
https://v2.picocss.com/docs/typography#heading-group

[walterdavis]

Yeah, a heading for a heading is pretty semantically odd. If you wanted to segment a heading into a lead in word or two, and a "lesser" portion that acted like a caption to that heading, there are other ways to structure that which might make the meaning clearer. Looking at the example you linked to, I am imagining that this was born out of a desire to use headers as structural tags rather than pure outline elements. Semantically, these are two separate thoughts, but one adds context to the other. <h1>Products</h1> <p>Learn more about everything we make</p> <h2>Hand Tools</h2> <p>Here are all our bench tools: ... ... more H2 and P follow Or, if you wanted to have a style-able break between the parts of a single thought, you might do something like this: <h1> Products <small> for every workshop </small> </h1> ... I may be totally off-base, but that was my reaction to this tag that I honestly have never encountered in the wild before. I'd be interested to hear how you have used it, and how you interpreted its meaning in your work. Walter

…

On Oct 4, 2022, at 7:53 AM, Lucas Larroche ***@***.***> wrote: hgroup is fully supported, but according to the W3C, "it is better to avoid using this tag". Not sure what to do here. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

[fkosmala]

The <hgroup> tag is excluded from the HTML5 specification (W3C), but it is supported in the WHATWG version. The future of the element has not yet been determined, so it is best not to use it.

[pauloxnet]

Sorry for asking but do you have an URL of the HTML5 specification your are referring ?

I've only found this:
https://www.w3.org/TR/2011/WD-html5-20110405/sections.html#the-hgroup-element

[fkosmala]

I found https://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html or something non-official like http://html5doctor.com/the-hgroup-element/ but i don't find anything else.

Also, in some frameworks, hgroup is not a known element.

[pauloxnet]

It therefore seems to me that hgroup is not officially deprecated, but there are only 10-year old discussions in which someone proposes to deprecate it but then they remained there. In light of this I would not remove hgroup from picocss.

[lucaslarroche]

See this comment:
#246 (reply in thread)

[pauloxnet]

* Improve accessibility (colors contrast and maybe underline the links),

To increase the contrast of the text on my site I had to customize the main colors differently on the dark and the light theme.

Using only one main color the contrast was worse on the dark theme and better on the light theme or vice versa.

[lucaslarroche]

ℹ️ I opened a new branch v2 and a project (v2.0.0.

[pauloxnet]

Thanks for sharing.
Have you seen the feather icon fork ?
Maybe it's something to consider for Pico 2
https://github.com/lucide-icons/lucide

[lucaslarroche]

Pico doesn't need a lot of icons, so we're probably fine with feather, but I'll take a look.

Note, 2 ideas I have for icons:

• As for CSS vars, import the icons in the CSS file only when importing the related component,
• Auto "escape" SVGs (example)

[pauloxnet]

I agree we don't need a lot of icon, I proposed Lucide only because it's a more active fork and maintained

[theetrain]

I appreciate all the positive discourse around colour contrast. It's very important to also consider:

• Contrast between an interactive element's default state and :hover state; and default state and :focus-visible state. Use of borders is helpful here.
• Text colour against background colour.
• All links should be underlined.

Changing designs that are low contrast to high contrast should not be regarded as a "breaking change"—it's a patch. Low-contrast elements should be considered as a bug, and adding high contrast to them is a fix. 😃

[lucaslarroche]

Changing designs that are low contrast to high contrast should not be regarded as a "breaking change"—it's a patch. Low-contrast elements should be considered as a bug, and adding high contrast to them is a fix. 😃

You are right 🙂

As it is necessary to add new CSS variables, it will be a breaking change in any case. It's not exactly only colors.
Examples: differentiate the primary color contrast for the button and links, separate the underline color for links, etc.

It's currently in progress..
All the colors will pass AA, and most of the colors will pass AAA.

Contrast between an interactive element's default state and :hover state; and default state and :focus-visible state. Use of borders is helpful here.

:hover will be at least AA, and :focus are improved.

Text colour against background colour.

100%

All links should be underlined.

They will be.

[abernh]

Use rem instead of px for layout grids, typo and even breakpoints for better a11y.
Using rem keeps the layout relative to the over all look-and-feel/font sizes even if the user has a different base fontsize set, e.g. 20px instead of the default 16px.
The same goes for zooming in/out of the layout - much nicer with a rem grid than a px one.

[abernh]

Fluid grid and font-sizes would be even better. See https://utopia.fyi/ for some generated base-CSS that could then be hooked in.

[matthewblott]

Was this incorporated in version 2.0? I can see a 'fluid' option on the version picker website but when I inspect the CSS it doesn't look like what's generated using utopia.fyi. Am I missing something or is there some work to do here?

[bytesource]

Hi,

As an idea for the documentation, I'd love to have a section with some very common, but more complex components built with PicoCSS, such as a hero section with image or an icon box.

Additional CSS that might be needed could be shown alongside the components to point out how little is needed to build these essential components.

[weepy]

It would be lovely to have some more examples of how theming can look . DaisyUI makes a good example of this. A bit of extra work for sure, but I think it would improve adoption.

[bytesource]

That would be even better!

Most of the other CSS frameworks, especially the minimal ones, only show the elements.

So, a theme or fully designed page would make PicoCSS stand out among other frameworks. It's a lot to ask for, but I think it's worth it.

[fkosmala]

Please create an "Admin template"!
I try to create one for my project but I'm not a designer and mine is "some-kind-of-ugly" 🤣

[wyot1]

Thanks for making me aware of daisy. I'd rather just slap in pico and be done, but daisy might be helpful for those who need a little more. Looks super polished.

[abernh]

Have a look at the "free" layout parts of the https://every-layout.dev/ collection:

• stack
• sidebar
• cover

They use some clever CSS techniques to make layout effortless and easy adjustable and might be a great place to start from for a V2.

[lucaslarroche]

The first alpha version for Pico 2 is here.

[vigneshksaithal]

Why the buttons are more like old Bootstrap buttons? I think the buttons without outline ring was only good. It feels more native. Just a suggestion. 😀 Because I loved Pico CSS because of its native feel.

[sysmat]

• In "@picocss/pico": "2.0.0-alpha1", with sass how do you change primary color?
• in v1 this work

$primary-500: #E65A00;
$primary-600: #C54100;
$primary-700: #A52D00;

// Import full Pico source code
@import "./node_modules/@picocss/pico/scss/pico.scss";

• in v2 this work not work

$primary-500: #E65A00;
$primary-600: #C54100;
$primary-700: #A52D00;

// Import full Pico source code
@use "./node_modules/@picocss/pico/scss/pico.scss";

[wyot1]

It's rather disparaging to assume others are incapable of basic deduction. After I pointed out the change, it's clear. Grep for emoji:, then var-prefix:, or simply check the aptly named settings file. Unless the guy turns out to be a beginner, no need to preemptively baby him.

Emojis are usually banned for a multitude of reasons, it's not 'emotional'. One cannot type them, forcing you to keep a buffer of random symbols. They lack semantic value. One cannot spell them. They can often not be rendered at all, leaving you with indistinguishable blocks ¹. Depending on project size, and repetitions, their bloat factor might be more than trivial. Etc pp. They're usually a good indicator of maturity.

Footnotes

1. Examples on my system: ↩

[abernh]

Then why not writing that? That's some valid and important criticism.

Instead you were making a passive aggressive stance about "vomited emojis" and how you hate them.

[wyot1]

Tongue-in-cheek. Might even be a joke by the pico author for the alpha. Like playing with brainfuck. (Very nice visualizer, completely silly, but funny.)

Vomited = dumped in great amounts.

[abernh]

I'm starting to warm up to you ;)

[lucaslarroche]

It was mostly a way to have a shorter code.
But I agree, it might be better to use #{$prefix} rather than #{$✨}.
I might change it before the official release.

[wyot1]

Making the nav responsive would be nice. I assumed everything is. (Esp. nice for classless users who use it as is.)

A sort of whitespace var for more compact sites could be useful. (Defaults are rather generous.)

[rognoni]

For my project I am looking for a recursive Accordions (a tree)

[frednice]

Could you please explain how you make the side navbar you did on the doc section ?
It is not documented 🙁

[dev-willis]

Looking at dev tools, it appears to be a grid layout with a <nav> element whose position is set to sticky and whose children are all accordions (<details> elements). Everything there is documented.

[romanzy313]

I absolutely love v2, its much more feature rich and customizable but is still very minimal.

The only issue I have is with the dropdown. Using details + summary + ul isvery non-standard, as it cant be used in html forms. I would like to use this custom "dropdown" style for a form compatible select. Would it be possible to define a dropdown like this?

<select class="dropdown" required>
  <option selected disabled value="">Select</option>
  <option>Solid</option>
  <option>Liquid</option>
  <option>Gas</option>
  <option>Plasma</option>false
</select>

Also, I think it would be nice to have an easy utility class library to use with pico. Right now I import the one from bootstrap, but the spacings are defined differently. Maybe a standalone companion library to pico with same spacings and consistent configuration options such as $enable-responsive-spacings, $enable-responsive-typography, and $breakpoints. I'd like to implement it by hard-forking some existing utility class lib. Is it worth a try?

[ethanpil]

@lucaslarroche is this project abandoned?

[ivoba]

What about dropping the classless approach?
I found it a bit confusing and it does not really offer a lot of gains.

It basically strips out some features like grid, dropdown and some classes like .secondary etc.
If you dont want to use them, just don't add the classes to your HTML.
So Pico is already pretty much classless for most parts, which is great.

If it is about saving some KBs you are probably better off with making use of the new modular approach and compile your own Pico and omit the stuff you don't need.