Custom Drupal 10 Theming with CSS and Twig: A Practical Case Study

Staff Reporter

Setting Up Drupal with PHP-FPM and Nginx on Ubuntu

In a recent blog post, Hui Jing Chen reflects on the continued relevance of writing traditional CSS in standalone files, especially in the context of a custom Drupal 10 project. She describes a multilingual site implementation where she styled a language switcher and navigation header using only CSS and Twig templating. Hui Jing walks through how she customized templates like page.html.twig, region.html.twig, and menu--main.html.twig to add CSS classes and reduce unnecessary markup. Flexbox was used for layout, along with media queries to ensure responsive behaviour. JavaScript was added minimally to manage a mobile menu toggle. She emphasizes that Drupal, still used by about 1.2% of known CMS-powered websites, remains a practical and flexible platform for developers. The post highlights how foundational CSS knowledge and direct theming still have a place in modern web development, particularly within the Drupal ecosystem.

Source Reference

Title

The case for “old school” CSS

Byline

Hui Jing Chen

Date of Publication

25 March 2025

Drupal 10

Drupal Theming

CSS

Twig

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.