primefaces/primeflex

[Sizing] Add support for container query length units

ThoSap opened this issue · 3 comments

ThoSap commented

Hi,

it would be awesome if PrimeFlex v4 would add support for the awesome container query length units which is currently already supported by 88% of the browsers used worldwide.
https://caniuse.com/css-container-queries

This is especially useful since with the current PrimeFlex implementation it is not possible to define, for example, 50% height of the container div on the y-axis.
https://primeflex.org/minheight
https://primeflex.org/height
https://primeflex.org/maxheight

The new height CSS classes could be named like this, where the number inside the brackets [] are the 12-grid values that are used mostly throughout PrimeFlex:

// Width
w-[1-12]cqw

// Height
h-[1-12]cqh

The new CSS container query length units cqi, cqb, cqmin, cqmax do not really make sense in the context of width and height, therefore I would omit them.

Example of how Tailwind CSS supports it (I prefer PrimeFlex):
https://github.com/tailwindlabs/tailwindcss/pull/10100/files
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

hi! What's the status on this?

@utillity it was announced somewhere in the PrimeTek GitHub discussions and also in some Reddit post that the PrimeFlex project will be sunset and that a migration tool for Tailwind CSS will be provided.

oh, okay! thanks for the heads-up!