37 ms·

>I don't know how useful this is. >setting breakpoints allows some sanity in the build and testing process clamp allows for sane responsiveness https://devel

>I don't know how useful this is. >setting breakpoints allows some sanity in the build and testing process clamp allows for sane responsiveness https://developer.mozilla.org/en-US/docs/Web/CSS/clamp https://developer.mozilla.org/en-US/docs/Web/CSS/clamp and if needed you can add some minimal breakpoints. The fact is that most front end devs don't know about it, and there is no framework that I know of which is based around its use (and everything nowadays seems to be about the frameworks), thus you end up with inefficient multiple breakpoints which may seem sane until you get too close to one of the breakpoints and your design looks like crap until that point is hit and you can switch to the new values set for the breakpoint. breakpoints are a great solution if you happen to be living and working in the web of 3 years ago. But the clamp, min, and max functions have been available in every major browser since 2020 - even Opera. People keep telling me 3 years is an eternity in internet time, so why are there still all these damn breakpoints?

throwaway14356 3y ago
it seems much cleaner to give each size its own css?
5350-uiop-1130 3y ago
> why are there still all these damn breakpoints they're simple, easy to understand and well tested. looking at clamp it smells of over engineered complexity. 3 arguments. difficult to visualise. margin, padding, box sizing, line-breaks, non-breaking spaces that can all impact how text flows and wraps - clamp is stacking on top. most css is written, forgotten and ime never refactored. so what's fast and dirty often is good enough, within reason.
- bryanrasmussen 3y ago
  >looking at clamp it smells of over engineered complexity. 3 arguments. difficult to visualise. although you can use clamp to do complicated things that are difficult to understand, as is the case with all technology the simplest way to use it is quite clear. (static minimum size you want for something, percentage of something, static maximum size you want for something) thus width: clamp(100px, 80vw, 750px) and now someone says well why wouldn't you just do min width max width etc. with that - no reason it's just nicer to have it one line to see IMO. But of course you can put clamp anywhere you can calculate anything so. margin-left: clamp(20px, 5vw, 50px) OR margin-right: clamp(var(--minmarg),var(--margpercent), var(--maxmarg)) then you change your minmarg, margpercent, maxmarg as needed by normal css variable rules. This should be an easy to understand system for a developer. It is easy enough for me to understand and visualize, and I suck at visualization. This allows one to finally get rid of most breakpoints and say not just what the min and max heights and widths are of things but what the min and max and preferred margins, paddings, font-sizes etc. are of things - which without that IMO the max height and max width is just sort of stupid. But with that you can make designs flow and look good in a manner that can actually be described as 'responsive' Now as I said - one can do all sorts of complicated and clever stuff on top of this sure. And if people do that they might end up with something that is difficult to reason about. But if people can't reason about the margin example above then I think they should probably switch from Frontend development. on edit: grammar change.
  - deleted 3y ago
    [deleted]

throwaway14356 3y ago

it seems much cleaner to give each size its own css?

5350-uiop-1130 3y ago

> why are there still all these damn breakpoints they're simple, easy to understand and well tested. looking at clamp it smells of over engineered complexity. 3 arguments. difficult to visualise. margin, padding, box sizing, line-breaks, non-breaking spaces that can all impact how text flows and wraps - clamp is stacking on top. most css is written, forgotten and ime never refactored. so what's fast and dirty often is good enough, within reason.

bryanrasmussen 3y ago
>looking at clamp it smells of over engineered complexity. 3 arguments. difficult to visualise. although you can use clamp to do complicated things that are difficult to understand, as is the case with all technology the simplest way to use it is quite clear. (static minimum size you want for something, percentage of something, static maximum size you want for something) thus width: clamp(100px, 80vw, 750px) and now someone says well why wouldn't you just do min width max width etc. with that - no reason it's just nicer to have it one line to see IMO. But of course you can put clamp anywhere you can calculate anything so. margin-left: clamp(20px, 5vw, 50px) OR margin-right: clamp(var(--minmarg),var(--margpercent), var(--maxmarg)) then you change your minmarg, margpercent, maxmarg as needed by normal css variable rules. This should be an easy to understand system for a developer. It is easy enough for me to understand and visualize, and I suck at visualization. This allows one to finally get rid of most breakpoints and say not just what the min and max heights and widths are of things but what the min and max and preferred margins, paddings, font-sizes etc. are of things - which without that IMO the max height and max width is just sort of stupid. But with that you can make designs flow and look good in a manner that can actually be described as 'responsive' Now as I said - one can do all sorts of complicated and clever stuff on top of this sure. And if people do that they might end up with something that is difficult to reason about. But if people can't reason about the margin example above then I think they should probably switch from Frontend development. on edit: grammar change.
- deleted 3y ago
  [deleted]