For Atlas 3 UI go here

We are always improving our code base with new technologies. Thus we moved our new atlas 3 theme package to our monorepo

Mendix Atlas 2 UI

Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to here.

Useful tools

• Compile SCSS to CSS with Calypso
• Visually update the design properties for web and native
• Inspect and update styles in the Make it Native app with the React Native Debugger

Structure

Mendix is capable of creating beautiful and user-friendly UI. Our Atlas UI framework demonstrates some of its possibilities. Here you will find a basic overview of our framework.

theme/
├── styles/
|   ├── native/
|   |   ├── ts/     // Will not be in the Atlas UI Resources module
|   |   ├── js/
|   |       ├── app/
|   |       |   ├── _custom-variables.js
|   |       |   └── _custom.js
|   |       ├── core/
|   |       |   ├── base/
|   |       |   ├── helpers/
|   |       |   ├── widgets/
|   |       |   | _variables.js
|   |       |   └── manifest.json
|   |       ├── ui_resources/
|   |       |   └── atlas_ui_resources/
|   |       |       ├── buildingblocks/
|   |       |       └── layouts/
|   |       └── main.js
|   └── web/
|       ├── css/
|       │   ├── * all output files
|       └── sass/
|           ├── app/
|           |   ├── _custom-variables.scss
|           |   └── _custom.scss
|           ├── core/
|           |   ├── _legacy/
|           |   ├── base/
|           |   ├── helpers/
|           |   ├── widgets/
|           |   ├── widgetscustom/
|           |   |   _variables.scss
|           |   └── manifest.json
|           ├── ui_resources/
|           |   └── atlas_ui_resources/
|           |       ├── buildingblocks/
|           |       └── layouts/
|           └── main.scss
├── * index files
├── * assets
├── * settings*.json (Design Properties)
└── styles.js

App

The app folder contains all custom styling. We recommend users to only use this directory for any custom styling.

When you want to customize something, you should first check if you can accomplish your goal by changing variables. These variables can be found in styles/web/sass/core/variables.scss or styles/native/core/variables.js. If you want to change any core variable, copy it to ../app/_custom-variables.(scss|js) and change it there. It will then overwrite the core variable. This will make updating Atlas UI much easier in the future.

Core

The core folder is the heart of Atlas UI. This folder includes base styling, widget styling & additional helper classes. The core widget styling is split in to two parts. The widget folder includes the default widget styling, as it will look out of the box. The helpers folder will include design properties and extra classes to change that default styling.

UI Resources

THe UI Resources folder will contain any styling related to Building Blocks, Page Templates and Layouts.

Building blocks are created with Widgets. For example cards or headers are building blocks. A building block could be an image, a title, and a button, assembled together into one UI block.

Page Templates are created with Building Blocks and Widgets. Page Templates are an example of how a page could look like.

Layouts are created with widgets. They are mainly used for navigation or user experiences which need to be consistent between pages.

License

MIT