Import breakpoint variables from global file into modules

[RRimestad9]

We are building a theme, and plan on having some global variables like breakpoints defined in a separate file which can be used by all the theme files and the modules. So the global config file could look something like this:

{% set breakpoint_tablet = '768px' %}

I am able to include these variables in theme template files, but modules are another thing. I have been able to include and use it in module.html by running

{% import '../../global/config.html' as config %}

I now need to import that same file into module.css to make media queries, but am unable to do that. It seems the import command is not supported by the HubL subset used in module.css.

For colors and other things, we can use CSS variables, but media queries cannot use the var() function. What are we missing? What is the best practice when it comes to using breakpoints without hardcoding them?

[Jake_Lett · Accepted solution]

What you are asking for is not possible. Hubl code is only generated in the html+hubl portion. So if you want to output a hubl variable you need to have the css in the html+hubl section.

Since your breakpoints don't change that often, the simple approach would just be to manually write your media queries instead of using the variable. In the event, you change them you can do a find and replace or manually update them. I know not DRY but it gets the job done and you can move on to your next task.

[RRimestad9]

I also am beginning to suspect it is impossible - which does make sense. Modules are probably supposed to be independent entities and could be used in themes with varying breakpoints. So they should probably be as self-contained as possible.

Maybe we will just control their appearance in various screen sizes from the theme instead of doing it directly in the module. 

Thanks for your reply!

[RRimestad9]

Btw. we did experiement with a solution where the theme saves the breakpoints in local storage in the browser via Javascript, and then the modules could read them and apply them, but that turned very ugly very quickly. Just mentioning it in case someone desperately needs a solution and finds this thread.

We are probably going to go with breakpoint behaviour being defined on theme level instead of in the modules.

[Jake_Lett]

Ahh yes that is true. Then I would go with my second suggestion. Compile your sass and use your module css to override your main stylesheet.

[RRimestad9]

Can you explain your approach in a bit more detail? I am not sure I follow you. How would overriding the main stylesheet help when my problem is that I do not have access to these global variables in the module.css?

[Jake_Lett]

Have you tried placing the import into your HTML file and not your css file? Anything that uses hubl needs to be added in that box.

Another approach would be to add these dynamic styles to your main stylesheet and use your modules to override the defaults. If you are packing things in a theme I think this is ok. But if you want your modules to be portable across themes I would suggest trying the first option of including in the HTML section of the module.

See if this code works for you.

{% import '../../css/_breakpoints.css' %}

{% require_css %}
<style>
.accordion-module {
    background: red;
    height: 500px;
     (min-width: {{ breakpoints_mobile }}) {
        background: green;
    }
}
</style>
{% end_require_css %}

[RRimestad9]

Putting CSS into the HTML is not a good solution as we use SASS and compile it to CSS. Wouldn't we have to abandon using SASS to use that approach?

[Kevin-C]

Hey @RRimestad9 

Have you tried include?

[RRimestad9]

Yes, I have - alas unsuccesfully.

I have these files:

src/themes/itera.no/css/_breakpoints.css

src/themes/itera.no/modules/accordion.module/module.css

src/themes/itera.no/modules/accordion.module/module.html

This is what the CSS-file for the module looks like:

{% import '../../css/_breakpoints.css' %}

.accordion-module {
    background: red;
    height: 500px;
     (min-width: {{ breakpoints_mobile }}) {
        background: green;
    }
}

When I preview a page with that module on it, it seems as if the import-statement is not parsed:

I have also tried using {% include %} instead of import. If the CSS-file I try to include actually exists, the CSS file for the module is not loaded at all - there seems to be some parsing error. If the file does not exist, ie. I add a typo to the filename, the same thing happends as with the import statement. The statement is not parsed.

Could it be that import is not supported by the subset of HubL commands available in module.css?

[Anton]

Hi @RRimestad9, 

as far as I know hubl variables are document/file specific. This means that you can't create a file e.g. "variables.css" and store all of your hubl-variables in this file. You have to put them in every document (best case: at the very top).

What works "cross-file" are macros. Those can be put inside a seperate file. 

So if you want to try to put all of your variables into one file, a possible workaround could be to create a file "variables.css" and write a simple macros for each hubl-variable... Never done this before but it might work

hope this helps, 

best,

Anton

[RRimestad9]

No, that does not seem to be true. We have a main.css file which includes all CSS-files, and as long as the CSS-file with the HubL variables is imported first, the variables are available in all the other CSS-files imported afterwards.

[dennisedson]

Hey @RRimestad9 

Welcome to the Community!

Going to add @Jake_Lett  to this conversation.  He has a theme in the marketplace now! 😎