Working with Drupal Theme and Templates from UI Developer Perspective

Introduction:
From a UI developer’s standpoint, Drupal provides a structured yet flexible theming layer that clearly separates presentation (HTML/CSS/JS) from content and business logic. This allows UI developers to focus on design implementation, accessibility, responsiveness, and performance without deep involvement in backend code.

1. Understanding Drupal’s Theme Layer
Drupal uses a theme‑based architecture where visual presentation is controlled through:

• Themes – Define the look and feel of the site
• Twig templates – Control HTML structure
• CSS/JS assets – Control styling and interactivity

For UI developers, Twig + CSS + JS is the primary working area — PHP involvement is minimal or none.

2. Theme Structure (What UI Developers Work With?)

A typical custom Drupal theme structure:

/themes/custom/my_theme
│── my_theme.info.yml
│── my_theme.libraries.yml
│── my_theme.theme
│
├── templates/
│   ├── html.html.twig
│   ├── page.html.twig
│   ├── node.html.twig
│   ├── block.html.twig
│   ├── views-view.html.twig
│   └── components/
│       ├── card.twig
│       ├── banner.twig
│       └── hero.twig
│
├── css/
│   ├── base.css
│   ├── layout.css
│   └── components.css
│
└── js/
    └── theme.js

UI developers mostly work inside:

• templates/
• css/
• js/
• my_theme.libraries.yml

 3. Working with Twig Templates

Drupal uses Twig as its templating engine.
Key Characteristics:

• Logic‑light (no heavy programming)
• Secure by default (auto‑escaping)
• Follows component‑based mentality

Common Template Types:

Example:

page.html.twig

{# page.html.twig #}
<div class="layout-container">
  <header role="banner">
    {{ page.header }}
  </header>

  {% if page.primary_menu or page.secondary_menu %}
    <nav class="navigation-wrapper">
      {{ page.primary_menu }}
      {{ page.secondary_menu }}
    </nav>
  {% endif %}

  <main role="main">
    <div class="layout-content">
      {{ page.highlighted }}
      {{ page.breadcrumb }}
      {{ page.content }}
    </div>

    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}
  </main>

  <footer role="contentinfo">
    {{ page.footer }}
  </footer>
</div>

4. Component‑Based Development (Best Practice)

Modern Drupal theming encourages component‑based UI development, similar to React/Vue concepts but rendered server‑side.

Approach:

• Small, reusable Twig components
• Independent CSS per component
• Minimal dependencies

Example:

templates/components/
  ├── card/
  │   ├── card.twig
  │   └── card.css

Benefits:

• Reusability
• Consistent UI
• Easier maintenance
• CMS‑friendly (editors reuse components across pages)

5. CSS & Design System Integration

UI developers are free to use:

• CSS3 / Flexbox / Grid
• Utility‑first frameworks (Tailwind, Bootstrap)
• Design systems aligned with brand guidelines

Key points:

• Drupal does not restrict CSS methodology
• Assets are attached via libraries.yml
• Supports modern frontend tooling (PostCSS, Sass, etc.)

Example (my_theme.libraries.yml):

global-styling:
  css:
    theme:
      css/base.css: {}
      css/components.css: {}

 6. JavaScript & Interactivity

Drupal supports progressive enhancement:

• JS is optional, not mandatory
• Pages render fully without JS

UI developers typically:

• Add JS for interactivity (sliders, accordions, forms)
• Follow Drupal behavior pattern (if required)
• Work with vanilla JS or modern frameworks (limited scope)

React/Vue can also be embedded only where needed (hybrid approach).

7. Accessibility & Performance (UI Responsibility)
Drupal themes are expected to be:

• WCAG compliant
• Keyboard accessible
• Screen‑reader friendly

UI developer responsibilities:

• Proper heading hierarchy
• ARIA attributes (only when needed)
• Color contrast compliance
• Focus management

Performance considerations:

• Clean HTML output
• Optimized CSS
• Lazy loading images
• Minimal JS payload

8. Workflow with CMS & Backend Teams

Typical collaboration model:

• UI developers do not build pages one‑by‑one
• They build templates once, editors reuse endlessly

9. Why This Works Well for UI Teams

✔ Clear separation of concerns
✔ No need to hardcode content
✔ CMS‑driven layouts
✔ Enterprise‑scale reuse
✔ Zero duplication of effort

50–500 pages ≠ 50–500 UI builds
It usually means 10–15 % reusable templates

10. Summary

From a UI developer’s perspective, Drupal theming:

• Feels like structured HTML development
• Encourages componentization
• Protects UI from backend complexity
• Scales extremely well for large websites
• Enables editors to work independently

This makes Drupal particularly suitable for large enterprise websites, where UI quality, consistency, accessibility, and long‑term maintainability are critical.