Form Stylesheet¶

Emakin forms support custom styling through cascading style sheets (CSS), enabling developers to create visually appealing and customized user interfaces. By defining styles in a stylesheet, developers can style form widgets, containers, and other interface elements.

CSS Framework: SASS Integration¶

Emakin uses SASS, a CSS preprocessor that provides advanced features such as variables, nesting, and mixins, making CSS code more efficient and maintainable.

Example: Custom Style Definition¶

1
2
3
4
5

.my-section-container {
    .my-control {
        color: red;
    }
}

Best Practices for Styling Forms¶

To ensure a consistent and conflict-free design, follow these best practices when customizing form styles:

• Use SASS Features:
  • Leverage variables, nesting, and mixins for cleaner and reusable CSS code.
• Define Common Styles:
  • Use variables for common properties such as colors, fonts, and sizes to ensure consistency.
• Apply Custom Classes:
  • Assign custom CSS classes using the HtmlClass attribute on form widgets for targeted styling.
• Avoid Default Class Conflicts:
  • Refrain from directly referencing Emakin’s predefined classes such as ui-* or ak-* to prevent conflicts with built-in styles.

Customization Flexibility¶

By combining SASS capabilities with Emakin’s widget configuration, developers can achieve a tailored user experience while maintaining compatibility with the platform’s default style framework.