6.2. What Drupal 8 theme consists of. Overview of Stark theme.

In Drupal 7, you could quickly and easily make a subtopic on Zen and start building your website. Since Drupal 8 there are also several theme builder for creating your own themes. But before doing subtheme on them, you will need to figure out a little where where is located.

Drupal developers suggest that we consider the Stark example theme. This topic has been added to Drupal, just to familiarize yourself with how the theme is arranged. Let's see what lies inside this theme:

Stark.info.yml file

We start the review with the stark.info.yml file. Earlier in the 7th Drupal, topic data was stored in .info files, Drupal 8 uses YML everywhere, so the .info file is now info.yml in YML format. In YML format, keys and values are separated by a colon

Theme Name:

name: Stark

The type of project may be a theme, a module. We have this theme.

type: theme

Description shown on the page with the theme:

description: 'An intentionally plain theme with no styling to demonstrate default Drupal’s HTML and CSS. Learn how to build a custom theme from Stark in the Theming Guide '

Grouping of Drupal projects for convenience, for example, when modules are included, they will be grouped into tabs:

package: Core

The version for contrib modules is set automatically, so here is the VERSION variable, and the line itself is commented out. In fact, the version is listed below:

# version: VERSION

The core version of Drupal is also commented out and pasted automatically by drupal.org:

For Drupal 8.8 and above:

core: 8.x
core_version_requirement: ^8 || ^9

For Drupal 8.8 and below:

# core: 8.x

Whether or not he uses some basic theme, false means that he does not use:

base theme: false

The block with the version of the theme and which core is inserted automatically by drupal.org:

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

Файл stark.libraries.yml

Here we include the css and js theme files:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}

We can also include javascript files

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}

It is also worth noting that jQuery is now optional for use and may not be displayed on the page. If you use jQuery in your custom script, you need to add it to the theme:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

In addition, you can also set for css files which files should always be displayed, and which only in the print version

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Description files README.txt, screenshot.png

These files show how the theme looks and how to install it, if there are any features of installation or use.

Logo.svg file

The logo file is automatically connected to the design theme if it is at the root of the site. You can also fill in your logo through setting the theme.

Config folder and stark.schema.yml file

Another YML theme file in which theme settings are stored. For a Stark theme, here is just the title for the Stark theme settings page.

Folders css, js

These folders store custom css, javascript files. Do not forget that it is not enough to put the file in a folder to include it. Each file must be connected separately through stark.libraries.yml.

File stark.breakpoints.yml

This file defines the screen sizes for mobile versions of the site. This is a new feature of Drupal, we will discuss it in detail in one of the following articles.

stark.mobile:
   label: mobile
   mediaQuery: '(min-width: 0px)'
   weight: 0
   multipliers:
    - 1x
stark.narrow:
   label: narrow
   mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
   weight: 1
   multipliers:
     - 1x
stark.wide:
   label: wide
   mediaQuery: 'all and (min-width: 960px)'
   weight: 2
   multipliers:
     - 1x

Here's a topic to familiarize yourself Stark.In the next article, we'll look at how to create your own theme based on the Stable theme.