Overview

Development teams face challenges while converting UX designs into functioning web applications. A dedicated UX / UI designer is often needed to assign classes to containers to make them behave the way we want, so business developers don’t have to dive too deep into the .scss files. By giving developers the right tools, it is easier to create responsive layouts without having to involve a dedicated UX designer.

Certain common CSS classes like flexbox are not directly selectable in Studio Pro and applying them is not easy without knowing the right classes or creating custom CSS. I decided to add them directly to the modeler.

After you download and install the module I created, you can select a container on your page and instantly get the new design properties options in the Properties panel, allowing you to quickly style your pages.

Documentation

Description

Adds basic flexbox functionality to the Mendix Studio Pro modeler by adding custom design properties to containers.

Important: if you want any of this to function, always set Turn of Flexbox to Yes. 
 

Typical usage scenario

When you need to quickly design apps without the need for a dedicated UX/UI designer to layout the pages. Developers dont have to remember all the classnames and can just select the right way of aligning content.

Features and limitations

It only applies to containers at the moment.
Flew grow is not yet implemented. 

Installation

Download the module to your project and refresh your client. When you select a container you should see the extra classes.

Frequently Asked Questions

• Q: Why didnt you include all classes
• A: This is just version 1! Have some patience.