Turnkey Styling
Denis Pupin (talk | contribs) |
Denis Pupin (talk | contribs) |
||
| Line 109: | Line 109: | ||
<div class="examples"> | <div class="examples"> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat"> | ||
<button class="tk-button__native ripple-effect flat">Flat</button> | <button class="tk-button__native ripple-effect flat">Flat</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat danger"> | ||
<button class="tk-button__native ripple-effect flat danger">Flat</button> | <button class="tk-button__native ripple-effect flat danger">Flat</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat warning"> | ||
<button class="tk-button__native ripple-effect flat warning">Flat</button> | <button class="tk-button__native ripple-effect flat warning">Flat</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat success"> | ||
<button class="tk-button__native ripple-effect flat success">Flat</button> | <button class="tk-button__native ripple-effect flat success">Flat</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat info"> | ||
<button class="tk-button__native ripple-effect flat info">Flat</button> | <button class="tk-button__native ripple-effect flat info">Flat</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="flat primary"> | ||
<button class="tk-button__native ripple-effect flat primary">Flat</button> | <button class="tk-button__native ripple-effect flat primary">Flat</button> | ||
</div> | </div> | ||
| Line 141: | Line 141: | ||
<div class="examples"> | <div class="examples"> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped"> | ||
<button class="tk-button__native ripple-effect shaped">Shaped</button> | <button class="tk-button__native ripple-effect shaped">Shaped</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped danger"> | ||
<button class="tk-button__native ripple-effect shaped danger">Shaped</button> | <button class="tk-button__native ripple-effect shaped danger">Shaped</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped warning"> | ||
<button class="tk-button__native ripple-effect shaped warning">Shaped</button> | <button class="tk-button__native ripple-effect shaped warning">Shaped</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped success"> | ||
<button class="tk-button__native ripple-effect shaped success">Shaped</button> | <button class="tk-button__native ripple-effect shaped success">Shaped</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped info"> | ||
<button class="tk-button__native ripple-effect shaped info">Shaped</button> | <button class="tk-button__native ripple-effect shaped info">Shaped</button> | ||
</div> | </div> | ||
<div class="examples__item" title=" | <div class="examples__item" title="shaped primary"> | ||
<button class="tk-button__native ripple-effect shaped primary">Shaped</button> | <button class="tk-button__native ripple-effect shaped primary">Shaped</button> | ||
</div> | </div> | ||
Revision as of 08:36, 31 July 2019
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
Out of the box in MDriven Turnkey you have the default button styles, but you can modify it with the predefined Modifier-classes. To style your buttons add the modifier classes to style-reference in your viewmodel column. Find out all predefined modifier classes for the buttons, below.
Default buttons in MDriven Turnkey
Generic modifier classes for the buttons:
- danger
- warning
- success
- info
- primary (applies primary color of your application)
Oulined buttons in MDriven Turnkey
Flat buttons in MDriven Turnkey
Shaped buttons in MDriven Turnkey
This page was edited 36 days ago on 03/26/2024. What links here