Cohesion UI Kit logo

Quick guide

Getting started with the Cohesion UI Kit.

    Step 1 - Download the UI Kit.

    The UI Kit is available as fully working components that can be used on a DX8 enabled Drupal 8 website. It's also available as a Sketch file for designers to use as a base for their project designs.

    Step 2 - Install DX8 on your website.

    The UI Kit for Drupal 8 is available for users of Cohesion DX8 5.4.0 and later. If you are using an earlier version, please upgrade to the latest version first.

    Before you import the UI Kit:

    1. Install the DX8 module.
    2. Enter your Cohesion DX8 API key.
    3. Enable the DX8 minimal theme.

    For more details on installing and enabling DX8, see our main user guide Creating a new website with DX8.

    New to DX8?

    If you’re new to DX8, you can find out more about the platform here and get a demo here.

     

    Step 3 - Enable DX8 sync on your website.

    To import the UI Kit you must first enable the DX8 sync module.

    1. Navigate to to Extend.
    2. Check the DX8 sync module.
    3. Click Install.

     

    Enable DX8 sync module

    Step 4 - Import the UI Kit.

    First, un-zip the UI Kit zip file. This will include a .yml file. This is what you will import. 

    To import the UI Kit:

    1. Navigate to Configuration > Development > DX8 package synchronization.
    2. Click the DX8 package import tab.
    3. Click Choose file.
    4. Select the Cohesion-UI-Kit.package.yml you downloaded in Step 1.
    5. Click Import.

    The UI Kit is approximately 7.5MB. Your server configuration will need to allow for files of this size to be uploaded.

    Import UI kit

    Step 5 - Using the UI Kit.

    You can use the Components library on any content entity that includes the DX8 layout canvas field. For a guide to adding the layout canvas field to  content types and other content entities, see Adding the layout builder to content entities on our main user guide.

    To use the components:

    1. Create a new node.
    2. Click the + button on the Layout canvas.
    3. At the top of the sidebar click on Elements and then select Components.
    4. The sidebar will then show all the components in the library.
    5. Drag some components onto the Layout canvas and click on Preview to see the result.

     

    Adding components to the layout canvas

     

    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.

    1. Navigate to DX8 > Components > Components.
    2. Click Edit next to one of the components in the list.

     

    Component library

     

    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.

    Component layout

     

    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.

     

    Component form

     

    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.

    Hide if no data menu