MDrivenWiki
Log in

MDriven Turnkey Style System

From MDrivenWiki


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 control

Checkbox control is the default presentation of the boolean data in your model. Checkbox controls always use primary color of your Turnkey application.

Switch control

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.