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.

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

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