Skip to content

Best Practices and Tips for Creating a UI in Mendix

Technology

Aug 16, 2023 - 7 minute read

3316 Best Practices UI Mendix 416X300
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts

2988 HC Digital Transformation 476X381

Share

Table of contents

  1. Don't Use the Style Field in the Properties 
  2. Don’t Use the !important Directive 
  3. Create Templates and Building Blocks 
  4. Create a UI Theme Module 
  5. Use the Built-in CSS Classes 
  6. Copy the CSS Styles 
  7. Work With the Styles 
  8. Be Consistent 
  9. Use Ready-Made Solutions 
  10. Pay Attention to the UX 
  11. Summary 

When it comes to creating a user interface (UI), every developer has their own practices and often relies on established patterns within their company. In this article, I would like to share the valuable insights I have gained through nearly 5 years of experience in creating applications on the Mendix platform. I hope that delving into the following tips and best practices will help you enhance your UI creation process and discover key aspects to prioritise. Let’s dive in and uncover the essentials together. 

Don't Use the Style Field in the Properties 

It’s considered good practice not to use the Style field in the Properties panel. Each added CSS style adds an inline style to the HTML element in the DOM structure. 

Using inline styles is not recommended due to their high CSS specificity, making it practically impossible to override them with CSS styles written by developers in SCSS/CSS files (without using the !important directive). 

TIP: Instead, create your own CSS class, and add it to the Class field in the Properties panel, or use a built-in class from the Atlas UI framework. 

I encourage you to familiarise yourself with the CSS specificity and check the order in which the styles are used by the browser. It will help you avoid problems with overwriting CSS styles in the future. 

Don’t Use the !important Directive 

Try not to use the !important directive in your CSS code. Instead, you should, in the first place, understand why the code you wrote doesn't work and consider alternative solutions before resorting to !important. Check the CSS specificity of the CSS selector you want to override and write your own selector with the same value — you can use an online calculator for that. Using !important doesn’t solve problems in the code and isn’t recommended since it makes it difficult to override and maintain CSS styles. 

In situations where you utilise external libraries/widgets, you have no influence on the author's code, and there may be exceptional cases where the use of !important is justified. 

TIP: In Mendix, helper classes use !important by default. If you want to change this, navigate to the _custom-variables.scss file and set the variables $important-flex, $important-spacing, and !important-helpers to false. 

Create Templates and Building Blocks 

When your design team provides you with mock-ups or designs of your future application, you can plan the UI creation using templates and building blocks. Take a general look at the entire application and you will surely be able to identify the repeated elements. For common parts of the pages, create templates. For smaller layouts, components, and sections, create building blocks. 

Using these solutions will significantly speed up the development of your application and will be helpful when several developers are involved in its creation. 

TIP: Creating patterns is crucial when more people are working on the application. Each developer may use different CSS classes, design properties, and layout arrangements for the elements on the page. The divergence in approaches taken by developers can lead to inconsistent outcomes, where two seemingly identical pages differ from each other.  

Create a UI Theme Module 

Another good practice is to create a separate module where layouts, templates, building blocks, graphics, and your CSS styles will be stored. You can export such a module later and use it when building another application. 

It's a good idea to create a starter that includes a template that is universal enough to be used for any application. This will save you time because you won't have to repeat the same steps no matter what app you're building. 

TIP 1: Create a UI module at the beginning of application development and copy the layouts from Atlas UI (available in Marketplace modules) that you intend to utilise. Use only layouts from your module. This way, you safeguard your layouts against overwriting during Atlas UI framework updates, ensuring your changes remain intact. 

TIP 2: Storing your styles in the same module is a recommended practice, allowing you to keep things organised and facilitating easy exporting for future use in other applications. 

TIP 3: Designate your module as a UI resource module by selecting the ‘Mark as UI resources module’ option when clicking on the module name in Mendix Studio Pro. 

Use the Built-in CSS Classes 

