Bartik theme

Last updated on
4 November 2016

Bartik is the default theme for Drupal 8.

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.