This document discusses the initial steps for creating a Drupal 8 theme, including creating a .info.yml file to define theme metadata and regions, adding a libraries.yml file to define CSS and JavaScript assets, and printing regions in page.html.twig. It also lists the 10 default regions in Drupal themes.

1. Drupal 8 Theming
Templating

2. First step
• First we need to create a THEMENAME.info.yml file
to craete a new theme.
• This file provides the metadata about the new
theme.

3. THEMENAME.info.yml
• 4 required meta information
 Name
 Description
 Type
 Core
Some additional meta info which can be added :
 Libraries
 Stylesheet-remove
 Regions

4. THEMENAME.info.yml
• name: Fluffiness
• description: First custom theme for drupal8
• type: theme
• core: 8.x
• stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css
• libraries:
- fluffiness/global-styling
• regions:
header: 'Header'
content: 'Content'
page_top: 'Pag Top'
page_bottoml: 'Page Bottom'
footer: 'footer'

5. Libraries
• No stylesheets property
• No scripts property
• jQuery is not automatically loaded on all pages anymore in Drupal 8
• To define your asset libraries you need to add THEMENAME.libraries.yml
In this library yml file we can add the required css/js files as below eg:
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
dependencies:
- core/jquery

6. regions
• To add a region to a theme there are 2 require steps :
 Adding region metadata to your THEMENAME.info.yml
 print that new region into the page.html.twig file.
For example :
region :
header_top : Header Top
Print this new region in your twig template
{{page.header_top}}

7. Default Regions
1. page.header: Items for the header region.
2. page.primary_menu: Items for the primary menu region.
3. page.secondary_menu: Items for the secondary menu region.
4. page.highlighted: Items for the highlighted content region.
5. page.help: Dynamic help text, mostly for admin pages.
6. page.content: The main content of the current page.
7. page.sidebar_first: Items for the first sidebar.
8. page.sidebar_second: Items for the second sidebar.
9. page.footer: Items for the footer region.
10. page.breadcrumb: Items for the breadcrumb region.
These are 10 default regions coming from base theme classic.

8. Twig templates
• page.html.twig
• html.html.twig