The Atlas UI framework includes built-in helper classes for flex, spacing, etc. They can be used for widgets and building the UI from elements available in Mendix. While most helper classes can be selected in design properties, there are additional classes in the Atlas UI framework’s code. It's advisable to leverage these built-in classes instead of creating new ones that do the same thing. 

TIP: Before creating a new class, check if the desired class already exists within Atlas UI. You can refer to the official documentation or explore the Atlas UI source code (widgets have a separate helpers directory in Atlas Core, and it’s worth checking the _helper-classes.scss, _flex.scss, and _spacing.scss files). With each new project, your knowledge of the built-in classes will increase. 

Copy the CSS Styles 

In recent versions of Mendix Studio Pro, it is possible to copy styles. You can copy the selected design properties and class name from one widget to another.  

TIP: To copy a style, simply right-click on the selected widget and select ‘Copy styling from’ the menu. Then, on the target widget where we want to transfer the style settings, follow the same process but select ‘Paste styling’ from the menu. 

Work With the Styles 

The approach you take to working with CSS styles is crucial. First, you should modify the so-called custom variables and use built-in helper classes. Only if the required variables or classes don’t exist, you should proceed to create a new CSS class that facilitates the desired changes to the widget or layout. 

TIP 1: Don’t change anything in the Atlas UI framework styles (Atlas Core, Atlas Web Content). Modifying these styles can lead to conflicts when updating the framework, potentially overwriting your changes. Even with backups, it will be difficult to identify the affected areas. It is best to keep CSS styles in a separate module, complete with your variables, and only import them into the main theme directory. 

TIP 2: Begin by changing the common parts for the selected widget, then, if necessary, create a custom CSS class that will be your modifier and will override the base styles for the given widget. 

TIP 3: It's good to divide your code into smaller files and directories with appropriate names. This will allow you to easily find the code you want to change and keep things organised. I recommend that you familiarise yourself with the 7-1 architecture. 

TIP 4: Use CSS code formatters and linters to ensure that your error-free and correctly formatted code. Tools such as Prettier and the Stylelint extension in VSCode can be valuable in this regard. 

Be Consistent 

Ensure consistency across your application by paying special attention to distances, font sizes, button colours, and the layout of elements on the page. Check if all pages in your application look the same, with matching component distances, uniform page title headers, and more. Maintaining consistency in these fundamental aspects will significantly enhance the appearance of the entire application. 

TIP 1: Before submitting your work for testing, check if your website is identical to the ones already existing in the application you are working on.  

TIP 2: It’s worth establishing patterns that will be used throughout the development process prior to commencing the work. 

TIP 3: Maintain a consistent naming convention for headlines and page titles, adhering to a single pattern. For example, if you choose to use Camel Case, apply this notation across all instances. 

Use Ready-Made Solutions 

If you’re not an expert in UI creation and writing CSS styles, it’s worth considering using a ready-made template that can be downloaded from the Mendix Marketplace. 

One such module is the Globus Theme Module, which offers a universal design and a collection of components to help you build your application. It’s also easy to adapt to your client's branding by adjusting the values of SCSS variables. 

To learn more about the Globus Theme Module, visit the official Globus website. 

Pay Attention to the UX 

Another crucial aspect to consider is the user experience (UX), where maintaining consistent patterns and behaviours across all pages in an application is essential. 

EXAMPLE: If you use a modal with Save and Cancel buttons, ensure that they appear on all pages in the same colours and in the same order. This enables the users to rely on familiar patterns and behaviours from previous pages. 

Summary 

The practices and tips outlined above are essential considerations when creating a UI in Mendix. By following these guidelines, you can create a consistent and visually appealing user interface while maintaining code organisation and reusability. Remember to leverage built-in classes, use copy-and-paste styling features, and be mindful of design elements. Additionally, consider utilising ready-made templates from the Mendix Marketplace and prioritise a seamless user experience. 

I hope these practices and tips will prove valuable and help you deliver high-quality applications. Best of luck with your projects! 

2988 HC Digital Transformation 476X381
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts

Related posts

You might be also interested in

Contact

Start your project with Objectivity

CTA Pattern - Contact - Middle