Optimize your theme's performance by:

SDC allows you to keep all files for a component in one folder:

Modernizing Drupal 10 Theme Development: A Guide to Best Practices

As Drupal 10 continues to evolve, theme development has become a crucial aspect of building robust, scalable, and visually stunning websites. In this post, we'll explore the latest best practices for modernizing Drupal 10 theme development, with a special focus on PDF resources to help you get started.

Why Modernize Your Drupal Theme Development?

With the release of Drupal 10, it's essential to ensure your theme development skills are up-to-date. Modernizing your approach will help you:

Key Concepts in Modern Drupal 10 Theme Development

To get started, familiarize yourself with these essential concepts:

PDF Resources for Modern Drupal 10 Theme Development

Here are some valuable PDF resources to help you modernize your Drupal 10 theme development skills:

Best Practices for Modern Drupal 10 Theme Development

To ensure your theme development skills are up-to-date, follow these best practices:

Conclusion

Modernizing your Drupal 10 theme development skills is essential for building fast, secure, and scalable websites. By leveraging the latest technologies, techniques, and PDF resources, you'll be well on your way to creating stunning, user-friendly themes that meet the needs of your clients and users.

Share Your Thoughts!

What are your favorite resources for modern Drupal 10 theme development? Share your experiences, tips, and favorite PDF resources in the comments below!

Modernizing Drupal 10 theme development marks a shift from monolithic, backend-heavy styling to a component-driven, frontend-first approach. By leveraging new core tools like the Starterkit and Single Directory Components (SDC), developers can create faster, more maintainable websites that align with modern web standards. 1. Bootstrapping with the Starterkit Theme

In previous versions, developers often used "Classy" or "Stable" as base themes. Drupal 10 introduces the Starterkit theme, which allows you to generate a standalone theme folder using a command-line tool. Unlike traditional sub-theming, this "forks" the base theme, ensuring that future Drupal core updates won't inadvertently break your custom CSS or templates.

To create a new theme using the starterkit, run:php core/scripts/drupal generate-theme my_new_theme. 2. Adopting Single Directory Components (SDC)

Introduced in Drupal 10.1, Single Directory Components (SDC) centralizes all assets for a specific UI element—such as a card, button, or hero banner—into a single folder. This folder typically contains: component.xml or component.yml for metadata. component.twig for the markup. component.css and component.js for styling and behavior.

This structure eliminates the need to hunt through global libraries.yml files, as Drupal automatically discovers and loads the assets when the component is rendered. 3. Integrating Tailwind CSS and Vite

Modern workflows often replace traditional Sass/Gulp setups with utility-first frameworks like Tailwind CSS and fast build tools like Vite.

Tailwind CSS: Provides utility classes that reduce the need for writing custom CSS, promoting consistency and reducing file sizes through tree-shaking.

Vite: Offers near-instantaneous hot module replacement (HMR), allowing developers to see style changes in the browser without a full page refresh. 4. Component-Driven Design with Storybook

To bridge the gap between design and development, many teams use Storybook to build and test components in isolation before they are integrated into Drupal. By mapping Storybook components directly to Drupal's SDCs, you ensure that the frontend "source of truth" remains consistent across both platforms.

For modernizing Drupal 10 theme development, the most comprehensive and direct resource is the book Modernizing Drupal 10 Theme Development by Luca Lusso

, published by Packt. It specifically covers modern workflows like Single Directory Components (SDC), mapping design systems, and using modern build tools. Top PDF & Post Resources Modernizing Drupal 10 Theme Development (PDF/eBook)

: This is the definitive guide for modernizing your theme workflow. It covers: Starterkit theme instead of old base themes like Classy. Implementing Single Directory Components (SDC) to group Twig, CSS, and JS together. Setting up modern build processes with Docker/DDEV Free Sample Chapter GitHub Code Repository

Drupal 10+ Theming - How to Convert an HTML Template (PDF Guide)

: A practical, step-by-step guide for developers needing to transform static HTML/Bootstrap templates into functional Drupal 10 themes. Drupal 10 Development Cookbook (PDF)

: While broader than just theming, it includes critical modern environment setup tips, such as using Key Modernization Techniques to Look For

To stay up-to-date with Drupal 10 standards, ensure your reading covers these specific "modern" shifts: PacktPublishing/Modernizing-Drupal-10-Theme-Development

