Configure Module-Level Theme Settings
Introduction
Atlas UI gives you a powerful tool to build a modern user experience. However, the flexibility of Mendix does not stop you from making your design system from scratch. This document will introduce you to the advanced options that module-level theme settings provide. For more information on making a theme module, see the Create a Theme Module section of Customize Styling.
The module-level theme settings enable you to control the theme system behavior in Studio Pro. As the name implies, you have a separate settings file for each module which you can find under themesource/{your-module}/settings.json.
If you wish for further guidance on front-end best practices, see Implement Best Practices for UX Design.
Excluding UI Elements and Styling
When using a custom design system, you might want to prevent your developers from using other modules’ UI elements. The excludes property allows you to filter out layouts, page templates, building blocks, design properties, and styling. The general format looks like this:
{
"excludes": {
"MODULE_NAME": {
}
}
}
As the code snippet demonstrates, you can exclude the UI elements of a specific module by grouping them under a module name.
Excluding Layouts and Page Templates
By excluding layouts and page templates, developers can no longer use them to create a new page. Here is a small example of how to exclude Atlas Core layouts and page templates:
{
"excludes": {
"Atlas_Core": {
"layouts": true,
"pageTemplates": true
}
}
}
Excluding Building Blocks
Similar to layouts and page templates, excluding the building blocks will hide them from the page editor toolbox. Here is a small example of how to exclude Atlas Web Content building blocks:
{
"excludes": {
"Atlas_Web_Content": {
"buildingBlocks": true
}
}
}
Filtering Design Properties and Styling
Filtering styling elements like design properties or CSS classes is useful when you do not want your developers to apply them. Here is a small example:
{
"excludes": {
"Atlas_Web_Content": {
"designProperties": true,
"styling": true
}
}
}
Reviewing a Complete Example
Here is an example which integrates all the concepts described above:
{
"excludes": {
"Atlas_Core": {
"layouts": true,
"pageTemplates": true
},
"Atlas_Web_Content": {
"buildingBlocks": true,
"designProperties": true,
"styling": true
}
}
}