Turnkey Styling
Denis Pupin (talk | contribs) (→Button) |
Denis Pupin (talk | contribs) |
||
| Line 25: | Line 25: | ||
=== Buttons === | === Buttons === | ||
<html> | |||
<head> | |||
<script src="/extensions/style-system-presentation/ripple.js"></script> | |||
<link ref="stylesheet" href="/extensions/style-system-presentation/style.css"></script> | |||
</head> | |||
<body> | |||
<h4 class="examples-header">Buttons</h4> | |||
<h6 class="examples-desc">Default buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Oulined buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect outlined danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect outlined warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect success outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect info outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect primary outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect outlined" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Flat buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect flat">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect flat danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect flat warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect flat success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect flat info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect flat primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect flat" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Shaped buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect shaped">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect shaped danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect shaped warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect shaped success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect shaped info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect shaped primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect shaped" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
Revision as of 20:49, 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