Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Modernizing Drupal 10 Theme Development
Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development: Build fast, responsive Drupal websites with custom theme design to deliver a rich user experience

eBook
€20.99 €23.99
Paperback
€29.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Modernizing Drupal 10 Theme Development

Setting up a Local Environment

Do you have a Drupal website you need to style? Or maybe it uses a default layout and the result is not what you want?

Drupal splits the management of content and how it is presented on a page in a very precise way. You can have the same content presented with very different layouts.

The layer of Drupal that manages layout and style is called a theme. The aim of this book is to teach you what the theme layer is, how it works, and how to leverage it to style content the way you want.

To get started, you need an environment where you can do your work. You can choose between your local machine or some remote service; in both cases, you will need a way to run a PHP interpreter, a web server, and a database server.

You will also need a code editor that supports working on different kinds of files—such as PHP, CSS, JavaScript, and YAML—and that is advanced enough to help you navigate through the project, write new code, and debug existing code.

In this chapter, we’ll set up that environment.

We will cover the following topics:

  • Installing the required software
  • Installing the demo site
  • Exploring the demo site
  • Disabling production optimization

Technical requirements

Which software to use to run a project locally can be a matter of taste or a best practice enforced by a team (or an organization). In this section, we’re going to install a selection of software that is free (at least for personal use) and, if possible, open source.

The following selection is not mandatory but it will simplify reading the rest of the book because all the screenshots and examples are based on the platforms mentioned.

Git

Git is a distributed version control system that helps developers manage their source code changes over time. It tracks changes in code and allows multiple developers to collaborate on a project simultaneously. Git allows developers to work on their own copy of the code, experiment with different changes, and merge those changes back into the main code base when they're ready. It also allows for backup and recovery of code in case of system crashes or data loss. Git is widely used in software development and other collaborative projects.

The code used in this book is hosted in a Git repository provided by a company called GitHub. From that remote repository, you can obtain (clone) a copy of the code. A Git client is available by default on Linux and macOS systems; on Windows, you must use the WSL 2 subsystem.

You usually interact with Git using the command line, but different tools exist to provide a graphical user interface (one of these is Visual Studio Code, which we’ll install later).

Docker

Docker is a technology used to replicate the same software stack everywhere, independently of the host operating system. This is mandatory to keep consistency between all the developers in a team who may individually use different operating systems. Docker is also useful for replicating as much as possible the configuration of the production environment or having multiple stacks on the same local machine, each one with different software versions and configurations. Maybe you’re working on an old Drupal 7 website that requires PHP 7.*, and a shiny new Drupal 10 website that requires PHP 8.1.

Docker can be installed in different ways, but here we’ll use the simplest one: Docker Desktop.

Docker Desktop is a commercial application developed by the Docker team itself and it’s free for use unless you’re in a large enterprise (more than 250 employees or more than 10 million USD in annual revenue) or some government entity.

Detailed instructions on how to install it can be found at https://docs.docker.com/get-docker/. In the next examples, we’ll use macOS, but the setup and usage are the same on Windows and Linux.

After the installation, you may need to set up Docker Desktop to match your system. Here’s how to do that:

  1. To run Docker, simply click on its icon in the applications list. Once it's up and running, you'll see the Docker icon appear on the top right of your screen. Clicking on the icon will open a menu where you can easily check if Docker Desktop is running smoothly or if there are any issues to address.
Figure 1.1 – Docker Desktop menu

Figure 1.1 – Docker Desktop menu

  1. Click on the Preferences link to open the Preferences window.
  2. Click on the Resources | Advanced section to tweak how many of your system resources Docker can consume. On the right pane, you can select how many CPUs and how much memory, swap, and disk size Docker can use:
Figure 1.2 – The Advanced section of Docker Desktop

Figure 1.2 – The Advanced section of Docker Desktop

In this case, I’ve set my system to grant Docker up to 4 CPUs and 12 GB of memory. Usually, you’ll want to choose half of the resources of your system.

  1. Click on the Resource | File sharing section to configure which directories can be bind-mounted into Docker containers:
Figure 1.3 – The File sharing section of Docker Desktop

Figure 1.3 – The File sharing section of Docker Desktop

In a production environment, you will have a Docker image that contains both the PHP interpreter and the code of the website, but in a local environment, to speed things up, the code stays on the host (your local machine) and is then mounted (made accessible) to the Docker container using a volume. Docker Desktop allows only for a subset of your computer filesystem to be mounted to a Docker container (for security and performance); you can set which directory to include in the File sharing section of the Preferences pane. The /Users directory is included by default, so you can just clone the demo repository somewhere inside this folder.

To be sure everything is clear, here you can find a list of base Docker concepts as a reference:

  • Docker engine: The core system that allows you to build and run containers.
  • Image: Contains a list of instructions used to build a container.
  • Container: This is the executable image that contains everything needed to run an application.
  • Volume: This is the system used by Docker to persist a container’s data between executions. So, container data stored in a volume will be preserved even if the container itself is stopped or removed. Furthermore, the same volume can be attached to multiple containers.
  • Compose: This is a tool that allows a set of containers to work together in the same network.

