Settings overview

Setting types

All the data that can be added in the builder mode exist in the form of settings. In turn, there are several levels of settings:

1. global settings (all templates);
2. template settings (specific template);
3. module settings;

The global settings are saved separately in DB. They are used by all templates. Among them are: a setting for responsive mode strategy, CSS custom properties, data variables, custom CSS code 'PRO', and custom JS code 'PRO'.

The template settings are applied to this template only. Among them are: a setting for responsive mode strategy, CSS custom properties, data variables, custom CSS code 'PRO', and custom JS code 'PRO'.

The module settings can be added for modules; they include any CSS settings, HTML attributes (including classes and custom IDs), module scoped CSS custom properties, content settings (for content modules), and some unique settings (if available).

info

All the module settings and all the template settings are being saved inside a template config. We can export a template config from one site and import it to another site. Template configs are perfectly portable, so we can say that module and templates settings are also portable. However, global settings are NOT included in an exported template config. Global settings can be exported/imported separately.

Data structure of the settings

The layers of settings data specifically designed to work in a certain way. Understanding this data flow is crucial for using Builderius more efficiently!

Key concepts:

• module settings are attached to a module; module's CSS related settings values are rendered on the page only if the module exists;
• template settings and all settings of all modules are added inside the template config, they can be exported together;
• global settings are saved in DB;
• CSS custom properties (variables) might be overwritten; the order of their appearance (therefore their possibility to be overwritten) is the following: CSS custom properties in global settings -> CSS custom properties in template settings -> CSS custom properties in module settings (they are called "local"; e.g. global CSS var --bgcolor: #fff added under 'all' will be overwritten with template CSS vars named as --bgcolor);
• Data variables declared first might be used in the next data variable declarations; the order of their evaluation (therefore their possibility to be overwritten) is the following: data variables in global settings -> data variables in template settings;

Scopes for CSS related settings

We can assign any CSS related module settings to a specific combination of a media query and CSS selector. By default, these values are chosen:

• 'all' in media query dropdown
• 'original' in CSS selector dropdown

Effectively, the above values mean that currently accessible settings are applied under the builder content and module's unique class scope. An example:

.builderiusContent .uni-node-u1234567 {
    width: 150px;
}

info

We have designed Builderius to keep the builder output as minimal as possible. Each module has only three classes "pre-created": "uni-node", "uni-<module_name>" (e.g. "uni-Paragraph"), and ".uni-node-<unique_id>" (e.g. .uni-node-u4rg5674).

To understand better how to create custom media queries and custom CSS selectors, please, proceed to the following article: Creating media queries and CSS selectors.

An example with a custom media query and the default CSS selector. In this case, setting "width" was defined twice with different values: under the 'all' default media query and under the custom media query (max-width: 600px):

.builderiusContent .uni-node-u1234567 {
    width: 150px;
}
@media (max-width: 600px) {
    .builderiusContent .uni-node-u1234567 {
        width: 70px;
    }
}

Another example. Same as the previous one plus a complex custom CSS selector #hamburger-input:checked + .navWrapper created under 'all' default media query:

.builderiusContent .uni-node-u1234567 {
    width: 150px;
}
.builderiusContent .uni-node-u1234567 #hamburger-input:checked + .navWrapper {
    background-color: red;
}
@media (max-width: 600px) {
    .builderiusContent .uni-node-u1234567 {
        width: 70px;
    }
}

Both template and global settings also have CSS related settings. These settings render CSS style declarations which are scoped within builder content wrapper that has class builderiusContent. Example:

.builderiusContent {
    display: flex;
}

Scopes for CSS custom property settings

As for CSS-related settings, we can assign CSS custom property settings to a specific combination of a media query and a CSS selector.

Global and template CSS custom properties are being rendered in the global :root scope. The global ones first, then the template ones. Naturally, the cascading algorithm is applied in this case. For example, using two CSS variables with the same name added in global and template setting, the priority will be given to the one defined in template settings. The browser will use its value.

Scopes for other types of settings

Non CSS related settings do not take part in the output of any CSS. Some of them might be visible in the final HTML, though. For instance, module's setting "Custom HTML class" allows adding custom values to the HTML attribute class of the module's HTML element.

Another example of non CSS setting is 'Responsive strategy'. This settings has two values: 'desktop-first' and 'mobile-first'. Neither of these two values is directly outputted on the page. However, the value of 'Responsive strategy' defines how the values of CSS settings are sorted and displayed on the page.