Best practices on how to globally scale down theme / layout

[cmanique]

Hi all,

I’m currently evaluating Quasar for a complex web app (pretty sure we’ll stick with it, look’s pretty cool).

I’ve been fiddling with basic stuff, since I’m mostly evaluating capabilities.

One thing that strikes me is that the default styles are quite big for fonts and containers alike. I meddled with "dense as you can see below:

but I am looking for a more global way of compacting stuff, since parts of the web app will contain a lot of information.

Is there any variable controlling the global “scale” of the theme, layout, etc?

What would be the best possible path that would avoid changing css in pretty much every component?

Thanks in advance and it really is a great framework!

[cmanique]

Bump.

Any pointers most welcome

[metalsadman]

@cmanique no out of the box way atm. you can set it for components which have it, though a hacky way, by iterating thru the quasar components and setting the dense prop to true. I’ve seen a sample code of someone who did it, but can’t seem to find it anymore :x.

edit. ok found it, here https://github.com/quasarframework/quasar/issues/3968#issuecomment-487548337, this was for setting dark though, but its about the same idea. note that props are not reactive, so you’ll have to workaround on that as well.

i don’t know if there’s a ticket for this though, maybe you can issue one, as this is nice to have too.

[cmanique]

@metalsadman thanks for the info.
I was digging up on github and found that there’s something similar to this requirement on v2.0.

It seems the right approach, but it’s quite the rewrite and breaking change.

Let’s see how this unfolds.

Thanks!

[dgk]

I have done battle with this issue with some success. @cmanique

In a nutshell I have avoided any styling within element attributes and worked toward a css files only solution.
Take a look at my css folder of the app I used to develop this approach
https://git.kebler.net/Light2/frontend/src/branch/master/src/css

Start by looking at https://git.kebler.net/Light2/frontend/src/branch/master/src/css/app.styl and follow the @imports to see how it’s all pulled together and in what order

For fonts sizes I have used rfs to do the overall font scaling https://github.com/twbs/rfs then used stylus variables with factors to relatively scale fonts in components. There is a post on this at this forum https://forum.quasar-framework.org/topic/3483/fluid-typography-solved/33

For brand colors I use palleton to get the four color set and then use variables to easily integrate them into to the overall theme. https://paletton.com/#uid=73j0c0kllllaFw0g0qFqFg0w0aF
Now when I change the that file of values https://git.kebler.net/Light2/frontend/src/branch/master/src/css/base-colors/brand.styl my site immediately has a brand color change. One can tweek those on a per component basis using stylus variables.

I have set up files each targeting a quasar essential component like field, list, item that can be then overridden in a cascade like way using stylus variables.

Here is an example of how a “component” style file for q-field. It has a list of customizable variables at the top (which may be themselves variables and usually are) followed by the selectors and style affected by those variables.
https://git.kebler.net/Light2/frontend/src/branch/master/src/css/components/quasar/field.styl

With just a couple main variable changes (base font size, brand color page) I can change my whole color and font look.

@cmanique I’d just take my css folder and incorporate that into what you are evaluating.
https://git.kebler.net/Light2/frontend/src/branch/master/src/css

As to a complex web app I think quasar is the answer. This app has a featherjs database backend, a nodejs app backend as well, and uses feather-vuex and my own reactive nested object store to react dynamically with the nodejs backend. I wrote a dynamic form component that one feeds in the collection schema and it generates the form. It’s designed to be the configuration and control interface to a system of 40+ switches and 40+ circuits with multiple process running on multiple machines. I couldn’t not have done it without quasar and vue especially since I am a one man show.