To modernize Drupal 10 theme development, your strategy should shift from traditional "page-based" theming to a component-driven approach. This transition leverages core features like Single Directory Components (SDC) and modern build tools like Vite and Tailwind CSS to create faster, more maintainable websites . 1. Key Pillars of Modern Drupal Theming

Single Directory Components (SDC): Introduced in Drupal 10.1, SDC allows you to bundle all assets (Twig, CSS, JS, and metadata) in one folder . This reduces "template scattering" and makes components easier to reuse and debug .

Vite & Tailwind CSS: Replace older build systems (like Webpack or Gulp) with Vite for lightning-fast hot module reloading. Use Tailwind CSS for utility-first styling that keeps CSS bundles small and scalable .

Starterkit Theme: Use the Starterkit tool instead of sub-theming Classy or Stable. It generates a standalone theme from a core starting point, preventing your theme from breaking when core base themes are updated or deprecated . 2. Strategic Development Workflow

Environment Setup: Use DDEV or Docker-based environments. Ensure you are on PHP 8.1+ to maintain compatibility with Drupal 10/11 .

Mapping Designs: Use Storybook to build and test components in isolation before integrating them into Drupal .

Component Integration: Use the include, embed, or extend Twig tags to map Storybook components to Drupal's render arrays .

Performance Optimization: Implement Vite-optimized builds and ensure SDC automatically attaches only the necessary libraries for each component on the page . 3. Essential Tools & Resources Theming Guide: For a deep dive, see the book Modernizing Drupal 10 Theme Development

by Luca Lusso, which covers mapping design systems and building decoupled frontends .

Core Documentation: Follow the official Drupal Theming Guide for standards on .info.yml file definitions and Twig best practices .

Modernizing Drupal 10 theme development involves shifting from monolithic template overrides to a component-based architecture and integrating modern front-end tooling like Vite, Tailwind CSS, and Storybook.

The following write-up covers the core concepts found in comprehensive guides like the book Modernizing Drupal 10 Theme Development by Luca Lusso. 1. Modern Local Environment & Tooling

Professional theme development now relies on containerized environments and automated build pipelines. Modernizing Drupal 10 Theme Development - Packt

Modernizing Drupal 10 Theme Development by Luca Lusso is an essential guide for developers looking to move beyond basic template overrides and adopt professional, component-driven workflows. Amazon.com Key Highlights & Features Comprehensive Modern Toolset : The book introduces a modern frontend stack including Tailwind CSS Browsersync for a streamlined development experience. Component-Based Design : It provides a deep dive into using

for design systems and integrating them with Drupal using the new Single Directory Components (SDC) feature introduced in Drupal 10.1. Real-World Methodology

: Readers follow a structured journey of implementing a design on a Drupal site, starting from a local

environment setup to complex theming of blocks, views, and paragraphs. Advanced Topics : Coverage extends to advanced areas such as visual regression testing

with BackstopJS, creating custom Twig functions, and building decoupled frontends with Next.js and JSON:API. mglaman.dev Expert & Community Consensus Book Review: Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 theme development involves shifting from monolithic template overrides to a component-driven architecture using Single Directory Components (SDC) and modern build tools like Vite and Tailwind CSS. Core Shift: Single Directory Components (SDC)

Introduced as a core feature in Drupal 10.1, SDC is the primary driver for modernizing themes.

Encapsulation: Instead of splitting a component's Twig, CSS, and JS across multiple directories, SDC keeps them in one folder (e.g., themes/custom/my_theme/components/card/).

Automatic Discovery: If a name.css or name.js file exists in the component folder, Drupal automatically includes them when the component is rendered.

Props and Slots: Developers define component properties and content areas in a name.component.yml file, allowing for validation and clear data mapping from Drupal render arrays. Modern Build Tools & Workflows

Traditional Gulp or Webpack setups are increasingly replaced by faster, more efficient tools: Modernizing Drupal 10 Theme Development - Packt

Google’s Core Web Vitals penalizes render-blocking CSS and large JS bundles. Modern Drupal 10 theming uses critical CSS extraction and lazy loading, impossible without a modern build toolchain.

Download the PDF for a side-by-side comparison chart of legacy vs. modern theme structures (Page 3).

Do not theme on production. Use a local Docker or Lando setup.

How do you modernize an existing Drupal 9/10 theme without breaking production?

Convert your node--article--full.html.twig into a composition of SDCs.