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