Overview

A design system that support Mendix developers, improving how apps are designed, built, and scaled.

All your design control in just two files.

1. One for UI components (inputs, buttons, cards, side & top menus, wizards, and more).
2. One for brand styling (colors, fonts, border-radius, and white-label variants).

Branding control

• Global css-variables make branding updates effortless and possible to do on-the-fly in your browser.
• Edit/Add/Export then upload to your own Mendix Marketplace and keep your branding in one single source of truth.
• Eliminate tedious, repetitive styling work and get rid of some manual class adding and start using design-properties.
• Full theme control in one project file

Catalyst boosts Atlas; no rebuilds, no retraining, just install, tweak a few styles, and unlock extra design power.

Your team keeps working as usual, with full control and minimal setup. Once it’s in place, everything just works; Smarter, faster, better.

Works on top of any Atlas-based Mendix app

• New or old
• No need to retrain your team
• Minimal setup, maximum upgrade
• You stay in control no strings attached with this lite version!

Style faster, reuse more, and build cleaner more modern UIs with less effort.

It’s more than a design system it’s your design advantage.

• Customize spacing
• Default responsive layouts
• Better inputs and datagrids, already built-in

Built-in theme switching for dark, light, or autodetect modes; No code needed.

Whitelabel possibility: Style per user or client, with instant color, fonts, card-styling, border-radius updates when they login.

• Light & dark modes with one toggle
• Brand theming via whitelabeling
• No rebuilds, just instant switching
• Controlled through css-variables

Learn more: https://wecatalyze.design/catalyst-for-mendix/

A first look at Catalyst in it's most purest form in our component library:

https://catalystdesignsystem100-sandbox.mxapps.io/

The widget to anable this design system:

https://marketplace.mendix.com/link/component/247704

Do you have questions or want to discuss your project?

Email us at info@wecatalyze.design or call +31 (0)6 18 21 00 22.

Documentation

1) Import this module into your project

2) Give your userroles access to the new "Catalyst" module

3) Donwload the widget: "Catalyst enabler" and make sure it's on every pagelayout! (Catalyst pagelayouts are pre equiped with this widget)

4) Replace your pagelayouts with "App>Tools>Batch update layouts"

"Atlas_Topbar" for "Catalyst_Topmenu"

"Atlas_Default" for "Catalyst_Sidemenu"

"Modals and Popuplayouts" for "Catalyst_Modal"

5) Theme folder adjustments

5.1) custom-variables.scss

Empty the "custom-variables.scss" in the STYLING module in the modeler (or find it in the THEMES folder of your project) and

then add the following lines of code:

// import atlas core

@import " .. / .. /themesource/atlas_core/web/variables";

// == Settings for app behaviour == 11

@import ' .. / .. /themesource/catalyst/web/settings';

// Create CSS variables and link them to the Mendix default SCSS variables

@import ' .. / .. /themesource/catalyst/web/themes/all';

// == Variable files for custom changes == I

@import ' .. / .. /themesource/catalyst/web/variables';

5.2) main.scss

EMPTY the "main.scss" in the STYLING module in the modeler (or find it in the THEMES folder of your project)

6) Atlas Core module needs some fixes to be ready for CSS-variables:

Font fixes

\themesource\atlas_core\web\core\widgets\_typography.scss

"Error: Undefined operation "var( -- line-height) * 1.25".

Change to: var( -- line-height)

Color fixes

\themesource\atlas_core\web\core\widgets\_date-picker.scss

"Error: $color: var( -- font-color) is not a color."

color: lighten($font-color-default, 45%);

Change to: $font-color-detail

\themesource\atlas_core\web\core\widgets\_date-picker.scss

"Error: $color: var( -- brand-primary) is not a color."

color: lighten($brand-primary, 30%);

Change to: $color-primary-light

\themesource\atlas_core\web\core\widgets\_tab-container.scss

"Error: $color1: var( -- brand-primary) is not a color."

background-color: mix($brand-primary, #000000, 80%);

Change to: $btn-primary-bg-hover

\themesource\atlas_core\web\core\widgets\_switch.scss

"Error: $color: var( -- brand-primary) is not a color."

background-color: lighten($brand-style, 10%);

Change to: $brand-style

\themesource\atlas_core\web\core\helpers\_slider-color-variant.scss

"Error: $color: var( -- brand-primary) is not a color."

box-shadow: 0 0 0 5px lighten($color, 25%);

Change to: $color (twice in this file)

7) Add your own branding colors and styling

7.1) Start by adding your own styling module

In this module, please start your "main.scss" with the following code:

// load in all available variables

@import ' .. / .. / .. /theme/web/custom-variables.scss';

7.2) Your own branding colors

Now add a file called "_yourcompany_theme.scss" for example, and copy the contents of "_catalyst-design.scss"

7.3) Change the values

Change the values to what your company needs

7.4) Repeat for "_settings" and "_variables" files when needed

7.5) Back to 'main.scss' in the theme folder of the project

Add your new design-file into "main.scss" of the project at the bottom:

// load in all available variables

@import ' .. / .. /themesource/company-w/web/custom-variables';

As example custom-variables will look like this:

// import atlas core

@import " .. / .. /themesource/atlas_core/web/variables";

// == Settings for app behaviour == 11

@import ' .. / .. /themesource/company-w/web/settings';

// Create CSS variables and link them to the Mendix default SCSS variables

@import ' .. / .. /themesource/catalyst/web/themes/all';

// == Variable files == 1

// Catalyst variables

@import ' .. / .. /themesource/catalyst/web/variables';

// Company-W variables

@import ' .. / .. /themesource/company-w/web/custom-variables';

8) Doublecheck theme ordering

Make sure your theme is loaded in last. You can check this in your Modeler Pro app's "settings"-menu and then go to the 'Theme'-tab.

Your own company theme module should be last, Catalyst above that, and then DataWidgets and on top Atlas Core