[Solved] [FR] Make remBase a config setting

[Klenkes]

I would kindly ask you @bernhard to consider making the setting for remBase a config setting.

Background:
Not all people use a framework like Uikit for their frontend output when it comes to CSS.
I adopted a best practice from Css-Tricks(RIP 😢) a few years ago and still roll with it. Font-sizes are easier to spot

You note in your CSS:

html {font-size: 62.5%;}/* set scale for the document */
body {font-size:1.6rem;} /* this makes 1.6rem 16px, 2rem 20px, and so on... rem sizes are easier to read that way */

But... that doesn't play well with the fixed setting in RockFrontend.module.php (line 165) $this->remBase = 16; // default base for px-->rem conversion
When working with rfGrow all values are now way to small, like 80px are calculated as 50px...
In order for me to work I had to edit the value to 10.

What do you think?

[bernhard]

Hey @Klenkes sure, I can make everything configurable that needs to be configurable 🙂 Could you please explain the issue in detail so that I better understand? Could you please provide a step by step example?

[Klenkes]

2 hours ago, bernhard said:

Could you please explain the issue in detail so that I better understand? Could you please provide a step by step example?

Mhh... I'm not sure I can, and step by step, oh my god...

It's just that RockFrondend assumes sizing by a value of 16. Why?
In my case it would be 10. I don't want to adjust all my CSS I worked out for years.

I have to think about it...

[bernhard]

@Klenkes I don't know a lot about this topic, so it would help if you explain the problem, so that I can understand it and then provide a solution. I don't know why it is 16 but that seems to be some kind of standard? For example https://www.rietsch-design.de/pixel-in-rem-konvertieren-tabelle.html

5 hours ago, Klenkes said:

You note in your CSS:

html {font-size: 62.5%;}/* set scale for the document */
body {font-size:1.6rem;} /* this makes 1.6rem 16px, 2rem 20px, and so on... rem sizes are easier to read that way */

I can't find that code snippet in my codebase. Where is that?

[Klenkes]

9 minutes ago, bernhard said:

I can't find that code snippet in my codebase. Where is that?

That's my point! You won't find that in your code base, but in mine, and others.
Bit of background here

I just don't think it's a good idea to assume a certain workflow. This is why I asked for a setting. It could be 16 by default for most people, or be as a $config->remBase = 'value'; setting.

[Stefanowitsch]

18 hours ago, bernhard said:

@Klenkes I don't know a lot about this topic, so it would help if you explain the problem, so that I can understand it and then provide a solution. I don't know why it is 16 but that seems to be some kind of standard? For example https://www.rietsch-design.de/pixel-in-rem-konvertieren-tabelle.html

I can't find that code snippet in my codebase. Where is that?

I know this code snippet that @Klenkes showed and was using it in some projects, too. 

In the past I found the reason for this on css-tricks.com, or here: https://snook.ca/archives/html_and_css/font-size-with-rem

html {font-size: 62.5%;}/* set scale for the document */
body {font-size:1.6rem;} /* this makes 1.6rem 16px, 2rem 20px, and so on... rem sizes are easier to read that way */

The background is that if you use the markup above you don't need some weird "px to rem calculations" in the frontend. If you want to have a headline that is like 38px in your layout file (photoshop or XD, or whatever) you always had to calculate the REM value for the font size.

For example: 38px would be 2.375rem in your stylesheet. That is hard to keep in mind and by just looking at it you get confused.

font-size: 38px;
font-size: 2.375rem;

With the CSS markup above - 38px would be written as "3.8rem" which is far more straight-forward.

font-size: 3.8rem;

But you have to keep in mind that the base font size has to be changed to make this work. So the base font size hat is used by RockFrontend (16px I assume) does not work anymore for this kind of workflow.

So I too would recommend to make the font base size a variable to make easy adjustments. 16 should be the standard value, though.

 

[bernhard]

20 hours ago, Klenkes said:

That's my point! You won't find that in your code base, but in mine, and others.

Ok now I understand what you were saying.

On 11/19/2023 at 11:18 AM, Klenkes said:

You note in your CSS:

html {font-size: 62.5%;}/* set scale for the document */
body {font-size:1.6rem;} /* this makes 1.6rem 16px, 2rem 20px, and so on... rem sizes are easier to read that way */

But... that doesn't play well with the fixed setting in RockFrontend.module.php (line 165)

That meant to me:

Du verwendest den folgenden Code in deinem CSS und das funktioniert nicht mit RockFrontend:165

So I thought I was using something in a wrong way. That 62.5% were looking familiar to me, so I thought I was using it somewhere. Turns out that I knew it from the time when I implemented that feature. It was a solution that I did not like and that's why I came up with my own solution.

20 hours ago, Klenkes said:

I just don't think it's a good idea to assume a certain workflow. This is why I asked for a setting. It could be 16 by default for most people, or be as a $config->remBase = 'value'; setting.

Absolutely. It's no problem to make things configurable, but I need to understand the problem and the solution before I push code to my module. That's why I was asking for examples...

I've just pushed an update to the DEV branch to make that setting configurable. Let me know if that works for you:

[Klenkes]

Sorry @bernhard that I wasn't very clear in my explanations. @Stefanowitsch did a better job!

I will check, although I had surgery on my left hand yesterday(not fun) and I am still on painkillers(still not fun) and the blood bottle and tube is hindering everything 😢(no fun at all)