Documentation:Turnkey Styling

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.

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.

Default buttons in MDriven Turnkey

Generic modifier classes for the buttons:

danger
warning
success
info
primary (applies primary color of your application)

Oulined buttons in MDriven Turnkey.

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

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

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"

This page was edited 35 days ago on 03/26/2024. What links here