TwoTypesOfStyling
This page was created by Hans.karlsen@mdriven.net on 2025-05-22. Last edited by Hans.karlsen@mdriven.net on 2025-05-26.

There 2 different angles to styling:

  1. The overall theme and look of your application
  2. A way to convey information from data via special styling

The overall theme and look of your application

To change backgrounds, fonts, front color and sizes ; all is fully configurable from CSS, BUT an even cleaner way to apply your theme consistently is to use the predefined CSS variables that exists in the MDrivenTurnkey StyleSystem. You can easily give them values already in the model and be sure that they will be applied through out the application.

Watch this video for an overview:


A way to convey information from data via special styling

Sometimes you would bring the users attention to something specific - like a green "all is super great" label. To instruct the label to get green we need to have a style with a green background. Once we have such a style we can reference that style name in the styling expression on the ViewModelColumn for the label.

We may want to have rules when and what style to apply:

self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)

Styles like these can be maintained in the model as well, we call it StylesInModel

MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments