Drupal Theming & Frontend Development Flashcards

In Drupal, what does enabling Twig debug mode output into the HTML source?

Answer: Template file paths, theme hook suggestions, and BEGIN/END template comments

Twig debug mode injects HTML comments showing the exact template file being used, all candidate theme hook suggestions, and begin/end markers for each template.

Which Drupal theming approach allows you to override a contrib module's template from your custom theme?

Answer: Copy the template to themes/custom/mytheme/templates/ with the same filename

Placing a template file with the same name inside your theme's templates directory causes Drupal to use your copy instead of the module's original template.

What is the purpose of the 'regions' key in a Drupal theme's .info.yml file?

Answer: Declare named block placement areas available in the theme

Regions declared in a theme's .info.yml (e.g., header, sidebar_first, footer) create named areas where administrators can place blocks via the Block Layout UI.

In Drupal's Twig, what function renders a render array variable into HTML output?

Answer: {{ content.field_name }}

In Drupal Twig templates, printing a render array variable with {{ variable }} automatically invokes the render pipeline to output its HTML.

What Drupal theme setting enables the display of the site logo, site name, and site slogan in the header?

Answer: They are set in Appearance > Settings for the active theme

Site logo, name, and slogan visibility are toggled per-theme in Appearance > Settings, which stores the choices in the theme's configuration.

Which Drupal CSS naming convention is recommended for theme and module stylesheet classes to avoid conflicts?

Answer: BEM (Block Element Modifier) methodology

Drupal's coding standards recommend the BEM methodology (block__element--modifier) for CSS class naming to create predictable, conflict-free, component-based stylesheets.