What this book covers
Chapter 1, Setting Up a Local Environment, guides you to set up an opinionated local environment to work with Drupal. You’ll learn how to install and configure some tools such as Docker, DDEV, and Visual Studio Code. We’ll then clone a Git repository, install Drupal, and set up the system to start working on the frontend.
Chapter 2, Creating a New Theme and Setting Up a Build Process, starts by discussing building a new theme instead of using a ready-to-use one. You’ll learn what a starter kit is and how to use it to generate a new theme. Finally, we set up some processes to enforce coding standards, both locally and in a continuous integration pipeline.
Chapter 3, How Drupal Renders an HTML Page, talks about the rendering pipeline of Drupal. You’ll learn everything you need to know about how Drupal turns its internal data structures into HTML pages, with CSS and JavaScript attached.
Chapter 4, Mapping the Design to Drupal Components, explains how to develop the design system. We’ll step away from Drupal briefly to talk about how to split pages into components and how to use tools such as Storybook to work on templates, before setting up a Drupal instance. Subsequently, we will map each component to a data structure in Drupal.
Chapter 5, Styling the Header and Footer, examines the layout that stays the same on every page. In this chapter, you’ll learn about regions and blocks, how to override a core template to provide your own, and how to style a Drupal menu.
Chapter 6, Styling the Content, digs into the main part of a Drupal page, the content. We’ll talk about entities and fields, media, and taxonomies. You’ll learn some different ways to structure content in Drupal and how to customize the WYSIWYG editor.
Chapter 7, Styling Forms, explores how forms work on a Drupal site. You’ll learn how a form is structured, which templates it uses, and how to override and style them. We’ll then use the acquired knowledge to style the user login form.
Chapter 8, Styling Views, discusses one of the most complex topics in Drupal core. The Views module is as powerful as it is difficult to understand and style. We’ll talk about Views templates, exposed filters, and pagers.
Chapter 9, Styling Blocks, details how to style the parts of a page that aren’t the main content. You’ll learn the differences between editorial and programmatic blocks and how to style titles and breadcrumbs.
Chapter 10, Styling Maintenance, Taxonomy, Search Results, and 403/404 Pages, discusses a set of pages that sometimes are overlooked but that provide a great level of professionalism if styled correctly.
Chapter 11, Single Directory Components, digs into one of the new features of Drupal. We’ll discuss how Drupal core implements the concept of components and how to leverage it to rebuild some of our templates using the new approach. You’ll learn how to use and override components and expose them to Storybook.
Chapter 12, Creating Custom Twig Functions and Filters, explains how to extend Twig. You’ll learn how to define a new function and a new filter for Twig and why this is the best way to move the business logic away from the theme layer.
Chapter 13, Making a Theme Configurable, explores how Drupal allows you to reuse the same theme on different websites by making it configurable. We’ll also talk about sub-theming and how and when it’s helpful to define a sub-theme.
Chapter 14, Improving Performance and Accessibility, discusses optimizations. You’ll learn how to improve the performance of your website and how to make it as accessible as possible, as your users deserve.
Chapter 15, Building a Decoupled Frontend, scratches the surface of one of the most hyped topics in recent years. We’ll talk about how to leverage Drupal APIs to expose content and configuration to third-party systems and how to write some simple JavaScript clients to consume that data. You’ll learn how to install and configure a Next.js instance to build a fully decoupled site.