fluid typography - SOLVED

Chinook Digital

The Typography in Quasar is an issue. It is a problem that it is hardcoded so it can’t be changed. What compounds the issue is it was hardcoded with no modern standards. No fluid formula, no REM, no Percentage. The typography limiting harms internationalization, Viewport issues with small devices etc. To load a presentable mobile page you are forced to use h4 which severely harms SEO.

I was going to dance around to be politically correct but this single issue has forced me reassess Quasars ability to Serve my front end. I am so disenchanted I feel like I am forced to look at other front ends… Specifically Vuetify. I don’t know why there is reluctance but this issue has and will continue to drive prospective development companies away from the product. The ramifications of this single development decision will continue to grow exponentially.

Other than this single issue developing in Quasar has been top notch.

s.molinari

@Chinook-Digital - What do you mean by hardcoded? There are a number of css variables for the typography.

Scott

Chinook Digital

@s-molinari I am going to eat some crow here but that is fine. I was trying to make some css modifications to the typography and they didn’t take. I read the accompanying documents on typography and read a post inferring the Typography was coming in via a cdn … and Now I can see that I am wrong. So I will eat some crow … well a bat

str

Quasar is getting more and more traction, which is awesome. The main reason is that one has a lot of things pre-build to quickly release web, ios, and android apps. Fonts is not part of the pre-build features. One has to spend hours with testing, failing and testing again. So one ends removing a lot of custom rules and just switch to h4 instead of h1s, h5 instead of h2, which is a patch, not a real solution.

One is used to just drop bootstrap in a project and forget about fonts, typography, spaces, margins and paddings.

I understand “one can always replace the variabes/overwrite font-sizes”, but for an MVP or a prototype, one is more focused in the functionality and business logic, and want to push the optimizations/personalizations at end. On the other hand, the stake holders don’t pay any attention to the MVP or prototype, because the blog post title H1 uses more than half the screen.

This is not a small issue, nor is it “SOLVED”

s.molinari

@str - I’m not certain what your problem is. You can set up the heading sizes and font weights as you please. Set them up once and use the same scss or sass or styl file for any other project with Quasar.

Scott

Synaptrix

@qyloxe , I am new to Quasar but love B4/B5. I’m trying to follow your instructions to make font size responsive but I’m not having any luck. Is the following still the right way to enable this behavior? I’ve done this but the behavior isn’t changing. I’ve tried adding https://github.com/twbs/bootstrap/blob/main/scss/vendor/_rfs.scss to my app.scss file as well but…nothing.

npm install rfs --install

and in their app.styl code:

@import "../../node_modules/rfs/scss";

qyloxe

@Synaptrix didn’t check that lately, maybe someone with current experience will answer.

Definitely those are two questions:

are those css classes loaded/bundled properly?
are they taking any effect on Quasar elements?

no 1 could be verified by checking the generated code
no 2 could be checked by using developer tools.

There’s always option with !important, but let’s not go this way as of now.

Synaptrix

@qyloxe It doesn’t look like the styles are being applied, but I could be misreading this: https://www.screencast.com/t/DEI1zvTdl It does look like the css is being loaded, but again, I could be misreading this: https://www.screencast.com/t/lA9Ye8ZiEL

cynderkromi

Question about the original post…my Quasar project doesn’t have an app.styl file. I do have an app.sass file but putting the original code in there doesn’t work. What file would I insert the code into? Thanks (I’m a totally newbie and really want to be able to change the size of my fonts in my app.)

dobbel

@cynderkromi

Quasar used to use Stylus (app.styl) as it’s default css thingy. Now it’s sass (app.sass). I think you can still switch between stylus and sass by just changing the extension of the app.* file.

Otherwise you have to convert the stylus code to sass css.