fluid typography - SOLVED

[qyloxe]

Scenario:
Let’s assume you are building a typical (business/product/blog) webpage with Quasar. You want it to be flexible and responsive and VERY mobile friendly and VERY big screen friendly. After a while, you realize it is very hard to achieve with Quasar. Almost impossible out of the box. In normal scenario you would use one of the thousands Bootstrap site templates, BUT, in this case you are just stubborn to use Quasar.

One piece of the puzzle is fluid typography:
https://www.madebymike.com.au/writing/fluid-type-calc-examples/
https://css-tricks.com/books/volume-i/scale-typography-screen-size/

In Quasar you could use something like this in your app.styl file:

fluid-font-size($minimumSize = 12, $maximumSize = 36, $minimumViewportWidth = 300, $maximumViewportWidth = 1600)
  font-size: 'calc(%spx + (%s - %s) * ((100vw - %spx) / (%s - %s))) !important' % ($minimumSize $maximumSize $minimumSize $minimumViewportWidth $maximumViewportWidth $minimumViewportWidth)

for num in (8..28)
  .fontsize-{num}
    fluid-font-size num (num*2+2) 300 1800

The code above will generate CSS classes fontsize-8 through fontsize-28. After that it is quite simple to use it like this:

<p class="fontsize-10"> this is content text</p>
<p class="fontsize-12"> this is caption</p>
<p class="fontsize-14"> this is header</p>
<p class="fontsize-16"> this is bigger header</p>

In similar style other CSS typography properties could be scripted (line-height etc.). I know, it is not ideal, I would strongly prefer to have something like responsive/fluid typography CSS system in Quasar itself, but for now - it just works.

[mKomo]

nice guide thanks for the tips

[amer1616]

Awesome… we need more guides from css guru I highly suggest putting the valuable guides about the design & any tricks in special section or blog. What do u think?

[digiproduct]

@qyloxe Excellent solution.

I’m going to give this a try as part of my initial Quasar testing … will give you some feedback once I’ve done that in the next few days.

[digiproduct]

@qyloxe ABSOLUTELY BRILLIANT … that literally transform the use of text classes.

Obviously, in terms of the WHOLE CSS system, there’s much more to do … for example, the line spacing should also reduce proportionately too …

BUT … that’s a MAJOR improvement with just that one simple change.

@rstoenescu should be talking to you to get your CSS expertise harnessed for the Quasar team.

[qyloxe]

@digiproduct thanks for kind words

In the topic of CSS, I would really want to just “canibalize” all that years of expertise put into Bootstrap4 and use that in web pages mode of Quasar. Of course web apps mode in Quasar is a different beast. As for now, IMHO, it is very easy to build complex interactive web apps with Quasar, but it is quite hard to build a “simple” websites. BUT I have a total confidence in Razvan and his creation. I’m sure it will be possible. Why? Because it is a beautiful, estetic, well thought framework and those qualities are rare to find. And when you find something like this, you just know that it will be a good solution. Just as a beautiful math formula, or beautiful architecture.

[digiproduct]

@qyloxe I’ve been playing around a little with text, and it seems to me that “in certain situations” the user experience may be enhanced by NOT using fluid typography.

So, I’m thinking that I might actually end up using a mix of standard Quasar classes and your technique … working on a screen by screen basis.

Do you have any list of equivalent font sizes from your methodology that would match the H1, H2, etc of the standard Quasar text classes?

[qyloxe]

@digiproduct said in fluid typography - SOLVED:

So, I’m thinking that I might actually end up using a mix of standard Quasar classes and your technique … working on a screen by screen basis.

That is my solution, too.

Do you have any list of equivalent font sizes from your methodology that would match the H1, H2, etc of the standard Quasar text classes?

Well, in B4 there are “heading classes” and “display headings classes”. They’re quite different. In Quasar there are formally only “heading classes” but semantically and visually they are closer to B4s “display headings classes”. As for now, in Quasar, you need to decide what you want “visually/semantically” and hard code that “formally”. Which results in a little mess. And this is one of the reasons where thousands of B4 templates/snippets are very hard to convert to Quasar, because some very similar formally concepts has different semantic/visual meaning in Quasar (IMHO).

