Are you ready to transform your approach to Drupal theming and build better, more maintainable sites? This course dives deep into creating and using Single Directory Components (SDC) in Drupal, bringing modern component-based development practices like those found in frameworks such as React directly into your Drupal theme.
Learn how SDC improves developer experience, streamlines workflows through reusable assets and automatic library creation, and facilitates integration with design systems and tools.
Schedule
- DrupalEasy alumni beta - July 28 - August 1, 2025
- Public offerings begin August, 2025, dates TBA
Price: $600
DrupalEasy accepts credit cards, checks and Paypal for this course. Following your registration, and invoice will be sent to you with payment option details. Group pricing is also available. Contact Gwendolyn if you have payment questions or would like to discuss group pricing.
Mike is an excellent instructor—clear, engaging, and highly knowledgeable in Drupal and a wide range of web technologies.
- John Kotarski, 2025 DCO graduate
Recommended Prerequisites
- Proficient in modern Drupal site-building, including creating content types, adding fields, and utilizing the Paragraphs module.
- Basic knowledge of modern Drupal theming including template overrides, Twig debugging, and theme anatomy.
- A personal/local development environment with ability to run Drupal 11, Drush, node (v6.0+), npm (v16.0+), and yarn (v1.6+).
- DDEV v1.24+ includes node, npm, and yarn and is recommended for this course.
- Alternate local (personal) development environments can be used providing they support the tools listed above.
- DDEV and Visual Studio Code are the recommended local development environments and integrated development environments for this course. Other tools may be used (Lando, Docksal, custom local development environments and other IDEs) but some material in this course makes direct reference to DDEV and Visual Studio Code and it will be up to the student to determine the equivalent processes in their choice of tools.
Mike Anello
Active 15+ year community member & leading expert in Drupal training & consulting, Mike is the architect & author of this course.
Syllabus
- Introduction to Single Directory Components (SDC): Understand what SDCs are and why they're beneficial for Drupal theming. Learn the basic structure of a component.
- Core SDC Concepts:
- Component Metadata (
*.component.yml): Learn the importance of this file. Understand how it defines the component, allows replacement, provides descriptions, and integrates with external tools. Note that this course will only use examples with metadata files. - Properties (Props): Explore how props provide configuration and content, are constrained by JSON data types, and are ideally defined by schema to support automated forms.
- Slots: Learn how slots hold arbitrary markup, are not constrained by JSON data types, and allow embedding other components.
- Schema: Understand the role of the metadata schema file in defining prop types and enabling IDE features like validation and autocomplete. Learn how to make schemas mandatory in a theme.
- Libraries: Discover that SDC automatically generates a library for a component's CSS/JS when its template is invoked.
- Component Metadata (
- Development Environment & Tools:
- Detailed setup for IDEs (primarily Visual Studio Code) including SDC schema validation and PostCSS highlighting.
- Setting up a Drupal 11 site and a Radix-based subtheme.
- Introduction to PostCSS: Learn how this tool transforms CSS using JavaScript plugins. Explore common plugins used in Drupal core. Learn how to configure these plugins and use the
globlibrary for compiling component CSS files. - Using the Drush
- Creating Single Directory Components:
- Creating a Chip component: A hands-on example demonstrating the process of generating a component, defining props and slots, writing the Twig template, styling with PostCSS, and adding JavaScript behavior.
- Creating a Figure component: Another example focusing on creating a component for displaying images using the
<figure>tag, utilizing both props and slots, integrating with Drupal media fields, and styling with PostCSS.
- Using Components:
- Learn how to use components in Twig templates using the
includeorembedfunctions. Understand when to use each and the importance of thewith_context = false(oronly) option for variable scoping. - Learn how to use components in Drupal render arrays.
- Learn how to use components in Twig templates using the
- Advanced SDC Techniques:
- Replacing an existing component: Demonstrate how to override a component from a base theme.
- Converting a base template file into an SDC: Convert an existing template file from a custom module into an SDC.
- Creating an SDC from an external source: Create a component based on external HTML and CSS, integrating it into a custom paragraph type and mapping Drupal field data to component props and slots.
- Validation & Development Tools:
- Understand how component data validation works against the schema.
- Utilize the SDC Devel contrib module for validating component metadata and Twig content via a Drush command.
- Explore other SDC-related contrib modules..
- AI-assisted Component Development:
- Use AI to create a component: Explore the process of using Large Language Models (LLMs) to generate SDC files, including the challenges of getting valid output and the importance of validating with tools like SDC Devel.
- Use AI to design and create a component: Attempt to use AI to both design a component and then generate the SDC files based on the design mockup. This highlights the current capabilities and limitations of LLMs for both design and code generation in this context.
This course provides a comprehensive, hands-on experience to equip you with the skills needed to effectively utilize Single Directory Components for building modern, maintainable Drupal themes.