Turnkey Styling
(Adding page to Category:TOC because it contains a TOC.)
 
(44 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:MDriven Turnkey]]
[[Category:MDriven Turnkey]]


=== Getting started ===
=== 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. [https://de.wikipedia.org/wiki/Block,_Element,_Modifier Read more here].
The MDriven Turnkey Style system is based on the BEM methodology. BEM stands for Block, Element, Modifier and is a convention on how to structure CSS rules. [https://de.wikipedia.org/wiki/Block,_Element,_Modifier Read more here].


Out of the box you will receive the following UI elements:
Out of the box, you will receive the following UI elements:
* Static text
* Static text
* Image
* Image
Line 20: Line 20:


== Layout ==
== Layout ==
MDriven Turnkey uses CSS Grid to create the application layout.
MDriven Turnkey uses the CSS Grid to create the application layout - unless you make use of [[PlacingContainer|placingcontainers]] - then the CSS flexbox is the core layout creator.


== What is modifier-classes? ==
== What are Modifier-classes? ==
Modifier-classes allow you to customise MDriven Turnkey's components.
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.
To use modifier-classes, put them into the "'''Style ref'''" field in the ViewModel Editor.
[[File:StyleRef field in ViewModel editor.png|none|thumb|708x708px|'''Style ref'''  in ViewModel editor]]
[[File:StyleRef field in ViewModel editor.png|none|thumb|708x708px|'''Style ref'''  in ViewModel editor]]


== Text elements ==
== Text Elements ==


=== Context colors ===
=== 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.
From the box, you're able to use five default contextual colours in MDriven Turnkey. You can modify them with the help of CSS custom properties.
* danger
* Danger
* warning
* Warning
* success
* Success
* info
* Info


=== Chip ===
=== Chip ===
With help of the modifier-classes you can style your static text as chip component from Google Material design.
With the help of the modifier-classes, you can style your static text as a chip component from Google Material design.
{| class="wikitable"
{| class="wikitable"
!Example
!Example
Line 59: Line 59:
|}
|}


=== Info block ===
=== Info Block ===
Coming soon...
Coming soon...


== Input controls ==  
== Checkbox and Switch ==
 
'''Checkbox''' is the default presentation of the boolean attribute in your model.
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 ===
{| class="wikitable"
{| class="wikitable"
!Example
!Example
!Modifier-class
!Description
|-
|[[File:Button default.png|frameless]]
|
|-
|[[File:Button danger.png|frameless]]
|'''danger'''
|-
|[[File:Button warning.png|frameless]]
|'''warning'''
|-
|-
|[[File:Button success.png|frameless]]
|[[File:Checkbox default.png|frameless]]
|'''success'''
|Default checkbox presentation
|-
|-
|[[File:Button info.png|frameless]]
|[[File:Checkbox checked.png|frameless]]
|'''info'''
|Checkbox checked presentation
|}
|}
 
'''Switch''' is a different way in which you can present your boolean attribute in MDriven Turnkey. To change the presentation of the boolean attribute from the default '''checkbox''' to '''switch,''' set the '''TaggedValue "Switch"''' to your ViewModelColumn.
=== Outlined buttons ===
{| class="wikitable"
{| class="wikitable"
!Example
!Example
!Modifier-class
!Description
|-
|[[File:Outlined button default.png|frameless]]
|'''outlined'''
|-
|[[File:Outlined button danger.png|frameless]]
|'''outlined danger'''
|-
|-
|[[File:Outlined button warning.png|frameless]]
|[[File:Switch default.png|frameless]]
|'''outlined warning'''
|Default switch presentation
|-
|-
|[[File:Outlined button success.png|frameless]]
|[[File:Switch selected.png|frameless]]
|'''outlined success'''
|Switch selected presentation
|-
|[[File:Outlined button info.png|frameless]]
|'''outlined info'''
|}
|}


=== Text buttons ===
== Typography ==
With the help of the modifier-classes, you can style the text data in your Turnkey application as headings. The available modifier-classes are listed in the table below.
{| class="wikitable"
{| class="wikitable"
!Example
!Example
!Modifier-class
!Modifier-class
|-
|-
|[[File:Text button default.png|frameless]]
|[[File:Turnkey heading h1.png|frameless]]
|'''flat'''
|'''h1'''
|-
|[[File:Turnkey heading h2.png|frameless]]
|'''h2'''
|-
|-
|[[File:Text button danger.png|frameless]]
|[[File:Turnkey heading h3.png|frameless]]
|'''flat danger'''
|'''h3'''
|-
|-
|[[File:Text button warning.png|frameless]]
|[[File:Turnkey heading h4.png|frameless]]
|'''flat warning'''
|'''h4'''
|-
|-
|[[File:Text button success.png|frameless]]
|[[File:Turnkey heading h5.png|frameless]]
|'''flat success'''
|'''h5'''
|-
|-
|[[File:Text button info.png|frameless]]
|[[File:Turnkey heading h6.png|frameless]]
|'''flat info'''
|'''h6'''
|}
|}
See also: [[Layout and CSS]]


=== Shaped buttons ===
== Date Picker ==
{| class="wikitable"
{{Edited|July|12|2024}}
!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'''
|}


=== Buttons with icons ===
[[Category:TOC]]
You have ability to add an icon to your button. To do that add the Tagged Value "'''Icon'''" to your ViewModelColumn which contains action. The value of Tagged Value should be the icon name. We use Material Design icons as the default icons for MDriven Turnkey application. Find the different icons on the following website [https://material.io/resources/icons/?style=baseline '''Icons - Material Design'''].

Latest revision as of 14:14, 26 March 2024


Getting Started

The MDriven Turnkey Style system is based on the BEM methodology. BEM stands for Block, Element, Modifier and 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 the CSS Grid to create the application layout - unless you make use of placingcontainers - then the CSS flexbox is the core layout creator.

What are 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 can modify them with the help of CSS custom properties.

  • Danger
  • Warning
  • Success
  • Info

Chip

With the help of the modifier-classes, you can style your static text as a 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...

Checkbox and Switch

Checkbox is the default presentation of the boolean attribute in your model.

Example Description
Checkbox default.png Default checkbox presentation
Checkbox checked.png Checkbox checked presentation

Switch is a different way in which you can present your boolean attribute in MDriven Turnkey. To change the presentation of the boolean attribute from the default checkbox to switch, set the TaggedValue "Switch" to your ViewModelColumn.

Example Description
Switch default.png Default switch presentation
Switch selected.png Switch selected presentation

Typography

With the help of the modifier-classes, you can style the text data in your Turnkey application as headings. The available modifier-classes are listed in the table below.

Example Modifier-class
Turnkey heading h1.png h1
Turnkey heading h2.png h2
Turnkey heading h3.png h3
Turnkey heading h4.png h4
Turnkey heading h5.png h5
Turnkey heading h6.png h6

See also: Layout and CSS

Date Picker

This page was edited 46 days ago on 03/26/2024. What links here
Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Turnkey_Styling&oldid=17767"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved