We are thrilled to announce the release of a powerful new feature in Betty Blocks: Unified Component Styling. This enhancement empowers builders to precisely style their components, providing greater control and flexibility in design.
Key Features
- Custom CSS Properties: Easily add any CSS property to a Betty Blocks default component. Specify both the key and the value to tailor the appearance of your components exactly to your needs.
- Save and Reuse Styles: Create groups of CSS properties, save them as a 'style', and apply these styles to multiple components. This promotes consistency and efficiency across your applications.
- Integration with Custom Components: Low-code developers can incorporate the unified component styling feature into custom-developed components, ensuring a seamless experience across all component types.
.png?width=3828&height=2060&name=image%20(40).png)
Impact
- Default Betty Blocks components: New components dragged onto the page will have the unified component styling feature enabled by default. Users will find a new 'styles' tab in the component options sidebar for these components.
- Instructions for use:
- Simply drag and drop a new default component onto your page.
- Navigate to the 'styles' tab in the component options sidebar to begin customizing your component's CSS properties.
- Instructions for use:
- Existing components: Unified component styling is not by default available for all existing components on your canvas. To use styling, replace your current component with a new one from our default set.
- Recent versions of existing components: For recent versions of components (depending on the version you’ve used) an update button will be available in the styling tab, which, once used, enables the component styling feature.
- Instructions for use:
- Select the existing component on your page.
- Open the 'styles' tab in the options sidebar.
- Click the update button to enable the component styling feature
- Customize the component using the available CSS properties.
- Instructions for use:
Documentation
Read the documentation about unified component styling to learn more.
Up next
-
- Permissions for unified component styling: Role-based application permissions for unified component styling will be added within a few weeks.
- Styling States: Currently, styling states (such as on hover) are not supported. We understand the importance of this functionality. However, we do not have a specific timeline for when this feature will be available. We appreciate your patience and will keep you updated on any developments.
This new feature represents a significant step forward in empowering builders to create visually cohesive and professionally styled applications with ease. Enjoy the enhanced styling capabilities and the increased control over your component designs!
