Mapping the Design to Drupal Components

In the previous chapters, we saw how to start up a new (empty) Drupal theme, and we acquired a solid background in how Drupal builds the pages of a website.

Now, it’s time to look at the graphic layout deliverables (mockups) created for us by the design team.

We’ll talk about design systems and the tools used to build and share them with the rest of the team.

Next, we will examine our page layouts and the components that make them up.

Finally, we’ll see how those components map to Drupal and which data structure is used to represent them in the CMS.

In this chapter, we will cover the following main topics:

• What is a design system?
• Splitting mockups into components
• Mapping components to Drupal structures

What is a design system?

A design system is a collection of guidelines, principles, and components that is used to create a consistent visual language and user experience across multiple products or platforms. It provides designers and developers with a framework to work within, ensuring that each element of a product is cohesive and aligned with the overall brand and user needs. A design system typically includes things such as typography, color palettes, iconography, spacing, and layouts, as well as patterns and templates for frequently used UI elements. By using a design system, teams can reduce design and development time, improve collaboration, and create better, more user-friendly products. Additionally, design systems can help maintain brand identity and increase brand recognition since the visual language is consistent across all products and platforms.

Design tokens

Design tokens are fundamental building blocks of a design system. They are small, specific pieces of information...

Splitting mockups into components

Under the 05-pages folder inside storybook/stories, you can find a set of pages that we need to style on our website. All those pages already exist in the demo website; our job as frontend developers is to identify how they have been implemented and how to provide our custom HTML and CSS.

The home page

The home page, like any other page of the website, has a header and a footer.

On the header, we’ll find the website logo, the main menu, and the user menu.

On the footer, there is the name of the site, two sets of links that come from the Follow us and the Legal menus, a copyright notice, and some social media icons.

The main content of the page is composed of three components:

• A slider
• A set of three cards
• A list of media items, displayed in two columns

Figure 4.7 – The home page

Here are the components used on the home page :

• Header (with Logo, Menu, MenuItem, and...

Mapping components to Drupal structures

Now that we’ve analyzed all the components that have been designed for the demo site, the last step before starting with the implementation of the theme itself is mapping those components to the Drupal data structures.

Note

Some components are generic, and you can probably find them in all design systems. Some other components that you’ll find in the storybook/stories folder are specific to Drupal, and they allow us to build full pages in Storybook with markup as similar as possible to the one produced by Drupal. The good thing is that, once you’ve defined all those structural components in Storybook, you can reuse them on every Drupal website that you need to style.

Drupal is a complex system, and the same requirement (both graphical and functional) can be implemented in many different ways.

Looking at the provided mockups, we had to make choices. Which modules do we install? Which content types do we create...

Summary

In this chapter, we saw what a design system is and how to organize components in an atomic way.

We then talked about Storybook, the tool we chose to implement the design system that you, as a frontend developer, must follow to style the demo site.

We then explored all the full-page mockups that explain what the expected outcome of our work is.

Finally, we mapped some of the designed components to the structure present in the demo site.

We’re now ready to understand how to apply the design system, and by the end of Chapter 5, Styling the Header and Footer, our website will start to look a little bit prettier.