skills.rest
theodorosploumis
theodorosploumisCOMMUNITY
Explore all skills by this author →
Website𝕏@theoploumisGitHub

Drupal Theming and Templates

Plan Drupal themes extending Classy with Twig-first templates and atomic SCSS structure.

34|12|Updated Mar 10, 2019
Search Tags:#theming#best practices#frontend#design system#css#drupal#twig#scss
One-click install
npx skills add https://github.com/theodorosploumis/drupal-best-practices --skill drupal-theming-and-templates
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Drupal Theming and Templates
Source: https://github.com/theodorosploumis/drupal-best-practices/tree/main/ai/skills/theming
Command: npx skills add https://github.com/theodorosploumis/drupal-best-practices --skill drupal-theming-and-templates

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines Drupal theme development by promoting best practices that lead to maintainable, performant, and scalable themes. It helps you avoid common issues like inconsistent naming, excessive overrides, and unmanageable CSS, saving you significant development and debugging time.

Core Features & Use Cases

  • Clean Machine Names: Generate one-word theme machine names without redundant prefixes, simplifying theme hooks and template suggestions.
  • Twig-First Templates: Emphasize using Twig templates and preprocess functions for adding classes and attributes, minimizing direct HTML overrides.
  • Atomic SCSS Structure: Guide the organization of your SCSS files by responsibility (variables, mixins, entities, components) and promote semantic class prefixes (twig-, js-).
  • Use Case: When starting a new custom theme, ask Claude to plan its structure, ensuring it extends Classy, includes essential overrides for system pages (404, login), and has a well-organized SCSS directory.

Quick Start

Plan a one-word machine name theme that extends Classy, lists essential Twig overrides (404/403/maintenance/login), and proposes SCSS folders with twig-/js- class prefixes.

Frequently Asked Questions about Drupal Theming and Templates

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Drupal theme with clean Twig templates and organized SCSS?▼

Organize your Drupal theme by extending Classy, using Twig-first templates with preprocess functions for dynamic classes, and structuring SCSS into atomic folders (variables, mixins, entities, components) with semantic prefixes like `twig-` and `js-` for maintainability and scalability.

What's the best way to name a custom Drupal theme machine name?▼

Use a single, descriptive word without redundant prefixes as your theme's machine name. This simplifies theme hooks, template suggestions, and keeps your codebase clean and easier to navigate.

How do I minimize CSS overrides and template duplication in Drupal theming?▼

Rely on Twig templates and preprocess functions to add classes and attributes dynamically rather than overriding HTML directly. This approach reduces maintenance burden, prevents style conflicts, and keeps your theme DRY.

What essential Twig template overrides should I include when starting a new Drupal theme?▼

Create overrides for system pages: 404, 403, maintenance, and login templates. These ensure your theme handles critical user-facing pages consistently while extending Classy as your base.

Can I use atomic SCSS structure with semantic class prefixes in Drupal theme development?▼

Yes. Organize SCSS by responsibility using atomic principles, then apply semantic prefixes (`twig-` for template-driven classes, `js-` for JavaScript hooks) to distinguish intent and prevent naming collisions.

Why should I use preprocess functions instead of directly modifying Drupal templates?▼

Preprocess functions add classes and attributes programmatically, keeping logic out of templates and reducing the need for HTML overrides. This approach improves theme upgradability and keeps your template code cleaner.

Related Skills

Explore More Software Engineering Skills→
theodorosploumistheodorosploumis
34

Drupal Theming

Generate one-word machine names for Drupal themes extending Classy.

Community
Advanced
evestevest
1

optimizely-frontend-hosting

Configure and deploy Next.js applications to Optimizely Frontend Hosting for CMS.

Community
Intermediate
AJV009AJV009
1

twig-templating

Standardize Drupal Twig templates with naming conventions and BEM CSS patterns.

Community
Intermediate
AJV009AJV009
1

drupal-conventions

Apply Drupal conventions for theming, translation, and error handling in PHP and Twig.

Community
Intermediate