A Design System ensures consistency in branding and UX across multiple sites/pages. The Experience Builder in Acquia Source can help you to maintain a centralized collection of styles and components. The Design System is managed within the Code Editor in the Experience Builder.
The following are the key elements of a Design System in the Experience Builder:
- Components: Reusable building blocks with predefined styles and functionality, such as example, buttons, cards, and forms.
- Global CSS: Centralized stylesheet to manage site-wide styles, such as typography, colors, and spacing.
Before you build a Design System, you must first plan it by defining your brand guidelines, such as colors and typography, identifying common patterns, and planning the structure of your component library. This planning phase ensures that your design system is well-organized, maintainable, and effective to meet your needs.
Experience Builder Code Editor¶
The following image illustrates the sections of the Experience Builder Code Editor with labels:
The following table describes the sections labelled in the preceding image:
Image label | Description |
|---|
A | The Component Library area includes components that are visible to content creators. |
B | The Code Components area includes components that are not promoted to the library because they are either not ready or are only being used to build other components. |
C | The JavaScript and CSS tabs to edit the JavaScript and CSS for this component. |
D | The Global CSS tab to edit the Global CSS across all components. |
E | The Add the components button to add the component to the Component Library so that content creators can use it. |
F | The Preview area to check the preview of the component. |
G | The right side bar that includes the Props and Slots tabs to specify props and slots for content creators to enter content using the visual editor. Props are displayed as fields on the right sidebar. Slots allow placing other components inside it. |