Bartik
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
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion