🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
    Turnkey Styling
    Line 59: Line 59:
         <div class="examples__item" title="Primary">
         <div class="examples__item" title="Primary">
           <button class="tk-button__native ripple-effect primary">Button</button>
           <button class="tk-button__native ripple-effect primary">Button</button>
         </div>
         </div>Outlined


         <div class="examples__item" title="Disabled">
         <div class="examples__item" title="Disabled">
    Line 70: Line 70:
       <div class="examples">
       <div class="examples">
         <div class="examples__item" title="Default">
         <div class="examples__item" title="Default">
           <button class="tk-button__native  ripple-effect outlined">Button</button>
           <button class="tk-button__native  ripple-effect outlined">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Danger">
         <div class="examples__item" title="Danger">
           <button class="tk-button__native ripple-effect outlined danger">Button</button>
           <button class="tk-button__native ripple-effect outlined danger">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Warning">
         <div class="examples__item" title="Warning">
           <button class="tk-button__native ripple-effect outlined warning">Button</button>
           <button class="tk-button__native ripple-effect outlined warning">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Success">
         <div class="examples__item" title="Success">
           <button class="tk-button__native ripple-effect success outlined">Button</button>
           <button class="tk-button__native ripple-effect success outlined">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Info">
         <div class="examples__item" title="Info">
           <button class="tk-button__native ripple-effect info outlined">Button</button>
           <button class="tk-button__native ripple-effect info outlined">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Primary">
         <div class="examples__item" title="Primary">
           <button class="tk-button__native ripple-effect primary outlined">Button</button>
           <button class="tk-button__native ripple-effect primary outlined">Outlined</button>
         </div>
         </div>


         <div class="examples__item" title="Disabled">
         <div class="examples__item" title="Disabled">
           <button class="tk-button__native ripple-effect outlined" disabled="disabled">Button</button>
           <button class="tk-button__native ripple-effect outlined" disabled="disabled">Outlined</button>
         </div>
         </div>
       </div>
       </div>
    Line 102: Line 102:
       <div class="examples">
       <div class="examples">
         <div class="examples__item" title="Default">
         <div class="examples__item" title="Default">
           <button class="tk-button__native  ripple-effect flat">Button</button>
           <button class="tk-button__native  ripple-effect flat">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Danger">
         <div class="examples__item" title="Danger">
           <button class="tk-button__native ripple-effect flat danger">Button</button>
           <button class="tk-button__native ripple-effect flat danger">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Warning">
         <div class="examples__item" title="Warning">
           <button class="tk-button__native ripple-effect flat warning">Button</button>
           <button class="tk-button__native ripple-effect flat warning">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Success">
         <div class="examples__item" title="Success">
           <button class="tk-button__native ripple-effect flat success">Button</button>
           <button class="tk-button__native ripple-effect flat success">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Info">
         <div class="examples__item" title="Info">
           <button class="tk-button__native ripple-effect flat info">Button</button>
           <button class="tk-button__native ripple-effect flat info">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Primary">
         <div class="examples__item" title="Primary">
           <button class="tk-button__native ripple-effect flat primary">Button</button>
           <button class="tk-button__native ripple-effect flat primary">Flat</button>
         </div>
         </div>


         <div class="examples__item" title="Disabled">
         <div class="examples__item" title="Disabled">
           <button class="tk-button__native ripple-effect flat" disabled="disabled">Button</button>
           <button class="tk-button__native ripple-effect flat" disabled="disabled">Flat</button>
         </div>
         </div>
       </div>
       </div>
    Line 134: Line 134:
       <div class="examples">
       <div class="examples">
         <div class="examples__item" title="Default">
         <div class="examples__item" title="Default">
           <button class="tk-button__native ripple-effect shaped">Button</button>
           <button class="tk-button__native ripple-effect shaped">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Danger">
         <div class="examples__item" title="Danger">
           <button class="tk-button__native ripple-effect shaped danger">Button</button>
           <button class="tk-button__native ripple-effect shaped danger">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Warning">
         <div class="examples__item" title="Warning">
           <button class="tk-button__native ripple-effect shaped warning">Button</button>
           <button class="tk-button__native ripple-effect shaped warning">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Success">
         <div class="examples__item" title="Success">
           <button class="tk-button__native ripple-effect shaped success">Button</button>
           <button class="tk-button__native ripple-effect shaped success">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Info">
         <div class="examples__item" title="Info">
           <button class="tk-button__native ripple-effect shaped info">Button</button>
           <button class="tk-button__native ripple-effect shaped info">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Primary">
         <div class="examples__item" title="Primary">
           <button class="tk-button__native ripple-effect shaped primary">Button</button>
           <button class="tk-button__native ripple-effect shaped primary">Shaped</button>
         </div>
         </div>


         <div class="examples__item" title="Disabled">
         <div class="examples__item" title="Disabled">
           <button class="tk-button__native ripple-effect shaped" disabled="disabled">Button</button>
           <button class="tk-button__native ripple-effect shaped" disabled="disabled">Shaped</button>
         </div>
         </div>
       </div>
       </div>
    </body>
    </body>
    </html>
    </html>

    Revision as of 20:54, 30 July 2019

    This page was created by Denis on 2019-07-30. Last edited by Stephanie on 2025-01-28.


    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

    Buttons

    Default buttons in MDriven Turnkey
    Outlined
    Oulined buttons in MDriven Turnkey
    Flat buttons in MDriven Turnkey
    Shaped buttons in MDriven Turnkey

    Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Turnkey_Styling&oldid=4276"

    © MDRIVEN. All Rights Reserved

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

    © MDRIVEN. All Rights Reserved

    MDriven Chat

    How would you like to chat today?

    Setting up your conversation…

    This may take a few moments