Re: [community-group] How to deal with "fluid" dimensions (#188)

What @ilikescience wrote above is too specific to CSS, I am suggesting just the essential min and max values:

```json
{
    "type-size-large-fluid-min": {
        "$type": "dimension",
        "$value": "2rem",
    },
    "type-size-large-fluid-max": {
        "$type": "dimension",
        "$value": "4rem",
    },
}
```

Web devs decide what they want to do with those min and max tokens:

```css
h1 {
    font-size: clamp(
        var(--type-size-large-fluid-min),
        var(--type-size-large-fluid-min) * 0.9 + 0.25vw, /* This formula would be situational and completely up to the author. */
        var(--type-size-large-fluid-max)
    );
}
```

The formula is the _trick_ part, the concept of min and max is not a trick, and eventually iOS and Android would come up with their own fluid method (with their split screen and overlay features becoming more mainstream). The min and max would be applicable on all platforms by then.

> Yes, but still even if someone design a website in browser he's creating these average imaginary mobile, tablet and desktop breakpoints, because design for desktops wouldn't work on mobiles — different space, different layouts.

@PavelLaptev I beg to differ on this. Fluid design would produce different layouts just as breakpoint design can, but fluid would account for every viewport, not just specific breakpoints. Someone designing in the browser nowadays has the technologies to do so, modern CSS is very powerful. By removing hundreds of lines of breakpoint media queries, a website would have much greater performance.

-- 
GitHub Notification of comment by mikemai2awesome
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/188#issuecomment-1335476072 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 2 December 2022 16:06:49 UTC