Starterkit Theme

https://www.drupal.org/docs/core-modules-and-themes/core-themes/starter…

drush core/scripts/drupal generate-theme THEME

Base theme

Starterkit uses stable9 as the base, which means that it won't get any updates from core.

https://www.drupal.org/node/3107179

https://www.drupal.org/docs/develop/theming-drupal/sub-theming-using-stablestable-9-as-a-base-theme

Libraries

https://git.drupalcode.org/project/drupal/-/blob/11.x/core/themes/start…

starterkit_theme/base

Global styles loaded in starterkit_theme.info.yml.

Includes multiple component css files with weight: -10.

This means they are loaded earlier, allowing them to be overridden.

starterkit_theme/COMPONENT

There are also individual component libraries that are mostly loaded with weight: -10, but some are just the default.

These are either included in the default templates, or extending existing libraries in starterkit_theme.info.yml.

Library Extends

starterkit_theme.info.yml has library extensions that add it's libraries when the specified ones are loaded.

Library Overrides

See the overrides in stable9.info.yml.

https://www.drupal.org/node/2497313

CSS Order

Here are assets loaded in the header with a fresh starterkit theme. Notice the stable9 base assets are loaded first, then the starter theme.

The last file loaded in this list is search-results, because it's one of the few libraries that does not have weight: -1.*

*This snippet is from the search results page to show how that works.

<head>
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/core/components/progress.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/core/components/ajax-progress.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/align.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/fieldgroup.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/container-inline.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/clearfix.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/details.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/hidden.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/item-list.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/js.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/nowrap.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/position-container.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/reset-appearance.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/resize.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/sticky-header.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-counter.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-report-counters.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-report-general-info.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/tablesort.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/contextual/contextual.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/toolbar/toolbar.module.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/contextual/contextual.toolbar.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/toolbar/toolbar.menu.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/contextual/contextual.theme.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/contextual/contextual.icons.theme.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/toolbar/toolbar.theme.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/toolbar/toolbar.icons.theme.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/user/user.icons.admin.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/modules/contrib/admin_toolbar/admin_toolbar_tools/css/tools.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/modules/contrib/admin_toolbar/css/admin.toolbar.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/core/themes/stable9/css/core/assets/vendor/normalize-css/normalize.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/progress.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/action-links.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/breadcrumb.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/button.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/container-inline.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/details.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/exposed-filters.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/field.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/form.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/icons.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/inline-form.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/item-list.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/link.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/links.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/menu.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/more-link.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/pager.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/tabledrag.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/tableselect.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/tablesort.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/tabs.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/textarea.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/ui-dialog.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/messages.css?sf3hw2">
  <link rel="stylesheet" media="all" href="/themes/starter/css/components/search-results.css?sf3hw2">
</head>