Set Up the Mendix UI Framework with Just CSS

Last update: Edit

1 Introduction

In this how-to we will go through how to setup the Mendix UI Framework and do our first styling changes by just using CSS.

This how-to will teach you how to do the following:

  • Create a new app
  • Create your own theme with just CSS
  • Make your first styling changes

2 Preparation

Before you can start with this how-to, make sure you have completed the following prerequisites.

3 Creating a New App in Mendix Studio Pro

In this chapter we will create a new app and select a theme from the New App selector.

  1. Open Mendix Studio Pro.
  2. Click the App Store icon in the top-right menu bar, then search for “materialism”:

  3. Click Download to start using this theme.

  4. Select Run Locally to deploy your app.

4 Opening Your Project in the Text Editor

  1. Open your App Project Folder in your text editor by choice.
  2. Navigate to the folder theme and you will find the css files in the folder styles\css.

  3. There are two subfolders in our styles\css folder.
    a. Lib, this folder contains our library file that contains all the default styling from the Mendix UI Framework. It’s best practise to not alter this file.
    b. Custom, the custom file contains a preset of CSS elements and a copy of the library file but empty. Here we want to make our custom changes

  4. Let’s open up the custom.css file. We always want to work from this file so we can always look back at the library.css file to see how the original theme used to be.

  5. Let’s change the color of our topbar. Find the CSS element .**region-topbar **as you can see in the screenshot below.

  6. Let’s do a simple change by making the topbar red. Insert the following line as in the example below:

    background-color: #FF0000;

  7. Let’s redeploy our application and look at the result!

  8. Congratulations, you made your first theme change.

5 Read More