This is one of the default themes that uses the Mendix UI Framework to quickly create a beautiful app with Mendix. The Mendix UI Framework consist of a Sass framework that compiles CSS files and all other files you need to build a complete Mendix app!
The theme folder consists of the default HTML pages, Sass, CSS and resources needed to style your application.
In the Sass folder you will notice two main folders, custom and library. The library folder houses the complete Mendix UI Framework and the custom folder is a duplication of the library folder. We advice to do all customization in the custom folder.
We created a framework so our users have a clear understanding what Mendix is capable of. The library folder structure is as follows:
- Base
- Building Blocks
- Components
- Layouts
- Mobile
The base folder holds the architecture for our framework. Here we have our mixins, variables and resets. The variables is what makes our framework, which holds all global variables for the project (for typography, color schemes, and so on).
This directory contains all kind of basic components like a datagrid, buttons, label, form, listview, or anything along those lines. They have distinct properties and can't be broken down further without losing their meaning.
Building blocks are combined components/widgets. For example cards or headers are building blocks. A building block could be an image, title and a button built together.
The layout directory contains some styles for the main sections of the layout (topbar, sidebar, footer and so on).
The mobile directory include specific styling for your tablet or phone pages and widgets. This is useful to target only mobile use cases.
The custom folder is a duplication from the library folder. We advice all of our users to make their customizations in this folder so you can always go back to the library. We made sure you are able to easily find all the elements and resources needed to style an Mendix application.
It's possible to do almost all your default styling in the _custom-variables file. In this file you are able to change your default colors, layouts, spacing, typography, widgets and more.
This folder includes the compiled files from Sass. It contains the custom and lib CSS files. You are able to adjust only the CSS files without using Sass. However, when you are going to use Sass the CSS files will be overwritten by the Sass compiler.
Resources combine startup images and icons to support Windows, Android and Apple devices. You would only need to use these files if you want your users to bookmark your app to their phones since Mendix supports hybrid applications in the Mendix platform.
This file is needed for creating hybrid apps with Mendix. Read more about this here.
Sass/Compass compilers need a config file called config.rb in which the settings of the project are defined. The compiler will read this and use the settings when compiling your css.
The theme has to be added to the following folder /project-directory/theme. Make sure to place all the files in the /theme/ folder directly. When you use the Mendix App Store the theme will be automatically placed in the correct folder.
- Live theme demo
- Mendix UI Framework Website
- Blog article about Mendix UI Framework
- Create a custom theme with the Mendix UI Framework
MIT