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.
Typography
The Turnkey application typography includes a range of contrasting styles that support the needs of your application and its content.
Components
Buttons
Out of the box in MDriven Turnkey you have the default button styles, but you can modify it with the predefined Modifier-classes. To style your buttons add the modifier classes to style-reference in your viewmodel column. Find out all predefined modifier classes for the buttons, below.
Generic modifier classes for the buttons:
- danger
- warning
- success
- info
- primary (applies primary color of your application)
Default buttons in MDriven Turnkey
Use the generic modifier classes with the default buttons to change their style.
Oulined buttons in MDriven Turnkey. (Style ref: outlined)
Add to style-references "outlined" in your viewmodel column. Also, you can use generic modifier classes in pair with "outlined". For example: "outlined danger", "outlined warning", "outlined primary".
Flat buttons in MDriven Turnkey. (Style ref: flat)
Add to style-references "flat" in your viewmodel column. Also, you can use generic modifier classes in pair with "flat". For example: "flat danger", "flat warning", "flat primary".
Shaped buttons in MDriven Turnkey. (Style ref: shaped)
Add to style-references "shaped" in your viewmodel column. Also, you can use generic modifier classes in pair with "shaped". For example: "shaped danger", "shaped warning", "shaped primary".
Checkbox controls
Checkbox control is the default presentation of the boolean data in your model. Checkbox controls always use primary color of your Turnkey application.
Switch controls
Switch control is the enhancement for the default checkbox controls. Switch controls toggle the state of a single setting on or off. You can easy get the switch control in Turnkey app, just set TaggedValue "Switch" to "True" for ViewModel Column.
Input controls
Input controls are rendered differently depending on the value type.
texttype
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
- 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