html tag's font-size

[asantech]

Hi, how are you? Thank you guys for making & developing such a great project.

RWD: Responsive Web Design
framework: Fomantic-UI

Usually when creating a web-app by using Fomantic-UI, not all parts of the web-app can be coded with Fomantic-UI, some parts will be written with our own web-app's custom CSS.

My GOAL (when using Fomantic-UI):

To use as much of the framwork's CSS as I can, but in some sections it is not possible (ex. The grid is not efficient to be used in very small grid's because of the paddings).

My BELIEF:

That we programmers should not use inline CSS code to change the Fomantic-UI's CSS, to make it custom (wrong approach in my opinion), instead in such sections if we write our own custom CSS code, it will be more efficient (because even the best libraries like Fomantic-UI has it's own limits).

In changing the website elements' CSS properties in smaller screen I know 3 ways:

1. Give all elements' CSS properties "px" units and change each property in the media queries (too much code in the media queries!)(wrong approach).

2. Give all elements' CSS properties "em" units, which their parent's font-size are set according to the "html" tag, and only change the HTML tag's font-size in the media-queries (only one line of CSS code in each media query but the heavy usage of em (in the main CSS which is outside(before) of the media queries scopes) may sometimes make it complicated to track CSS property values & their changes in RWD).

3. Give all elements' CSS properties "rem" units, and change the "html" tag's font-size only in the media-queries (only one line of CSS code in each media query)(the least code in the media queries and easy to track CSS property values & their changes in RWD).

Note: There are definitely more approaches that I do not know.

I like using the 3rd approach, the web-app that i am working has many sections that doesnt use Fomantic-UI, and in the media queries these sections are made responsive by using rem according to the "html" tag's font-size.

As you know, many programmers change the"html" tag's default font-size (16px) to 10px, so that they can easily calculate the rem of each element's CSS property.

My PROBLEMS (ISSUES):

I have changed the "html" tag's font-size to smaller values (smaller than 14px) in the media queries, so that all the elements in the webpage changes to smaller sizes, so that i wont write much media-query code. but the problem that i have with Fomantic-UI is it's "html" tag's default 14px value, which makes rem calculation hard for me.
The other issue (problem) here is that if we change the "html" tag to 10px (in my CSS file), all the Fomantic-UI modules & component sizes change to smaller sizes, which i have to overwrite them unwillingly (which is a wrong approach) and even many of Fomantic-UI CSS standards which are relative will loose their standard sizes, like the "small" and "big" CSS class.

My QUESTIONS:

1. Is it ok to change (overwrite) the "html" tag's font-size to 10px, and rewrite all the Fomantic-UI's modules & elements font-sizes? so that that our custom CSS properties rem sizes can be calculated easily.
2. If use a couple of selected components & modules in our project (not the entire Fomantic-UI) is it ok not to use the "site" component and change the HTML tag font-size to 10px?
3. Why you have chosen 14px as "html" tag's default value and not 10px? so that programmers can do the calculations more easily? is there a specific reason (event that you haven't used the browser's default 16px size)?
4. Should we always use the site component? or we can not include it and give Fomantic-UI modules & component's our own custom size?
5. Even if we use the "html" tag's 14px size and do all the hard rem calculations for the elements, is it ok to change the "html" tag's size in smaller media queries for tablet & mobile so that all Fomantic-UI elements turn to smaller size? because the fomantic elements & modules don't have responsive design in small screens and i dont want to use javascript for RWD (to change for example small, medium and etc classes). Only CSS.
6. In your own opinion as the Fomantic-UI developer, what CSS structure (RWD approaches) are the best for such websites that use both Fomantic-UI and custom CSS in their web-apps.

THANK YOU SINCERELY.

[lubber-de]

I think most of your questions can be answered the same:

You can change the value for @fontSize in site.variables and recompile FUI. All calculations for all components will be done automatically, you dont need to do that on your own 🙂

For a general responsive website you should check to use the following meta tag in your html <head> section

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

This almost always reduces the need of manual change of font fizes

Why you have chosen 14px as "html" tag's default value and not 10px? so that programmers can do the calculations more easily? is there a specific reason (event that you haven't used the browser's default 16px size)?

That was a decision of the original author of SUI. When compiling Fomantic-UI on your own you don't need manual calculations.
Only adjust the above mentioned @fontSize variable and recompile FUI

Should we always use the site component?

No, if you don't need/want to

ex. The grid is not efficient to be used in very small grid's because of the paddings

Did you know you can remove/reduce the paddings by compact grid or very compact grid ?

https://fomantic-ui.com/collections/grid.html#compact

[asantech]

Thank you so much for answering
do you mean that i change the 'site' component's font-size manually? so if i change the @fontsize for example to 10px, then all the rem's would be calculated according to html tag's 10px? and is there any reference to this issue in the Fomantic-UI website?
and if i do so, wouldn't that conflict the new Fomantic-UI update (because the @fontsize will be replaced with the newer versions value), and the previous problems will arise

[lubber-de]

To have all the rem/em calculations in other components you should adjust @emSize accordingly
if you want to do changes but be aware of updates (not overwriting your settings), create a separate theme folder and an own site.variables file where only your changes are applied
More information here https://fomantic-ui.com/usage/theming.html#theme-files

[asantech]

thank you sir very much, i promise this my last question on this subject, because i know you don't have much time,so with this feature it is wrong to do all the rem calculation based on html tag's 14px size, because according to your answers we can change the entire system to fit our own custom css. am i right? because my boss kept on saying (believes) that i only should use the html 14px size as the root size and do all those time consuming and confusing and unmaintainable calculations. i am asking this to show your answer (on this matter) to my boss to convince him that that was the wrong way.
to thank you for your support and to show you my gratitude for giving your time, i will make many youtube videos in near future about the usage of fomantic-ui to make it more known worldwide

[lubber-de]

Take a look at the defaults site.variables file. Lots of dependencies to the @emSize value (which is 14px just as the @fontsize variable (which is only used for the body)
All font-sizes are bound to variables
Example:

For example:

@menuHeaderFontSize: @relative11px;

whereas in site.variables it's declared as

@relative11px : unit( (11 / @emSize), em);

[asantech]

thanks sir