Turnkey Styling
This page was created by Denis on 2019-07-30. Last edited by Stephanie on 2025-01-28.
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<html>
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
- 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