Vanjaro CSS

[X3Technology]

So, I've been playing around quite a bit with how the Vanjaro theming engine works and I have a couple of comments/concerns.
As I have noted in a couple of issue tickets, I believe some of the CSS is being concatenated/compressed in the wrong order. For example "portal.css" gets loaded before the theme.css and before the BS5 CSS and it should be the opposite order.

If you enable Debug mode (click the "V" in the side bar), you can then see how all of the different CSS files get loaded if you inspect the source HTML of a rendered page. From here, you can see how portal.css gets loaded before any other CSS files. This should be the last file to loaded to give the user the opportunity to easily override any default CSS rules without having to resort to weird "!important" or hyper specific CSS selectors in order to override a BS5 or theme CSS rule.

However, beyond that, I have noticed something else. Even you don't enable Debug mode. It appears to me that Vanjaro is loading the entire BS5 CSS framework and then the default theme is loading the entire BS5 CSS framework again.

You can see this in the debug console when you inspect any element.

Note how the exact same CSS rules appear in the concatenated/compressed css file on lines 26 and 30.
If you actually open this css file and look at those line, you will see that line 26 is the entire BS5 CSS (coming from the precompiled BS5 file located \DesktopModules\Vanjaro\Common\Frameworks\Bootstrap) and line 30 is also the entire BS5 CSS but this one comes from the compiled SCSS located in the theme folder (\Portals_default\vThemes\Basic\scss) and it is pre-pended with some additional CSS rules that can be manipulated by the Vanjaro Theme editor.

For obvious reasons. this is not great. Loading the entire BS5 CSS twice is wasted bandwidth.

From a designer standpoint, what I would like to see is for the Theme editor to give me direct access to the SCSS in the default BS5 distribution and then compile everything for me and transmit just one CSS. This way, I could use the Vanjaro editor to modify the color variables found in a standard BS5 distribution (/scss/_variables.scss) and have Vanjaro compile all the SCSS for me. Awesome! Then, as a designer/developer, if I needed to add or modify custom CSS rules or I wanted to expose other CSS properties via the Theme Editor, there is already a mechanism for doing that (theme.editor.json) which I know we will learn about soon.

Thus, ideally, if I were to start building a new Vanjaro Theme, I would go to the Theme Editor, click "New", give it a name, and Vanjaro would simply make a copy of the default BS5 scss and use the editor to modify whatever I wanted.

Alternatively, what if I were to purchase a BS5 theme from https://themes.getbootstrap.com. These packages all have the exact same file structure. The SCSS files exactly match the structure found in Vanjaro's default BS5 library and the Basic theme. So, all I should have to do is simply copy the scss folder from the theme package I purchased into my new Vanjaro Theme and then Vanjaro will handle compiling the scss and using the editor to manage it but I don't have to spend hours trying to recreate everything using the editor, I can just make the tweaks I want to. Very awesome!

[meetmandeep]

As I have noted in a couple of issue tickets, I believe some of the CSS is being concatenated/compressed in the wrong order. For example "portal.css" gets loaded before the theme.css and before the BS5 CSS and it should be the opposite order.

This should be the last file to loaded to give the user the opportunity to easily override any default CSS rules without having to resort to weird "!important" or hyper specific CSS selectors in order to override a BS5 or theme CSS rule.

We're still assessing this but this will be solved in next minor update.

It appears to me that Vanjaro is loading the entire BS5 CSS framework and then the default theme is loading the entire BS5 CSS framework again.

Vanjaro loads BS5 CSS framework for Admin UI; this should only happen when you're logged in as Admin. Theme loads the BS5 CSS framework for end-user presentation. There should be no performance impact or bandwidth concern for non-admin users. However, this is an excellent observation. Our design team will assess if a single BS5 CSS framework can be used for admin UI as well.

From a designer standpoint, what I would like to see is for the Theme editor to give me direct access to the SCSS in the default BS5 distribution and then compile everything for me and transmit just one CSS. This way, I could use the Vanjaro editor to modify the color variables found in a standard BS5 distribution (/scss/_variables.scss) and have Vanjaro compile all the SCSS for me. Awesome! Then, as a designer/developer, if I needed to add or modify custom CSS rules or I wanted to expose other CSS properties via the Theme Editor, there is already a mechanism for doing that (theme.editor.json) which I know we will learn about soon.

That's precisely how it works now.

Thus, ideally, if I were to start building a new Vanjaro Theme, I would go to the Theme Editor, click "New", give it a name, and Vanjaro would simply make a copy of the default BS5 scss and use the editor to modify whatever I wanted.

That is theoretically possible but themes will require a server side component for commercial vendors to license; add their own design/content blocks, and so forth. We'll start covering dev topics next month.

Alternatively, what if I were to purchase a BS5 theme from https://themes.getbootstrap.com. These packages all have the exact same file structure. The SCSS files exactly match the structure found in Vanjaro's default BS5 library and the Basic theme. So, all I should have to do is simply copy the scss folder from the theme package I purchased into my new Vanjaro Theme and then Vanjaro will handle compiling the scss and using the editor to manage it but I don't have to spend hours trying to recreate everything using the editor, I can just make the tweaks I want to. Very awesome!

You should be able to do this now; as long as the theme has same scss files and structure (variables).

[X3Technology]

Great! Thanks @meetmandeep! Vanjaro has so much potential and I am loving getting to know how it works.