-
Notifications
You must be signed in to change notification settings - Fork 0
Structure
We recommend you download and install the Vanilla theme to every project. The default styling and downloadable themes in the app store have extra redundancy in the form of a custom.css file and sass files. This organizational choice just add extra bulk to the theme and creates a greater level of confusion as a whole. This wiki contains documentation on the files included under the Vanilla theme. You can view the Vanilla theme in the Mendix app store here.
In any project folder you can look into the theme folder and see all the elements that make up the styling of your application.
This contains all the files that contribute to your themes styling. Most of the pages in this wiki are about the files within this folder
This file is the page that the Mendix app loads into. This is also where the styling is loaded into. You can edit the imports to css files as well as fonts like google fonts or typekit here.
Replace this file with your own .io file to better apply your branding to your app.
Within the styles folder there a two important folders a css folder and sass folder. The sass folder contains all the working files and the css is the output of the compiled sass folder.
If you have any images of fonts you need to access in your css you should create folder to house those assets under the css folder. By default the Vanilla theme comes with a fonts folder here. you can easily create a images folder here too for any background image.
The folders that can be found under theme/styles/lib/sass are detailed in the right sidebar of this wiki. Read the custom variables and lib pages first to better how everything works together.
Within the css folder there is a lib folder. This houses the outputted lib.css file that is created on save when using Koala our recommended sass compiler. This folder also the location for any assets called to in the css. By default a font folder already exists, with all the fonts included in your project. If you plan to use background images or other images that are not imported into your project at the modeler level, it is recommended to create an 'images' folder in this folder.