In this how-to we will go through how to setup the Mendix UI Framework with the program called Koala.
After completing this how-to you will know:
- How to create a new App
- How to setup Koala and the Mendix UI Framework
- How to make your first styling changes
Before you can start with this how-to, please make sure you have completed the following prerequisites.
- Download the latest Mendix Modeler
- Download Koala (or use a different compiler)
- Download text editor Sublime Text
3 Creating a New App in the Mendix Desktop Modeler
In this chapter we will create a new app and select a starter app from the New App selector.
- Open the Mendix Modeler.
Create a New App from the My Apps screen in the Mendix Desktop Modeler.
Select a starter app on which to base your app.
You can now deploy your app or just head over to section 3 to configure Koala.
4 Configuring Koala
The Mendix UI Framework uses Sass, which relies on Ruby. However, you can install Koala to run Sass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. This way you don’t have to worry about using the terminal. You can still do this if you are familiar with Sass and terminal.
Open your App Project Folder in Koala by clicking on the plus button in the left sidebar at the top (or drag your folder in Koala).
Select the project directory from your newly created App. Koala automatically detects the Sass and CSS files and you are ready. Koala automatically compiles the files you want to adjust.
5 Configuring Your Text Editor
Open the Project Directory from your App in your desired text editor.
The theme folder is where you can find the theme that was selected when creating the New App. The folder theme\styles\sass\custom will be used to make our own changes. Let’s change the background for our sidebar!
Open up the file custom-variables.scss .
Let’s take a look at Step 2 in the custom-variables.scss file. As the comments suggest we can adjust the background-color for the sidebar.
Change the color from white (#FFF) to red (#FF0000) and save the file.
Deploy (or redeploy) your app and see the change you made to the sidebar!
As you can see our sidebar is now red, not the best look and feel but it works!
6 Related Content
- How to Create Your First Two Overview & Detail Pages
- How to Filter Data on an Overview Page
- How to Find the Root Cause of Runtime Errors
- How to Use Layouts and Snippets
- How to Perform the Scout and Windows 10 Workaround
- How to Set Up the Navigation Structure
- How to Set Up the Mendix UI Framework with Just CSS
- How to Set Up the Mendix UI Framework with Scout
- How to Set Up the Mendix UI Framework