How to control text size in a responsive way

[tobiasBora]

Short version: how can I adapt the size of the text (paragraphs…), if possible in a “responsive” way in a website setup in a UMD/Standalone way.

Hello,

I’m very new to Quasar, and I’ve an issue with the size of the text in a small website project: for example the font size of the title like <h1> is huge (like a quarter of a page), while the paragraph text is very small and hard to read. I’d like to use the in browser UMD/Standalone version, because I may need to share the project with people not familiar with advanced web development (so they won’t know Vue nor Quasar), so I want to keep things simple.

I could setup manually the font-size in CSS I guess, but I’m afraid that the final look won’t be very “responsive”, so I’d like to know if Quasar has built-in solutions for me, or advice on third parties app to use.

Is saw a few issues open on github, with either people saying “Quasar is not bootstrap, it won’t do responsive display” or “Quasar have hardcoded fonts in the widgets so it’s impossible to change it without rewritting the widgets”, and other people saying “I don’t see what’s the issue, this is easy to do”, but without providing any clear solution.

So what is the actual status, and what is the proper way of handling text font-size in Quasar in a responsive way? Is Quasar adapted to responsive websites?

Thanks!

[qyloxe]

@tobiasBora there was this thread - read worthy in whole:

https://forum.quasar-framework.org/topic/3483/fluid-typography-solved

[tobiasBora]

@qyloxe Thanks for your answer. I saw this link but it is quite lengty and I was not seing a clear solution, especially for UMD setups. So if I understand correctly, I’m supposed to use the third party application RFS. But since RFS uses SASS, I don’t have any chance to configure these properties without setting up a full compilation stack and manually compiling the CSS (while I wanted initially a full UMD/Standalone solution), right?

[qyloxe]

@tobiasBora well, you can compile sass to css and include in your umd project easily.

[tobiasBora]

@qyloxe Sure, I just wanted to avoid to add a compilation step for simplicity, but I guess I can live with it. I’ll try RFS and I’ll be back here if I get any issues. Meanwhile, if people have tricks to avoid a local compilation, I’m still interested. Thanks!

[qyloxe]

@tobiasBora said in How to control text size in a responsive way:

@qyloxe Sure, I just wanted to avoid to add a compilation step for simplicity

I’m afraid it is almost impossible to avoid novadays (compile/webpack/bundle/preprocess/and many more possible steps). If it is unavoidable, than we just need to accept it, and use some kind of
intermediate step before deployment and after development and just live with that. The git shared repositories (submodules) are ok for that. I can just use some compilation step for shared modules in UMD projects and put them in separate repository, and use that specific shared repository with compiled code in simple UMD projects.