Theming and Frontend Development

Theming is the process through which we can affect the output of entities (nodes, users, taxonomy terms, media, and so on) with CSS, JavaScript, Twig templates, and HTML. Drupal comes with a handful of out-of-the-box themes to provide a basic look and feel after you install it. Olivero is the default site theme in Drupal 10 and Claro provides the administration theme.

There are numerous options available on Drupal.org that either provide a starting point for your own theme (Bootstrap, ZURB Foundation, or Barrio, for example) or a full ready-to-use solution. It is also possible to create your own custom theme from scratch.

Everything you see on the screen after a page has loaded in Drupal has gone through the theming and rendering pipeline. This means that you can customize the theme that you see and control its markup and styling. Understanding how Drupal theming works will make you a more effective developer and this chapter will help you do...