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 possible without knowing the right classes or creating custom CSS.
I decided to add the design properties to a separate module called “flexbox” in Mendix, allowing you to export and install the module in other projects. After installing the module, 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.
The added Design Properties
This helps speed up development by not having to create custom classes for every container, and speeds up development by simplifying the creation of complex layouts.
Adding your own custom design properties to Mendix is really easy. You need a .json file where the hierarchy and content is stored and a .scss file with the custom classes you can activate.
From Mendix 9, every module in your project has a themesource folder stored locally on your computer. If you open this folder in your favorite code editor, you can find the design-properties.json file. This file is usually empty and ready to be edited. Adding the code to the core folder of your project is good practice.
First, define which widget or element you would like to add the properties to. If you want to add it to all Mendix widgets, like the standard spacing left, right, top and bottom settings, you could add it to the overall “widget”object. We however, only want to add our properties to the DivContainer.
A container that uses flexbox is called a flex container. To create a flex container, we toggle the “Turn on Flexbox” option. Remember to do this, as the options below it depend on this setting to be turned on. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way:
Row behavior, this also applies to columns.
The flex direction property allows us to change the direction in which our flex items display on screen. It automatically uses row when you turn on flexbox. Setting it to row reverse will keep everything displayed in a row but the right and left side are switched. Setting it to column changes the main axis, and column reverse switches the direction again.
The justify option is used to align the items on the main axis (mainly for rows). By default, everything aligns at the start, but you could also set the value to end or center to line items up in the center. You can use space between to take all the space and divide the items so there will be an equal amount of space between each item with no spacing on the sides. You can also align items evenly with spacing on both sides by using space evenly.
With flex align you can align column if you selected flex direction: column or column reverse before. You can also stretch the column widths to fill the available space.
Flex gap allows you to add a gap between horizontally or vertically laid out items, specified in small, medium, large or extra large.
Flex width 100% is useful to stretch certain items in your row. Just add the class to the container inside your flex container.
Flexbox is very useful for quickly laying out pages or creating navigation layouts that align properly.
I’m sure you can find use cases where it is useful to easily add custom classes to objects. It allows developers to speed up their workflow, it decreases the amount of code that needs to be written, and it prevents errors by using standardized components.
