Turnkey Styling
No edit summary
No edit summary
Line 140: Line 140:
|[[File:Text button info.png|frameless]]
|[[File:Text button info.png|frameless]]
|'''flat info'''
|'''flat info'''
|}
=== Shaped button ===
{| class="wikitable"
!Example
!Modifier-class
|-
|[[File:Shaped button default.png|frameless]]
|'''shaped'''
|-
|[[File:Shaped button danger.png|frameless]]
|'''shaped danger'''
|-
|[[File:Shaped button warning.png|frameless]]
|'''shaped warning'''
|-
|[[File:Shaped button success.png|frameless]]
|'''shaped success'''
|-
|[[File:Shaped button info.png|frameless]]
|'''shaped info'''
|}
|}

Revision as of 21:49, 12 December 2020


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.

What is modifier-classes?

Modifier-classes allow you to customise MDriven Turnkey's components.

To use modifier-classes put them into the "Style ref" field in the ViewModel Editor.

Style ref in ViewModel editor

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 default.png chip
Chip danger.png chip danger
Chip warning.png chip warning
Chip success.png chip success
Chip info.png chip info

Info block

Coming soon...

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

Buttons

Default buttons

Example Modifier-class
Button default.png
Button danger.png danger
Button warning.png warning
Button success.png success
Button info.png info

Outlined buttons

Example Modifier-class
Outlined button default.png outlined
Outlined button danger.png outlined danger
Outlined button warning.png outlined warning
Outlined button success.png outlined success
Outlined button info.png outlined info

Text buttons

Example Modifier-class
Text button default.png flat
Text button danger.png flat danger
Text button warning.png flat warning
Text button success.png flat success
Text button info.png flat info

Shaped button

Example Modifier-class
Shaped button default.png shaped
Shaped button danger.png shaped danger
Shaped button warning.png shaped warning
Shaped button success.png shaped success
Shaped button info.png shaped info
This page was edited 36 days ago on 03/26/2024. What links here