Maui9 - Utility Classes - Beta

Category: Modules
Subcategory: All

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

https://youtu.be/P4_NLkxzciI
Demo urlhttp://www.bingethis.nl

 

Utility Classes

Extracted from the Maui9 Documentation:

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

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

Modifier

Result

Padding

 

Padding: 16px;

 

-r

Padding-right: 16px

 

-l

Padding-left: 16px

 

-t

Padding-top: 16px

 

-b

Padding-bottom: 16px

 

-v

Padding-top: 16px

Padding-bottom: 16px

 

-h

Padding-left: 16px

Padding-right: 16px

 

-none

Padding: 0;



 

If you would like to understand alignment in mendix.

Read this blog

 

https://medium.com/mendix/visual-alignment-in-mendix-badafe42dbc0.

 

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

Read this blog:

https://medium.com/mendix/the-complete-guide-to-icons-and-mendix-426936a533ee


 

Paddings

Margins

Row Columns

Auto layouts

Grids

 

 



 

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 using 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.

Releases

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