In B4 you can add something called “responsive font sizes” which is exactly what this topic is about. They’re much better than my sample/simple code of course:
https://github.com/twbs/rfs

Quite frankly, having everything “fluid” could be good, but IMHO only in very specific situations. Obviously, not in “app” scenario, where is interaction and it would be awkward. Maybe in web site scenario, where you have only presentation of very simple content with many CTA and aggregated, constant info. Don’t know, wont argue, matter of taste.

Ach, “fluid” is a term coined way before “responsive”. I use term “fluid” when I think about “water” behaviour where page elements are reflowed with every little resize. With term “responsive” I tend to think about situations, where reflow depends on specific media breaks. This is the situation in Quasar. Media breaks are very opinionated, I won’t comment more (4K displays cough, cough).

What is my solution in current situation? We need to remember, that we have all the power of Vue components in our hands. We do not need to clutter our code with hundreds of divs with cryptic class names. We can distill essential elements of our websites and make components from them. And then build a page from a set of compound, beautiful, components. What said components could be? Well, for starter there could be a flex component with two columns (slots) where first column has text content and second has a responsive image (ideally from SVG). Then you can make another component, where is a title, place for paragraph and a list. And you could place this component in the left slot of the first component. And content for those component could come from component ‘data’ section. When you have a library of your own, tirelessly ciseled block element you can build your page from bricks. I have only a little objection, that my “standard web page components” somehow looks like ancient PowerPoint slides ha ha

Och, and remember you can always use inches or cm or rems as sizes in CSS - maybe what you really need is not “fluid” or “responsive” typography but a “constant everywhere” one?

[digiproduct]

@qyloxe said in fluid typography - SOLVED:

What is my solution in current situation? We need to remember, that we have all the power of Vue components in our hands. We do not need to clutter our code with hundreds of divs with cryptic class names. We can distill essential elements of our websites and make components from them. And then build a page from a set of compound, beautiful, components. What said components could be? Well, for starter there could be a flex component with two columns (slots) where first column has text content and second has a responsive image (ideally from SVG). Then you can make another component, where is a title, place for paragraph and a list. And you could place this component in the left slot of the first component. And content for those component could come from component ‘data’ section. When you have a library of your own, tirelessly ciseled block element you can build your page from bricks. I have only a little objection, that my “standard web page components” somehow looks like ancient PowerPoint slides ha ha

That’s very similar to my approach … build components out of components … and then build bigger components out those components … and so on.

[digiproduct]

@qyloxe

Just a quick follow-up to confirm that I am now using a mix of the in-built Quasar text classes and the FONTSIZE classes provided by your solution @qyloxe

I’ve discovered that your “fontsize-12” works very well as a replacement for “text-h4” as they are almost identical in size on a normal screen resolution, and then “fontsize-12” reduces in size as the screen size reduces while “text-h4” maintains the same size as the screen size reduces.

And the naming convention of the classes makes it easy to remember which class to use.

class=“fontsize-12” gives me a FLUID text font

class=“text-h4” gives me a FIXED text font

Here’s an example of it in use on a QCard component where I’m using “fontsize-12” instead of “text-h4”

          <q-card-section>
            <div class="fontsize-12 q-pl-xs text-weight-bold">Appointments Today</div>
            <div class="text-h3 q-pl-xs text-weight-bolder">5</div>
          </q-card-section>

Hope that quick explanation helps …

[rstoenescu]

Anyone willing to PR this? But I’d like the classnames to use text-<number> instead of fontsize-<number> in order to match the other classes.

[s.molinari]

Yes, and we’d need to also have some good info about this in the docs.

Here: https://v1.quasar-framework.org/style/typography

Scott

[digiproduct]

@rstoenescu and @s-molinari Seems to me that @qyloxe is the perfect one for doing this … I could do it for you because it’s really simple … but I don’t understand it the way @qyloxe does …

