Overview

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:

https://docs.google.com/document/d/1MOCHnLxgsMqORgkL6smEKWzYR1cY4ziKxDgiIBcghqQ/edit?usp=sharing

Documentation

Modules

MauiLayouts / MauitLayouts_Custom

Extracted from the Maui9 Documentation:

https://docs.google.com/document/d/1MOCHnLxgsMqORgkL6smEKWzYR1cY4ziKxDgiIBcghqQ/edit#bookmark=id.8mi1bygs20ce
 

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

Do your scroll containers bug out?
Do you want multiple scrollable sections, or sticky headers/footers?

How about popups that slide in from the side?

A column that goes from the top of the page to the bottom?
Then MauiLayouts are what you need.

Maui9 Layouts are a 100% replacement for how to manage layouts in Mendix.

The main layout contains application wide widgets.
The navigation layout contains the only place you need to govern your navigation from a company governance perspective.

While the snippets in MauiLayouts_Custom allow you freedom in your own application to configure the app however you feel fit.

Layout grids have no outside negative margins, and now use the much more flexible “gap” css class.

Customizable login screen.

Standardisation of logo placement.

Css-Variable integration for real time multi tenant styling.

MauiLayouts are divided into two modules with different goals.

MauiLayouts contain all the SASS you need, and also the TopLevel & Navigation Layer.

This allows the module to be updated and governed externally.

The MauiLyout_Custom contains some default layouts and snippets to use in your application. The reasoning behind this is that a lot of applications use app specific UI elements, such as microflows in their navigation (such as retrieving an avatar or username).

Combining the two allows you to have the freedom and flexibility to create the layouts you need, without having to worry about the complex SASS going on behind the scenes, and leveraging bugs being fixed that have been found by community members.

Typical Usage Scenario

Making layouts easier to style & maintain.
Introducing flex elements, and sticky header/footer elements.

Dependencies

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 user the complete Maui9 set, Read the complete guide here:

https://docs.google.com/document/d/1MOCHnLxgsMqORgkL6smEKWzYR1cY4ziKxDgiIBcghqQ/edit?usp=sharing

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.