The author, Luca Lusso, is a Senior Drupal Developer, contributor and maintainer of popular modules such as WebProfiler and Monolog, and speaker at conferences like DrupalCon Europe and Drupal Developer Days. By the way, he works at SparkFabrik. His freshly published book Modernizing Drupal 10 Theme Development was designed as a comprehensive guide to creating Drupal themes from scratch, from design to fully styled websites with custom Twig templates and headless architecture. Read more.
Why this book?
Working with themes in Drupal can be challenging, given the number of layers and APIs involved. Modernizing Drupal 10, Theme Development helps you explore the new Drupal 10’s theme layer in depth.
With a fully implemented Drupal website on the one hand and a set of Storybook components on the other, you will begin by learning to create a theme from scratch to match the desired final layout.
Once you have set up a local environment, you’ll get familiarized with design systems and learn how to map them to the structures of a Drupal website. Next, you will bootstrap your new theme and optimize Drupal’s productivity using tools such as webpack, Tailwind CSS, and Browsersync. As you advance, you will delve into all the theme layers step-by-step, starting from how Drupal builds an HTML page to where the template files are and how to add custom CSS and JavaScript. You will also discover how to leverage all the Drupal APIs to implement robust and maintainable themes without reinventing the wheel but by following best practices and methodologies. Toward the end, you will learn how to build a fully decoupled website using json:api and Next.js.
By the end of this book, you will be able to confidently build custom Drupal themes to deliver state-of-the-art websites and keep ahead of the competition in the modern front-end world.
Thus, what will you learn from reading the book Modernizing Drupal 10 Theme Development?
- Map design systems made by Storybook components to Drupal structures
- Understand and use render arrays and Twig templates
- Get familiarized with the new Single Directory Component feature introduced in Drupal 10.1
- Define, import, and use CSS and JavaScript libraries
- Discover how to style content created with fields and paragraphs
- Define, place, customize, and style blocks
- Explore advanced topics like extending Twig, making a theme configurable, and boosting performance and accessibility
- Find out how to build a decoupled website using json:api and Next.js
- Build responsive and faster Drupal websites with custom theme design to deliver rich user experience
What does the book Modernizing Drupal 10 Theme Development cover?
If this article has not been enough up to now, here is a juicy sneak peek.
Chapter 1 - Setting Up a Local Environment, guides you to set up an opinionated local environment to work with Drupal. You will 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 front end.
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 will 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 will 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 will 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 will 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 will 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 will 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 will 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 will 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 will learn how to install and configure a Next.js instance to build a fully decoupled site.
If you are a Drupal back-end developer or front-end developer who wants to create Drupal themes that follow industry best practices and are fast and maintainable, this book is for you. Basic knowledge of HTML, CSS, and JavaScript and working knowledge of a CMS are needed to grasp the concepts present in this book. Get your copy!
Written bySparkFabrik Team
