Over the last year, the Inclind Drupal web development team has restructured its approach to building websites with a focus on giving the end user a better experience in managing content and more flexibility in creating pages.

Our formula, and one that we are continuing to evolve is based on using the principles of atomic design to create the building blocks of a web page, building out elements in Pattern Lab, pulling over the patterns into Drupal and configuring them with the Gutenberg content editor. All of this helps streamline the design/build process while considering two audiences, the website visitor and the content manager, or in simpler terms, our clients and their customers.

Want to better understand this process and what it means for web development? We thought so. Let’s dive in.

Atomic Design
When you look at a website, you probably see a whole page of content, but take a closer look and you will see many parts to the page. A navigation, a button, a big image, a photo and caption, a form, or a news article teaser or a social media link — these are some of the elements that make up a web page. In atomic design, these elements are broken down into the smallest part, the base and atoms which are colors, typography, buttons, then molecules which are cards, alerts, accordions and teasers, these molecules are then grouped into organisms or bigger components like menus, headers and footers. Instead of the older model of designing a full linear page, a whole system is designed that defines all of the elements that will be assembled into a web page. This system also ensures consistency across elements so that the design is streamlined and doesn’t use excessive fonts or graphics.

Pattern Lab
Our front-end developers take this design system and build out Pattern Lab, which is the prototyping tool that, once built, serves as the web-based styleguide.

In Pattern Lab, you can interact with the elements and pages to see how they work responsively. You can test the designs on all devices and make adjustments efficiently. Pattern Lab provides a reference for how all the elements should look on the website, which makes it also useful for future design additions or changes.

Bringing it to Drupal
Once the Pattern Lab is complete, the back-end developer goes to work to build out the Drupal website. We use the tool Particle, released by Phase2, to bridge the gap between the patterns and Drupal. Once the front-end of the website and the back-end are connected, the pages are tested to fix any bugs or issues.

Using Gutenberg for Content Management
Gutenberg is a low-code content editor meaning there is minimal understanding of code required to use it. We first used Gutenberg in a Drupal 8 website for Delaware Electric Cooperative last year. The interface is block-based and gives editors more control in building pages with custom blocks, columns and rows. Out of the box, the system facilitates placement of videos, galleries, images, headings and paragraphs. While there is some learning curve to using this system, the Gutenberg content editor provides way more flexibility in page layouts and gives content managers the freedom to build really visual pages without relying on a designer or developer.

Interested in learning more about how to get a better content management experience in Drupal? Connect with us today.