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

<body>

Buttons

Default buttons in MDriven Turnkey

     <button class="tk-button__native ripple-effect">Button</button>

     <button class="tk-button__native ripple-effect danger">Button</button>

     <button class="tk-button__native ripple-effect warning">Button</button>

     <button class="tk-button__native ripple-effect success">Button</button>

     <button class="tk-button__native ripple-effect info">Button</button>

     <button class="tk-button__native ripple-effect primary">Button</button>

     <button class="tk-button__native ripple-effect" disabled="disabled">Button</button>

Oulined buttons in MDriven Turnkey

     <button class="tk-button__native  ripple-effect outlined">Button</button>

     <button class="tk-button__native ripple-effect outlined danger">Button</button>

     <button class="tk-button__native ripple-effect outlined warning">Button</button>

     <button class="tk-button__native ripple-effect success outlined">Button</button>

     <button class="tk-button__native ripple-effect info outlined">Button</button>

     <button class="tk-button__native ripple-effect primary outlined">Button</button>

     <button class="tk-button__native ripple-effect outlined" disabled="disabled">Button</button>

Flat buttons in MDriven Turnkey

     <button class="tk-button__native  ripple-effect flat">Button</button>

     <button class="tk-button__native ripple-effect flat danger">Button</button>

     <button class="tk-button__native ripple-effect flat warning">Button</button>

     <button class="tk-button__native ripple-effect flat success">Button</button>

     <button class="tk-button__native ripple-effect flat info">Button</button>

     <button class="tk-button__native ripple-effect flat primary">Button</button>

     <button class="tk-button__native ripple-effect flat" disabled="disabled">Button</button>

Shaped buttons in MDriven Turnkey

     <button class="tk-button__native ripple-effect shaped">Button</button>

     <button class="tk-button__native ripple-effect shaped danger">Button</button>

     <button class="tk-button__native ripple-effect shaped warning">Button</button>

     <button class="tk-button__native ripple-effect shaped success">Button</button>

     <button class="tk-button__native ripple-effect shaped info">Button</button>

     <button class="tk-button__native ripple-effect shaped primary">Button</button>

     <button class="tk-button__native ripple-effect shaped" disabled="disabled">Button</button>

</body>

This page was edited more than 9 months ago on 03/26/2024. What links here