Low-code platforms have been been slowly gaining popularity in the Marketing stack of organisations. Low-code essentially means being able to assemble UI of your Digital experience visually and often without the need for a dedicated Development team. Webflow for Websites and Shopify for e-commerce are among the list of rising low-code platforms. These platforms help organisations become more agile and help enable various functions like Design, Marketing to come on board as Makers on the Digital experience. Today we will talk about Cohesion, a low code offering for Drupal websites by Acquia, we will discuss benefits and some of the paradigms that makes it an effective low code option in Drupal stack.
Drupal has witnessed a healthy growth over these years as a pillar for Enterprise Digital stack, Cohesion DX brings the DIY spirit to this stack. What more and more Marketers are looking for is quicker and cheaper ways to assemble landing pages and work out of a component library of Digital elements that are performant and consistent to the Design systems of the organisation. A low code approach to Drupal will only work if its aware of its capabilities & flexibility, that is what Cohesion brings on the table. Ability to apply Design systems on your Digital Experience built on Drupal, DIY!
Benefits of Cohesion
- Low code
- Highly configurable
- Easy maintainable
- Easily modifiable
- Highly scalable
- Component-based driven
- Less developer dependent
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:
- Website Settings
- Style Settings
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.
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
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.
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.
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.
P.S - If you want to learn more about Cohesion DX8, Acquia has a training and a full support guide - https://cohesiondocs.acquia.