Bartik is a core theme in Drupal. As a default theme for Drupal, it serves as an instructive example of a well-developed responsive theme. In this tutorial, we'll tour and explore Bartik, identify its primary features, and explain the use case for the Bartik theme and what you can learn from it.

In this exercise, we'll practice theming by overriding the main menu template. We'll:

• Override and rename the main menu template so that it will only affect the main menu component of our Drupal site.
• Add Bootstrap classes from the base nav component into our overridden main menu template file.
• Add CSS classes to HTML selectors using attributes.addClass() and set methods.

We recommend that you work on the exercise steps below first. You can refer to the video if you need some help.

Themes are the part of Drupal that you, and anyone else visiting your Drupal powered application, see when they view any page in their browser. You can think of a theme as a layer, kind of like a screen, that exists between your Drupal content and the users of your site. Whenever a page is requested Drupal does the work of assembling the content to display into structured data which is then handed off to the presentation layer to determine how to visually represent the data provided.

Drupal themes are created by front-end developer. Frequently referred to as themers, or theme developers. Themes consist of standard web assets like CSS, JavaScript, and images, combined with Drupal-specific templates for generating HTML markup, and YAML files for telling Drupal about the file and features that make up each individual theme.

In this tutorial we'll:

• Explain what a Drupal theme is.
• Explain the role of a Drupal themer in the process of building a Drupal site.
• Get a high level overview of the types of files/code that themes are made of.

By the end of this tutorial you should be able to explain what a Drupal theme is, and the kind of work a Drupal theme developer will be expected to do.

We recommend planning ahead when using Layout Builder, documenting how you intend to use Layout Builder for your specific use-case, and then doing your best to stick to it. One approach that we've found works well for sites that need a maximum amount of flexibility (and have the resources to do the upfront planning and theming required) is using entity view modes.

This approach is similar in concept to component based design systems, where you do the initial work of creating a set of components that all work well together up-front, and then allow them to be mixed and matched in whatever way is necessary.

In this tutorial we'll:

• Create new view modes for the Basic Page content type representing the different components.
• Use the ctools blocks module to allow displaying an entity as a block and choosing which view mode to use when rendering the entity.
• Provide custom HTML and CSS styling for the new components.

By the end of this tutorial you'll know how to use Layout Builder in combination with entity view modes.

Overview of regions from a theming perspective.