Maui9 - Utility Classes - Beta

Category: Modules
Subcategory: All


The Maui9 framework makes it possible to style your application using the utility class framework principles, developed from years of experience styling and maintaining multiple enterprise level design systems.

see documentation for more information:

Demo url


Utility Classes

Extracted from the Maui9 Documentation:

What is in it for you? (problem this solves, description, features)

The utility class module gives developers a huge set of helper classes to play with, along with some nice fixes to the atlas framework.

This might sound intimidating at first, but there are only a handful of classes and a handful of modifiers.


Main class





Padding: 16px;



Padding-right: 16px



Padding-left: 16px



Padding-top: 16px



Padding-bottom: 16px



Padding-top: 16px

Padding-bottom: 16px



Padding-left: 16px

Padding-right: 16px



Padding: 0;


If you would like to understand alignment in mendix.

Read this blog


If you would like to read more on icons, icon mapping, and font icons.

Read this blog:




Row Columns

Auto layouts






Although each of the Maui9 modules are designed to function in isolation, we strongly advise to use the whole set because of its holistic nature and in order to maintain the methodology & design vision.

  • Maui9 | Layouts

  • Maui9 | Layouts_custom

  • Maui9 | Utility Classes

  • Maui9 | YourCompanyCore

  • Maui9 | Custom

Installation & Configuration.

Because we assume you will be using the complete Maui9 set, Read the complete guide here:

Known bugs

  • Mobile navigation still buggy (need some good JS to fix it)

  • SASS Variables might cause errors if you are not using the whole set.

  • Design properties might break.


Frequently Asked Questions

  • Q: Where can I find a complete list of all the classes?

  • A: Short answer, in the SASS. Longer answer here, in this doc, but we will also be creating video’s and other training material.


  • Q: When will Maui9 leave Beta

  • A: When it is mostly bug free, has good documentation, and a lot of people are using it as a self service product without the help of Lowcode NZ.


Version: 1.0.3
Framework Version: 9.12.1
Release Notes: - Added "grid-fit" modifier class to grids, this can be combined with grid-3 or any other nr, to extend the grid to fill up empty space. A common grid-class-stack may look like: grid grid-3 grid-fit gap - horizontal inputs are no longer using less space then intended. - input text areas now have correct focus states - input compound objects now have correct spacing (Upload and Cal widgets)
Version: 1.0.2
Framework Version: 9.12.1
Release Notes: Added company core modifier that can be accessed by adding the following to your companycore: // You can turn on special utility class files as a starting point, or copy the content and edit it in the company core. @import '../../mauiutilityclasses/web/cc-sidenav';
Version: 1.0.0
Framework Version: 9.12.1
Release Notes: first upload