Documentation:Turnkey Styling

Turnkey Styling

Getting Started

The MDriven Turnkey Style system is based on the BEM methodology. BEM stands for Block, Element, Modifier and is a convention on how to structure CSS rules. Read more here.

Out of the box, you will receive the following UI elements:

Static text
Image
Text field
Checkbox
Select (Combobox)
Date picker
Data-table
Button
File upload
Link
Textarea
Number field
Float field

Layout

MDriven Turnkey uses the CSS Grid to create the application layout - unless you make use of placingcontainers. Then the CSS flexbox is the core layout creator.

What are Modifier-classes?

Modifier-classes allow you to customize MDriven Turnkey's components.

To use modifier-classes, put them into the "Style ref" field in the ViewModel Editor.

Text Elements

Context Colours

Out of the box, you're able to use five default contextual colours in MDriven Turnkey. You can modify them with the help of CSS custom properties.

Danger
Warning
Success
Info

Chip

With the help of the modifier-classes, you can style your static text as a chip component from Google Material design.

Example	Modifier-class
	chip
	chip danger
	chip warning
	chip success
	chip info

Info Block

Coming soon...

Checkbox and Switch

The Checkbox is the default presentation of the Boolean attribute in your model.

Example	Description
	Default checkbox presentation
	Checkbox checked presentation

The Switch is a different way in which you can present your Boolean attribute in MDriven Turnkey. To change the presentation of the Boolean attribute from the default checkbox to switch, set the TaggedValue "Switch" to your ViewModelColumn.

Example	Description
	Default switch presentation
	Switch selected presentation

Typography

With the help of the modifier-classes, you can style the text data in your Turnkey application as headings. The available modifier-classes are listed in the table below.

Example	Modifier-class
	h1
	h2
	h3
	h4
	h5
	h6

See also: Layout and CSS

Date Picker

Coming soon...