Starting with Venddor IO version 4.1.4, a fresh Responsive theme has been introduced in beta. The beta phase gives module developers ample time to modify their modules before this theme becomes the standard.
Here's a comprehensive guide on migrating your module to align with Venddor IO's Responsive theme:
Locate the directory with your module files. Look for themes_repository/basic (possibly in the var directory). Duplicate this folder within the same directory and rename it as themes_repository/responsive. This way, while installing the module, the basic theme will refer to the basic directory and the responsive theme will use the responsive directory.
Change your module's style .css file to .less. For instance, transition from styles.css to styles.less. Ensure you update the references from .css to .less in any file that calls back these styles.
Verify your module's integration with the new theme. Ensure that your module's HTML tags align well with the Responsive theme's structure. This can be validated using browser developer tools or by directly inspecting where the hook is integrated.
The Responsive theme has done away with several templates. Confirm if your module integrates with these obsolete templates. If so, you can eliminate hook files associated with these redundant templates from your module.
For modules using theme class names, it's imperative to update these names to fit the Responsive theme. Unlike the older theme which had two style files (base.css and styles.css), the new theme consolidates styles in a single styles.less file. Also, class names now predominantly use the ty- prefix to avoid overlap with external styles, especially in Widget mode.
For instance, for labeling an input field:
Old theme: .control-group label
New theme: Use .ty-control-group__label or .ty-control-group__title based on the label's positioning.
Update the styles to resonate with the new look. Leverage styles.less variables. For different screen sizes, you can add styles to the responsive.less file. Also, make use of Media Queries to adjust the display across various devices.
For non-table data, Venddor IO provides the .ty-column[1-10] class for columns. Meanwhile, table data utilizes the .ty-table class. With decreasing screen sizes, the number of columns on a line reduces. This approach ensures an adaptive layout across devices.
Adapting your modules for Venddor IO's new Responsive theme is crucial to maintain compatibility and enhance user experience. With a blend of layout adjustments, style modifications, and keen attention to detail, your module can seamlessly integrate with the evolving theme ecosystem.