Step 6 - Adapting the UI Kit.
The UI Kit has been designed and built to be adapted easily using Cohesion DX8's low code development interfaces. For detailed user guides on using DX8 for site building see our main user guide.
For a quick guide to adapting the UI Kit components, refer to the information below.
Accessing the component library.
- Navigate to DX8 > Components > Components.
- Click Edit next to one of the components in the list.
Editing a component layout.
The layout of each component is created at the top of the Component builder (Shown below). You can add, remove and rearrange the layout.
- To add elements, click the (+) button.
- To remove elements, click the (...) button on the element and click Delete.
- To rearrange the layout, click and drag the element.
- To edit the settings of an element, click the (...) button on the element and click Edit.
The components in the library all use common Layout custom styles (CSS classes). These provide consistent and centrally managed classes for styles including; paddings, margins, heights and widths. Using these custom styles will help you manage the component library more efficiently. To access them Navigate to DX8 > Styles > Custom styles > Open the Layout accordion.
Editing a component form.
The form which content authors will use to edit a components content is located below the component layout. You can add, remove and rearrange the fields in the form.
- To add form elements, click the (+) button on the Component form builder and drag on a field.
- To remove form elements, click the (...) button on the form element and click Delete.
- To rearrange the form layout, click and drag the form element.
- To edit the settings of a form element, click the (...) button on the form element and click Edit.
If you remove a field from the form you should also remove its token from the element on the layout canvas. Some tokens are also applied on the element within the 'Hide if no data' feature. Click on the (...) button at the top of the elements settings and select 'Hide if no data' as shown in the screen shot below. If a token is being used, you should remove it and toggle off this feature. If you don't, the element will not render in your layout.