Theming

Core Themes: Bartik for Drupal 8, 9

Last updated
Theming
8.9.x/9.4.x

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

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.

Goal

Recognize Bartik theme and identify its primary features. Explain the use cases for Bartik and what you can learn from it.

Prerequisites

Watch Core Theme: Bartik

Why explore Bartik?

  • It's a good example of how to create a custom theme.
  • See the principles of Drupal theming-in-action.
  • It's Drupal's default theme and the first theme you'll see when you install Drupal.
  • See how Drupal implements responsive features in a theme.

Explore the files of Bartik

To get familiar with Bartik and the principles of Drupal theming, fire up a text editor and start exploring the files inside the Bartik theme.

Navigate to core/themes/bartik

This is the root directory for the Bartik theme.

Explore Bartik's info file

Open bartik.info.yml in a text editor or IDE such as PhpStorm. Here you'll find examples of how a theme can define meta information, indicate a base theme, attach libraries, specify stylesheets for CKEditor, and define regions.

Explore Bartik's template files

Navigate to the templates directory and explore Bartik's template files. You might want to start with page.html.twig and notice how Bartik's regions, defined in bartik.info.yml, are output via the page array using Twig.

Explore Bartik's CSS libraries

Take a look at bartik.libraries.yml and notice how all of Bartik's CSS files in its css directory are listed here under the global-styling key. To learn about the concept of libraries in Drupal theming and how to define and attach libraries, check out the following tutorials:

Explore preprocess functions in bartik.theme

Open bartik.theme. This is a PHP file (known in previous versions of Drupal as template.php) containing PHP functions, mostly preprocess hooks. In Bartik's ".theme" file, you'll find functions that implement a variety of preprocess hooks, altering and adding variables to various template files. To learn more about preprocess functions, explore the following tutorials and use Bartik as an example to follow along:

Explore Bartik's responsive features

  • Open bartik.breakpoints.yml and take note of the breakpoints defined in this YAML file.
  • Navigate to the Extend page and enable the core Responsive Images module.
  • Navigate to Configuration > Responsive Image styles
  • Under Breakpoint group, select Bartik. Notice how the breakpoints defined in bartik.breakpoints.yml correspond with those listed in the field sets now displayed under Breakpoint group.

To learn more about breakpoint configuration files, see this tutorial: What Is a Breakpoint YAML File?

Explore Bartik's integration with Color module

  • Navigate to Appearance > Settings > Bartik
  • Notice that Bartik's settings include a color picker UI
  • Try it out and change the background colors of the header
  • In a code editor, navigate to core/themes/bartik/color and explore the files inside: color.inc, preview.css, preview.html, and preview.js.
  • See also the documentation for Color module on Drupal.org

As you can see, there's a lot to learn just by exploring Bartik. Use our theming guide in conjunction with Bartik to explore many principles of Drupal theming in action, and then apply what you learn in your own custom theme.

If you want to use Bartik's files and structure as a basis for your own theme, don't modify core/themes/bartik, but instead copy core/themes/bartik to themes/ and rename the directory and any filename containing the "bartik" with your new theme's machine name. See the tutorial Structure of a Theme for more details on how to set up a custom theme. These same guidelines apply to any theme, including the next core theme we'll be exploring: Stark.

Recap

In this tutorial, we explored Bartik, a core theme in Drupal. We learned about Bartik's unique features and what theming concepts you can learn from exploring Bartik's theme files.

Further your understanding

  • Explain to a colleague two or three reasons why it can be useful and instructive to explore Bartik.
  • Which Drupal module does Bartik depend on in its theme settings?
  • What is the name of the file that defines Bartik's regions?

Additional resources

This sampling of resources will help you understand Bartik and learn the concepts and techniques of theming in Drupal. Explore other theming tutorials in the rest of our Drupal Theming Guide.

On this page

Frontend Theming