Modernizing Drupal 10 Theme Development Pdf Fixed ✔

Modernizing Drupal 10 Theme Development: The Ultimate Guide (PDF Inside)

By [Your Name/Organization] Published: [Date]

1. Use a Modern Front-end Framework

Consider using a modern front-end framework like: modernizing drupal 10 theme development pdf

  • Bootstrap: A popular front-end framework that provides a responsive and mobile-first approach to building websites.
  • Tailwind CSS: A utility-first CSS framework that provides a flexible and customizable way of styling websites.

What is SDC?

SDC allows you to store a component’s Twig template, CSS, JavaScript, and Schema in one folder. Modernizing Drupal 10 Theme Development: The Ultimate Guide

File structure example:

my_theme/
  components/
    card/
      card.component.yml
      card.css
      card.js
      card.twig
      card.png (thumbnail for style guide)

Table of Contents

Part 1: The New Paradigm (Why Drupal 10 Theming is Different)

Chapter 1: Farewell to template.php, Hello Object-Oriented Theming Bootstrap : A popular front-end framework that provides

  • The shift from procedural to OO hooks (hook_preprocess_HOOK vs. ThemeManager).
  • Understanding the modern theme registry.
  • Deprecated functions in Drupal 10 vs. Drupal 7.

Chapter 2: The Infrastructure of a Drupal 10 Theme

  • Anatomy of a modern theme: THEME.info.yml deep dive (libraries, ckeditor-styles, core version key).
  • Starterkit vs. Subtheme vs. UI Suite (SDC).
  • Setting up a local dev environment with Node.js, Webpack, and Vite (not just Drush).

Starter Theme (Modern)

Skip classy or stable. Use:

  • Radix (Bootstrap 5 + components)
  • Gin (admin theme - also good reference)
  • Or build your own with SDC
composer create-project drupal/recommended-project my_project
cd my_project/web/themes/custom
mkdir my_modern_theme && cd my_modern_theme
npm init -y