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

Custom_Starter

Extracted from the Maui9 Documentation:

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

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

If you don't have a custom folder in your application yet, this would be a great time to add it.

The custom folder allows you to govern elements that are only relevant for this particular application.

The custom folder can have different names depending on your company's best practices, but most of the time it is called Core, Custom, AppSpecific or something with that kind of context.

This module is only an example of how to integrate your custom SASS governance. so feel free to change it and mix it up however you want. 

The custom_starter module comes with a basic template of how to govern new SASS changes.

“I want to make SASS changes”
“I want to learn without being scared of breaking things”

Each developer wanting to make a SASS change, can create a file in custom/web and name it “_cm_DEVELOPERNAME_sprint_00”

They must also go into main.scss and add their new file.

Now that they have their own file, they can go wild.

If they break something, it is scoped in such a way that there are minimal risks.

After each sprint/epic/quarter technical debt stories should be added to the sprint, so that developers can refactor/review/discuss each other's SASS sheets.

If a section of SASS is specific for the app, you can create a new file to host that SASS for instance you may have a policy table that is created with multiple nested listviews, the styling for this can be refactored into “_cm_policyTable”.

There may be some SASS that needs to be incorporated into the COMPANYCore. The best way to do this is, is to add a new file called “_cm_mergetocompanycore.” It is important that the owner of company core receives this file, and once it has been integrated, the file in your application can be emptied.

The above processes greatly increase governance, learning & shared understanding of your design system.

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.