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.
After completing this how-to you will know:
- How to create a new App
- How to create your own theme with just CSS
- How to make your first styling changes
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.
- Open Mendix Studio Pro.
Click the App Store icon in the top-right menu bar, then search for “materialism”:
Click Download to start using this theme.
Select Run Locally to deploy your app.
4 Opening Your Project in the Text Editor
- Open your App Project Folder in your text editor by choice.
Navigate to the folder theme and you will find the css files in the folder styles\css.
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
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.
Let’s change the color of our topbar. Find the CSS element .**region-topbar **as you can see in the screenshot below.
Let’s do a simple change by making the topbar red. Insert the following line as in the example below:
Let’s redeploy our application and look at the result!
Congratulations, you made your first theme change.