New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Container conditionals and conditional sizes #446
Comments
nice, these are very cool, would fit nicely in here! thanks for sharing 🙂 here's what we have today :where(html) {
--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
} my gut is thinking it'd be simpler (but obviously more KBs) to premake conditional sizes in addition to radii, then also add :where(html) {
/* new name and is now logical */
--radius-vi-conditional-1: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-1));
--radius-vi-conditional-2: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-2));
--radius-vi-conditional-3: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-3));
--radius-vi-conditional-4: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-4));
--radius-vi-conditional-5: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-5));
--radius-vi-conditional-6: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-6));
/* new set, container radii */
--radius-cqi-conditional-1: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-1));
--radius-cqi-conditional-2: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-2));
--radius-cqi-conditional-3: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-3));
--radius-cqi-conditional-4: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-4));
--radius-cqi-conditional-5: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-5));
--radius-cqi-conditional-6: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-6));
/* new set, viewport conditional sizes */
--size-vi-conditional-1: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-1));
--size-vi-conditional-2: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-2));
--size-vi-conditional-3: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-3));
--size-vi-conditional-4: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-4));
--size-vi-conditional-5: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-5));
--size-vi-conditional-6: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-6));
/* ... 15 etc */
/* new set, container conditional sizes */
--size-cqi-conditional-1: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-1));
--size-cqi-conditional-2: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-2));
--size-cqi-conditional-3: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-3));
--size-cqi-conditional-4: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-4));
--size-cqi-conditional-5: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-5));
--size-cqi-conditional-6: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-6));
/* ... 15 etc */
} during this addition lets def update to logical viewport units 👍🏻 good call there. thoughts? I'm also working on Open Props v2, and there's a utilities stylesheet, and i think these would fit right into there and be a bit more dynamic (like you show, we can pass props as params and put all these props on |
UPDATE |
Hi,
For my personal use, I have extended the radius conditional smart use of clamp() to container queries. This is pretty straightforward swapping viewport units to cqi.
I have also extended this to conditional sizes, mainly for using them with margin-block.
This way, my sections, cards, etc. have no radius, and touch each other when full width, but get both a radius and vertical spacing when not full width.
Here is what it looks like: https://codepen.io/cbontems/pen/poGYjGK
Would this be an interesting addition to the library?
I am trying to figure if something more generic like this could avoid creating a bunch of combinations:
The text was updated successfully, but these errors were encountered: