User set-able breakpoint

[ssuess]

Maybe it is just friday, but I am having a little trouble reasoning about this. :) I have a breakpoint defined in /src/css/app.css at which point a bunch of things happen related to sizing/layout of a certain class of components. I would like to allow users to set a preference for this particular breakpoint. For example, a two col layout will become a three col layout at 1650px, but I would like this value to be settable for users. Ideally I would like to store this value in vuex, which is no problem. But how can I pull out this vuex variable for my media query and use it in app.css? Something like this:

@media (min-width: VUEX_VAR) { // usually 1650px
// my various rules
}

Or am I thinking about this wrong?

[metalsadman]

Have not tested, but you can probably make some css variables beforehand that will simply work as a placeholder of some value that you can dynamically change in javascript for later and then use that variable in your css. There should be other ways, like appending css into the dom via js.

[metalsadman]

Some refs https://css-tricks.com/updating-a-css-variable-with-javascript/
https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0
Also see how color utils in Quasar docs, as it's a related topic doen to creating dynamic branding https://quasar.dev/quasar-utils/color-utils

[metalsadman]

Well looks like css var is not supported yet for media query :(.

[metalsadman]

See this interesting workaround https://stackoverflow.com/a/61715442.

[ssuess]

See this interesting workaround https://stackoverflow.com/a/61715442.

Thanks! I will check it out!

[ssuess]

Ok, I think I have this working with the following:
app.css:

:root {
    --icsmall: 1450px;
    --icmed: 1650px;
    --iclarge: 1850px;
    --ichuge: 2050px;
...
}

myComponent.vue:

...
created () {
    var mediaRule = document.styleSheets[2].cssRules[6]
    mediaRule.media.mediaText = '(min-width:' + getComputedStyle(document.documentElement).getPropertyValue('--ichuge') + ')'
  }
...

My only worry now is that I don't know if the stylesheets indexes are stable or if I will need to add a find operation. I will test further and see, but this works! Thanks!

BTW, if I don't care about having those vars available in css, I can obviously just pass in any value I want, from my component or vuex or whatever. Which is very cool.

[ssuess]

Follow up FYI: My dev environment (quasar dev -m spa) index was strangely one away from my built index (quasar build -m pwa). Including a switch to work in both seems to work fine and I have built and run new dev environments several times and the indexes do not seem to change.