Styling¶
Usage of Element Design by Bayer¶
In HortiView, we use Bayer's element library as a foundational component and styling library.
The element library provides a set of components and styles that are used across the platform. When developing a module, you should use the element library to ensure a consistent look and feel across the platform.
To configure the usage of the element library, you can follow the instructions in the Element Design Guide.
Shared Components
We also provide so-called "Shared Components," which are frontend React components used within HortiView and Bayer modules.
This library is publicly available and can be utilized for your module as well: @hortiview/shared-components
Avoiding global styles¶
Due to module federation, you need to ensure that you do not alter any global styles of the element library, as this would affect the general styling of the element design system, which HortiView requires.
To avoid this, you could try using CSS Modules or similar approaches that encapsulate styles within your module only.
If you're unsure how to use CSS Modules, you can consult the documentation for Next.js1 or create-react-app2.
Avoid global styles
With module federation, your solution is dynamically loaded and embedded into HortiView at runtime. Using any global code, such as global styles or overwriting global style variables from frameworks like Element, may break the main application.
If such issues are detected during the review process, your module will be rejected. We strongly encourage you to use local styles for your solution/components.
Instead, use scoped styles, CSS Modules, or CSS-in-JS solutions to contain styles within the relevant components.
Module padding¶
Our platform provides per default a padding of 0px on module pages to enable the possibility of developing fullscreen views.
Strong recommendation
If your module does not require any fullscreen features, we highly encourage you to add the following padding around your module content to ensure a consistent user experience within the rest of the platform:
- Desktop: 16px
- Mobile/Tablet: 8px
If you are a React developer, you can use the ModulePadding component from HortiView Shared Components to add the padding to your module. It will take care of setting the padding based on the viewport size.
The following screenshot shows the Season Management module with a desktop padding of 16px:
Health check screens¶
See the Health Check Screens guide for more information on how to style your module's health check screens.