Drupal has witnessed a healthy growth over these years, with ample scope to expedite this growth. One way to achieve this is via a tool that makes the site creator’s life easy. A CMS platform should invariably be extremely user friendly and easy in maintaining as well as building. The wait is over! Cohesion DX8 is a site builder tool which allows a site maintainer/site configurator to create/maintain the site with low coding and more configuration.

Benefits of Cohesion 

1. Low code 
2. Highly configurable
3. Easy maintainable
4. Easily modifiable 
5. Highly scalable
6. Component-based driven
7. Less developer dependent

Cohesion

Cohesion DX8 provides a contributed module and theme which needs to be installed in Drupal, quite similar to the way we install other modules and themes. However, to use this service, it is required to purchase a cohesion package that provides us with an API Key, Agency Key, Site ID, and an API Server URL which needs to be inserted in the Account Settings form.

Here are the settings and key features of Cohesion DX8:

1. Website Settings
2. Style Settings
3. Components
4. Templates

Cohesion DX8 provides an in-site configuration form which takes care of your branding requirements. You can add your own branding elements like fonts, colours, icons, grid settings, SCSS variables, etc. directly onto the site. And there is absolutely no need to make any changes in the theme folder as well as the theme settings. Doesn’t this sound cool! Your basic frontend settings would be handy to you and you can modify it directly from the site without asking for help from a developer.

Website Settings

Style Settings

It’s not over yet, with Cohesion DX8 you can create/modify styles of a site. Cohesion DX8 provides settings to update the base style or to create custom styles. 

And this is how the default preview and configuration pane looks like.

Now let’s understand what comes under Base styling and Custom styling

Base styling - Styling which is going to be consistent throughout the site, e.g., font-size of body. Font formatting of Headings, Style of a button, style of link, etc.

Custom styling - Styling which will be different for each instance or as a variation of base style. E.g., Big button, Small button, Read More Link, Consistent layout related styles (Padding Top & Bottom Large, Padding Top & Bottom Small), Social icons theming, etc.

Let’s look at the example of CTA link styling.

• CTA style structure
  • Link styling
  • After pseudo-element styling
  • On hover pseudo-element styling
• Style properties required for CTA link and those properties are added in the config form through properties button on the top right corner of the styling pane
• Styling properties required for pseudo-element styling
• Styling properties required for pseudo-element after hover

Component Builder

Now let’s introduce the coolest feature of the Cohesion Dx8 -  a Component Builder. Cohesion Dx8 follows a complete component-based development approach. So, what is the component-based development approach? 

Cohesion Dx8 provides a list of elements. By using these elements even simple and complex components can be created and be made configurable by creating a component form. The amazing part is that everything can be built by mere drag and drop. Doesn’t it sound super user friendly?

Let’s look at an example of a Hero Component and figure out which elements could be part of this component?  Let’s create a list of elements(atoms).

• Hero Image
• Hero Title
• Hero Description
• CTA button

Let’s consider the below-displayed hero component that we are trying to achieve.

Based on the Hero component design, the hero component structure would look similar as described in the below image.

A component will be created which will have the above-mentioned elements. But what about styling? This is the real beauty of Cohesion Dx8. It allows us to create a base style as well as a custom style and those can be appended to the component. Doesn’t it sound fascinating?

Here would like to take you back to the styling part of the section where we have styled CTA link. Now, here in the above component CTA link element can directly assign the style which has been created under custom style. And as per image, styling can be appended to CTA Link element.

Layout

There are multiple ways to create different layouts. Here, with Cohesion DX8, the layout can be defined by a Layout Category component and also component dropzone element can be provided to add other components. 

Does it mean? Woah! Yes, it means nesting use of the component is also possible. I won’t provide the screenshot for this example right now.

Template

There are four main templates:

• Master Template
• Content Template
• Views Template
• Menu Template

The template names clearly state the use of each template, but, I am sure you must have some questions related to master templates. 

What will it hold? The thumb rule is, this template should be least modifiable, means, it should not be updated frequently. We can ensure this by using only consistent section/components/regions added to it.

I hope this blog was helpful to understand the basic outline of Cohesion Dx8. Stay tuned! We have an upcoming blog that will talk about the advanced usage of templates.