Documentation:Turnkey Styling

Getting started

MDriven Turnkey Style system based on the BEM methodology. BEM stands for Block, Element, Modifier and it 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 CSS Grid to create the application layout.

What is modifier-classes?

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

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

Style ref in ViewModel editor

Text elements

Context colors

From the box you're able to use five default contextual colours in MDriven Turnkey. You have an ability to modify them with help of CSS custom properties.

• danger
• warning
• success
• info

Chip

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

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

Info block

Coming soon...

Input controls

Input controls are rendered differently depending on the value type.

Text types

For inputs intended as type text, this type can be overridden with something else. Use the tagged value texttype on the column in the viewmodel.

• password
• email
• tel
• url
• search

How these input types renders depends on the browser used.

For further reference, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

Buttons

Default buttons

Example	Modifier-class
	danger
	warning
	success
	info

Outlined buttons

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

Text buttons

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

Shaped button

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