[rstoenescu]

There’s two reasons why I’m asking anyone to create a PR:

1. For the person to get the credits
2. We really have our hands full atm

[qyloxe]

@rstoenescu @s-molinari

Hmm, as an unfortunate author of this charming “solution”, please take my advice and do not incorporate this trick/hack at the framework level into Quasar. Yes, it looks nice in developer eyes, but it is valid only in specific situations and taking it out of the context of the whole typography would be IMHO more hurting to the image of Quasar as a CSS web pages platform.

Why?

1. Typography is about visuals, rhythm, beauty, composition. This hack is an algorithmic take on font sizes and it is linear in nature. In reality, the scaling of visuals should be non-linear and adjusted to the page purpose, specific font etc. If we will encourage designers considering Quasar as their next tool, to use linear design (at the framework level), they will laugh us off. It should be a developer decision if he wants to use linears in his specific web page.

2. Yes, it is only part of “typography” as a whole and it is rather crippled part. The more advanced take to font scaling (only) at the LIBRARY level is here:
   https://github.com/twbs/rfs
   If at the APP level, one would want to use this LIBRARY, then one would only need to:

npm install rfs --install

and in their app.styl code:

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

Why is it encouraged to use this library and not incorporating anything into the framework? It is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency. Why is it important? Because for example “my” solution doesn’t work fully on safari browser. There are specific quirks which this library handles and my hack does not. There is a documentation of how and where use or not to use scaled fonts (not on HTML tag).

2. Why typography is so important on web pages (and even on web apps)? What is this typography anyway? Well, there are so many tutorials, books and knowledge. Those are interesting at the beginning:
   https://css-tricks.com/typography-for-developers/
   This one touches of the tip of the iceberg - rhythm:
   https://www.webfx.com/blog/web-design/css-typography-02/
   There is a beautiful parable - I’ll cite “The concept of vertical rhythm is simple: Line heights, margins, and padding should all be equal or within even proportion.”. Even if a daveloper knows how to use CSS typography properties (so many…) does she understands what rules needs to be followed and which ones could be broken?
   This is nice one too:
   https://practicaltypography.com/
   … and many more.

3. What can I do anyway? Well I’m strongly encouraging to somehow incorporate Bootstrap design concepts into Quasar, but not necessarily at the framework level, but rather as friendly agreement to “not reinvent” Quasar own solutions, in a way, which would prevent using of knowledge and solutions accumulated in Boostrap as a concept. As I said in previous posts, the key is to convince thousands of developers from Bootstrap to convert to Quasar.

4. Can I use Boostrap already in Vue and link it with Quasar? There are solutions at the Vue level for example:
   https://bootstrap-vue.js.org/
   https://medium.com/@BjornKrols/integrating-and-customising-bootstrap-4-in-vue-js-cbc29ba7688e
   But they won’t be rather compatible with Quasar, because Quasar, at the framework level, intentionally or not, is using similar CSS classes to Boostrap, and it would just make a mess if one would want to use those two CSS system at the LIBRARY level.

5. Why am I differentiate “framework”, “library” and “app” level? At the framework level there is an “inversion of control”, at the “library” level it is the “app” who decides where “control” is, and the “app” is where the “interaction” is. Without “interaction” there is only “web page”.

6. OK, so what are the options to play along with Boostrap4 in Quasar? Quasar is based on “material design” and Boostrap is not, so why we even are talking about that? Because the most important are those designers/developers to convert and thousands of web page templates and snippets to use. We do not need to USE the B4 as a base for Quasar, we only need to have “possible way” to use hard learned B4 skills in Quasar environment. It is sufficient for Quasar not to prevent this (as it is doing now). Have it be done in Vue? Yes, there is a project MDBootstrap - “Material Design with Boostrap in Vue”:
   https://mdbootstrap.com/docs/vue/
   The name is perfect, becuase this project, as it is claiming, converted 800 000 developers to using Bostrap in Vue! This is the scale of traction we are talking about.

