Denis Pupin (talk | contribs) |
Denis Pupin (talk | contribs) |
||
| Line 25: | Line 25: | ||
=== Buttons === | === 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.<html> | 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. | ||
=== Static text<html> | |||
<head> | <head> | ||
<script src="/extensions/style-system-presentation/ripple.js"></script> | <script src="/extensions/style-system-presentation/ripple.js"></script> | ||
| Line 174: | Line 176: | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> === | ||
Revision as of 09:27, 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.