Bartik

Last updated on
14 September 2022

Bartik was the default theme in Drupal core until 9.5.0.

Regions

The Bartik theme comes with several regions.

regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

Features

The primary menu appears as tabs along the top of the page, below the header.

The secondary menu appears in the upper left corner.

The color module, if enabled, can be used to change the color of several parts of the Bartik theme, including the header (as a gradient), footer, link and text color.

Differences from Drupal 7

Significant work has been done on Bartik in Drupal 8 to improve structure, extensibility, code quality, accessibility and responsive design.

Bartik uses breakpoint module to declare its responsive breakpoints.

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Components

Bartiks CSS files have been separated out into components following the Drupal 8 CSS architecture guidelines.

global-styling:
  version: VERSION
  css:
    base:
      css/base/elements.css: {}
    component:
      css/components/block.css: {}
      css/components/book.css: {}
      css/components/breadcrumb.css: {}
      css/components/captions.css: {}
      css/components/comments.css: {}
      css/components/contextual.css: {}
      css/components/demo-block.css: {}
      # @see https://www.drupal.org/node/2389735
      css/components/dropbutton.component.css: {}
      css/components/featured-top.css: {}
      css/components/feed-icon.css: {}
      css/components/field.css: {}
      css/components/form.css: {}
      css/components/forum.css: {}
      css/components/header.css: {}
      css/components/help.css: {}
      css/components/highlighted.css: {}
      css/components/item-list.css: {}
      css/components/list-group.css: {}
      css/components/list.css: {}
      css/components/main-content.css: {}
      css/components/menu.css: {}
      css/components/messages.css: {}
      css/components/node.css: {}
      css/components/node-preview.css: {}
      css/components/page-title.css: {}
      css/components/pager.css: {}
      css/components/panel.css: {}
      css/components/primary-menu.css: {}
      css/components/search-form.css: {}
      css/components/search-results.css: {}
      css/components/secondary-menu.css: {}
      css/components/shortcut.css: {}
      css/components/skip-link.css: {}
      css/components/sidebar.css: {}
      css/components/site-branding.css: {}
      css/components/site-footer.css: {}
      css/components/table.css: {}
      css/components/tablesort-indicator.css: {}
      css/components/tabs.css: {}
      css/components/text-formatted.css: {}
      css/components/toolbar.css: {}
      css/components/featured-bottom.css: {}
      css/components/password-suggestions.css: {}
      css/components/ui.widget.css: {}
      # @see https://www.drupal.org/node/2389735
      css/components/vertical-tabs.component.css: {}
      css/components/views.css: {}
      css/components/buttons.css: {}
      css/components/image-button.css: {}
      css/components/ui-dialog.css: {}
    layout:
      css/layout.css: {}
    theme:
      css/colors.css: {}
      css/print.css: { media: print }

Templates

Bartik includes template overrides for page, node, block, form, field and messages.

Name

The Bartik theme is named after Jean Bartik, one of the original programmers for the ENIAC computer.

Default Theme Plans for Drupal 9

There are plans to create a new default front-end theme for Drupal 9. Discussion and opportunities for contribution can be found in the Drupal 9 core theme issue thread and the #d9-theme channel on Drupal Slack.

Help improve this page

Page status: No known problems

You can: