argyleink / argyleink/open-props

Container conditionals and conditional sizes

Open
#446 2 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.