argyleink / argyleink/open-props
Container conditionals and conditional sizes
- Dominant language
- HTML
- Stars
- 5.5k
- Forks
- 216
- PR merge metrics
- No merged PRs in 30d
Description
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:
```css
* {
--size-if-not-full-viewport-width: clamp(0px, calc(100vi - 100%) * 1e5, var(--apply-this-size, 0px));
--size-if-not-full-container-width: clamp(0px, calc(100cqi - 100%) * 1e5, var(--apply-this-size, 0px));
--radius-if-not-full-viewport-width: clamp(0px, calc(100vi - 100%) * 1e5, var(--apply-this-radius, 0px));
--radius-if-not-full-container-width: clamp(0px, calc(100cqi - 100%) * 1e5, var(--apply-this-radius, 0px));
}
.element {
--apply-this-size: var(--size-5);
--apply-this-radius: var(--radius-3);
margin-block: var(--radius-if-not-full-viewport-width);
border-radius: var(--radius-if-not-full-viewport-width);
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue names no source file, test, or entry point. Start by locating the library’s existing radius and size custom properties, then compare the proposed container-query behavior with the linked CodePen. Done would require a decided scope for the addition and verification that the resulting conditionals work as intended.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100