REM Support for responsive layouts

Hello,
I wanted to open this topic like this, publicly, instead of sending feedback via the form, as I also want to understand, how many people even use REMs as their unit of choice.

I usually use REMs for everything, as it allows me to make apps, that look almost the same on each device, I can control this by changing the root base size.

Does anyone miss REMs as much as I do?
I know you can bind the " … rem" string, but that’s a fairly tidious process, so how’s yall coping with responsiveness overall?

2 Likes

We have added rem for text size, margin and padding. Are there other places when you wish to have it? It’s often just a matter of configuration on our side, so please let us know :slight_smile:

2 Likes

Hey @aurelie, lovely to hear from you, hopefully you’re doing well. Actually, I’d like to use REMs everywhere :smiley: I like to use them with widths, and heights, this way, when I detect with CSS a change in screen size (e.g. bigger or smaller notebooks - laptops, monitors), I adjust the root font size, and it actually becomes the same as I want it, with very slight variations.

So far I missed it in

  • icon sizes
  • width/height

I see you added it to paddings recently, or i just didnt notice :smiley:

And it would be amazing, if these would be bindable, as you can do this in CSS breakpoints with either justify-content, or align-items

Screenshot 2023-10-30 at 11.05.45

I’ll add some if I find any more.

Plus one to REMs and I’d also like to be able to bind padding/margins individually (e.g. only bind the left padding instead of binding all padding and creating the ‘0 0 0 3rem’ format myself

1 Like

@Broberto is there currently a way to change the root font size?

I managed to so this with custom html and a style tag. Forcing it is no good, but yeah, I do it anyway.

Based on this, do you have any eta in mind @aurelie when this slight change could be implemented? Atleast for the width, height and icon sizes.

Hey,
this kind of tickets are usually treated on a special day we have each week for bugs and minor features. This week is a bit particular due to holidays, but maybe the best is to open a ticket so that you can receive update about it :)?

I will do so then :slight_smile: Thanks!

Hello @aurelie I wasn’t able to get to get a sort of channel to be able to follow the progress, as it seems you don’t have anything of that sort.

What I would like to add to this discussion, an actual thing in the new WeWeb era of components, it would be awesome if we could bind the flex layout also, horizontal (row) or vertical (column), this would open more possibilities and give more power to the variables within the components.

Especially for gaps/direction, I got stuck like three times within the last hour of tinkering with components actually :slight_smile:

Hey !
I think for a moment we had dynamic change based on these value which made it impossible to have it dynamic, but that’s not the case anymore.
I have put a feature request for this :slight_smile:

1 Like

Lovely news! Thank you :slight_smile:

Any chance REMs will be supported in the the following properties?

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

In the meantime, you can always bind to a static string with the value you need, like “10rem” if needed

1 Like