7. How is it possible for this project to be this successful? It allowed to use B4 skills and promised to multiply the productivity by using Vue. This project is focused on presentation, which is Quasar weakness. If Quasar would incorporate some of the design elements/concepts/ideas from MDB, than because it is a superior FRAMEWORK it would just offer a win/win.

8. In essence - we really do not need to follow the path of manually dealing with every css typography property or scaling or visual specifics. It is Vue and it is 2019. The MDB project has something like “Sections”. Please take a look:
   https://mdbootstrap.com/docs/vue/sections/demo/
   This is what we (as “we” developers") need at the end of the day: the highly configurable web page compound elements, with superior layout, excellent typography, visually atractive and highly configurable sections of blog, contact, e-commerce, features, intros, magazines, projects, social, teams, testimonial, and of course, jumbotron. With those “bricks” the Quasar would not only be an excellent app platform but also web page platform. In MDB those sections are highly compatible with B4 semantics and this is why this project is so succesful at developer acquisition. In MDB they are manually converting those web templates and snippets (but it is possible and it is simple), in Quasar we just could write something to automatically convert existing B4/MDB templates/snippets (ideally of course).

9. What am I proposing? There is a concept of App Extensions in Quasar. It is just ingenious. What we need in V1 is to not overwrite CSS classes from B4 (which would allow to use some of the B4 concepts) and make an App Extension with default sections for web page developers (maybe even the same as in MDB - they’re great). There is a twist - in specific demos, there should be examples of incorporating Quasar app components in those sections! It would be just a killer feature for thousands of developers. They couldn’t resist the temptation to finally use something app centric on those boring web pages, they are making every day, just to bring some food on the table.

[digiproduct]

@qyloxe Excellent post … very informative.

The MDBootstrap stuff is awesome quality … beautiful looking …

And … working out the financials on the number of users of it, and the fact it is a paid system, should give @rstoenescu some food for thought …

However, we have to recognise that the Quasar team has limited resources … as @rstoenescu has already pointed out. It’s actually quite amazing what such as small team has already achieved …

[s.molinari]

Well, now I’m looking forward to RFS as an app extension.

Scott

[qyloxe]

@s-molinari Yes! And this is a way to go. Extensions are awesome!

@digiproduct Regarding “limited resources” - that’s exactly why, it is questionable to build Quasars own CSS system for web pages (not apps) and I strongly opt, that in case of “designers” CSS just use, or better “allow” to use anything what designers are accustomed to.

[rstoenescu]

Sorry for changing the subject (but not by a lot):

Just pointing out that Quasar is looking into the future and sets its own high and modern standards. And yes, in order to make progress in web development you need to break the current establishment. Otherwise we’d all be continuing to write websites in cgi-bin / perl today too, because maaany years ago that’s what developers were accustomed to. And what most developers are accustomed to at one point in time doesn’t actually mean it’s the best solution or the “definite” solution, and Quasar will never bend into choosing what we believe is not the optimal path to high quality work, not even over money.

We now have limited resources, but if you take a look at what has been achieved here then imagine what we can do with proper resources. What I want to achieve with Quasar is to raise the bar for web development as a whole. Make it go forward, evolve. Change minds. Point out when there’s a better alternative.

Giving a hint on what’s to come, since we’re on the subject of design. We are planning to launch a Quasar themes website and also teach people how easy it is to create custom Quasar v1.0 themes.

[digiproduct]

@rstoenescu said in fluid typography - SOLVED:

Giving a hint on what’s to come, since we’re on the subject of design. We are planning to launch a Quasar themes website and also teach people how easy it is to create custom Quasar v1.0 themes.

That’s excellent news … really looking forward to it.

I really love everything that you’re doing with Quasar (hence why I became a Patreon) and I’m highly impressed by what you’ve achieved so far, and the awesome App Extensions that have started appearing … and the responsiveness of the team is simply amazing.

The future looks very bright for Quasar …

I just wish more Quasar users would help support the team … or at least write a nice comment over on your Medium article …

https://medium.com/quasar-framework/why-donations-are-important-2f3f913cfc2e