To run a Drupal website, we need at least two containers—one with a web server and one with a database server. Other containers can be useful during development, such as one to explore the database data and one to catch sent emails (for debugging purposes).

Of course, you can set up your stack from scratch, choose which images to use (or build some custom ones), configure them, find a way to orchestrate them, and so on. Because this is a book on Drupal and not Docker, we’ll use a tool that does everything we need for free.

DDEV

DDEV is an open source tool to speed up local PHP development. It uses Docker to configure and run everything that is required to work on a Drupal (or other PHP-based) website. It also provides a lot of commands to interact with the stack.

DDEV configurations can be added to Git and shared with all developers in the team. In this way, whoever clones and spins up the project will have exactly the same environment.

Again, the installation procedure depends on your computer's operating system. You can find all the details on the project website: https://ddev.readthedocs.io.

Note

Pay attention to the installation procedure—one required step is about installing and configuring mkcert (https://github.com/FiloSottile/mkcert). mkcert allows you to visit any DDEV-managed website using HTTPS just as it will be in production.

DDEV doesn’t have a graphical interface; everything is managed through the command line. To see a list of all available DDEV commands, you can simply type ddev on your terminal:

ddev

The demo code you’ll download in the next section contains a ready-to-use DDEV setup, located in the .ddev folder in the root of the repository.

Visual Studio Code

More than just a code editor, we need a full IDE to support our work with different kinds of files. Here, we have a lot of choices, which are mainly driven by personal taste and budget. One IDE that is free but very powerful is Visual Studio Code.

Visual Studio Code is a free application that runs nearly everywhere, from every operating system through the web (it’s the IDE that powers https://github.dev and https://www.gitpod.io, for example).

Note

You can find detailed instructions about how to download and install Visual Studio Code at https://code.visualstudio.com/docs.

Visual Studio Code's features can be enriched by installing extensions; we’ll need some of them to speed up our work, including the following:

  • PHP Intelephense
  • PHP Debug
  • Tailwind CSS IntelliSense
  • Twig Language 2
  • Prettier (a code formatter)

To install an extension, follow these steps:

  1. Open Visual Studio Code.
  2. Click on the View | Extensions menu item to open the extensions view.
  3. Use the search engine to find the extension to add.
  4. Click on the Install button under the extension name in the right pane:
Figure 1.4 – PHP Intelephense is one of the most complete plugins for working on PHP with Visual Studio Code

Figure 1.4 – PHP Intelephense is one of the most complete plugins for working on PHP with Visual Studio Code

Our local stack is ready to be used. In the next section, we’ll use it to set up and run the demo website.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore real-world examples with proven methodologies to gain a deeper insight into the Drupal theme layer
  • Learn how to translate a graphic design into a maintainable and robust Drupal theme
  • Improve performance and accessibility with a decoupled frontend to consume data exposed by Drupal’s APIs
  • Purchase of the print or Kindle book includes a free PDF eBook

Description

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’ll begin by learning to create a theme from scratch to match the desired final layout. Once you’ve 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’ll bootstrap your new theme and optimize Drupal’s productivity using tools such as webpack, Tailwind CSS, and Browsersync. As you advance, you’ll delve into all the theme layers in a step-by-step way, starting from how Drupal builds an HTML page to where the template files are and how to add custom CSS and JavaScript. You’ll 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’ll find out how to build a fully decoupled website using json:api and Next.js. By the end of this book, you’ll be able to confidently build custom Drupal themes to deliver state-of-the-art websites and keep ahead of the competition in the modern frontend world.

Who is this book for?

If you are a Drupal backend developer or frontend 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.

What you will learn

  • 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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 31, 2023
Length: 360 pages
Edition : 1st
Language : English
ISBN-13 : 9781803249025
Languages :
Concepts :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Aug 31, 2023
Length: 360 pages
Edition : 1st
Language : English
ISBN-13 : 9781803249025
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total €71.96 €80.97 €9.01 saved
Modernizing Drupal 10 Theme Development
€29.99
Drupal 10 Development Cookbook
€37.99
Drupal 10 Module Development
€33.99
Total €71.96€80.97 €9.01 saved Stars icon

Table of Contents

20 Chapters
Part 1 – Styling Drupal Chevron down icon Chevron up icon
Chapter 1: Setting up a Local Environment Chevron down icon Chevron up icon
Chapter 2: Setting a New Theme and Build Process Chevron down icon Chevron up icon
Chapter 3: How Drupal Renders an HTML Page Chevron down icon Chevron up icon
Chapter 4: Mapping the Design to Drupal Components Chevron down icon Chevron up icon
Chapter 5: Styling the Header and the Footer Chevron down icon Chevron up icon
Chapter 6: Styling the Content Chevron down icon Chevron up icon
Chapter 7: Styling Forms Chevron down icon Chevron up icon
Chapter 8: Styling Views Chevron down icon Chevron up icon
Chapter 9: Styling Blocks Chevron down icon Chevron up icon
Chapter 10: Styling the Maintenance, Taxonomy, Search Results, and 403/404 Pages Chevron down icon Chevron up icon
Part 2 – Advanced Topics Chevron down icon Chevron up icon
Chapter 11: Single Directory Components Chevron down icon Chevron up icon
Chapter 12: Creating Custom Twig Functions and Filters Chevron down icon Chevron up icon
Chapter 13: Making a Theme Configurable Chevron down icon Chevron up icon
Chapter 14: Improving Performance and Accessibility Chevron down icon Chevron up icon
Part 3 – Decoupled Architectures Chevron down icon Chevron up icon
Chapter 15: Building a Decoupled Frontend Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.1
(19 Ratings)
5 star 63.2%
4 star 15.8%
3 star 0%
2 star 5.3%
1 star 15.8%
Filter icon Filter
Top Reviews

Filter reviews by




Matt Glaman Sep 26, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Don't let the title make you think it is about theme development. The book provides excellent coverage of general Drupal knowledge, so much so that I highly recommend this book as a go-to resource for any frontend or full-stack developer new to Drupal. I recommend it for any backend developer working on a large team so that they understand the work their frontend colleagues are performing and how to assist them best.I enjoyed the flow of the chapters. Reading this book made me think back to when I had my first job building websites, which was primarily front-end development. The book takes you down the journey of a developer tasked to implement a design onto a Drupal site.There is a starting code base that you clone down and work with throughout the book. This felt natural for how build phases may work: backend developers or site builders scaffold the site, and then it is themed.The book begins with onboarding the reader to create a local environment, using the demo code base, some basics of how Drupal works, and how to create a new theme. Then, it dives into styling individual landing pages and components—each step along the way, the book layers in more Drupal knowledge alongside theming implementation.
Amazon Verified review Amazon
Jamie V. Feb 23, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I'm not sure I was expecting as much from this book as I'm discovering it has to offer. I'm more of a backend guy but this book has me absorbed. It takes you from the basics of installing the site to configuring it for local development to summarizing available theme options, and then helping you become a well rounded themer. Very glad I got this book.
Amazon Verified review Amazon
doug vann Oct 04, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
tldr; No matter your current experience with Drupal Theming, after going through the straight-forward examples, you will be a confident Drupal Themer!The opening line of the Preface is brutally honest, "Working with themes in Drupal is not an easy task, and it is typical to get lost digging through all the layers and APIs involved."This is especially true for those like me who never did take the time to fully understand Drupal Theming once we switched to TWIG. I have a lot to learn!I found the language and pace of the book to be excellent and the instructions very thorough and contextualized. Following along is quite smooth. The extra bits of relevant facts is always appreciated!The 1st chapter is a truly helpful explanation on setting up DDEV with the book's Demo Site. This is SO VALUABLE! Following along with a real site is absolutely essential for understanding these concepts.After that you are on the open road to understanding Drupal 10 Theming by starting to build your own Bootstrap3 based theme.The "Building a Decoupled Frontend" chapter was especially valuable to me. As in all preceding chapters, the instructions to DIY are pleasantly detailed and include side-bar nice-to-knows to represent when the scope of the current action could be different under dynamic circumstances.
Amazon Verified review Amazon
Jason Bugiada Oct 23, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The book begins by introducing the concept of design systems and explaining how to map them to the structures of a Drupal website. It then covers all aspects of Drupal theme development, from creating a theme from scratch to theming blocks, fields, and paragraphs. The book also includes chapters on advanced topics such as extending Twig, making a theme configurable, boosting performance and accessibility, decoupled theming, and integration with Storybook.A few things I like about the book:The author walks you through the setup of a local development environment using DDEV. He walks you through creating a new theme with Starterkit. The author gets in detail on how Drupal renders an HTML page. He also walks you through setting up Single Directory Components and how to map them to storybook.Overall, I highly recommend Modernizing Drupal 10 Theme Development to anyone who wants to learn how to build modern Drupal themes.
Amazon Verified review Amazon
Pooja Pundir Oct 06, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I recently started reading this book, and although I haven't finished it yet, I wanted to share my initial impressions. The book starts with setting up a local environment using DDEV, which is quite unique in the sense that I see it mostly at the end in other books. This is quite useful when you want to gain practical experience from day one. Based on my reading so far, it seems that this book is useful for all types of Drupal developers. It covers all aspects of Drupal and is not limited to just theme development.However, this may seem confusing to those who have no prior experience with Drupal development. Overall, it's a great book. Kudos to its author.I plan to continue reading and will update my review after I finish the book.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.