Drupal8 Theming: Part 1

Drupal-8 beta version is released and its stable version will be out soon. Drupal-8 is bringing a lot of new features. Symfony components are included in back-end architecture. Entities are expanded and everything is object-oriented now. Same as back-end, front-end architecture has also changed.

A new template engine, Twig, is introduced in front-end architecture. PHP days are also over for Drupal templates. We have new syntax for templates, new way to include libraries and add/remove/override core's css in custom theme.

In this series of posts we will go through all Drupal-8 theming changes. 

THEME.info.yml

In Drupal-8 .info files are changed to .info.yml file. We have new yaml syntax for info files. A simple info.yml file look like this:

name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
# This is comment.

Define Region:

name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
# Define Regions
regions:
  content: Content
  header: 'Header'
  sidebar_first: 'First sidebar'
  sidebar_second: 'Second sidebar' 

Hidden regions:

We can define hidden regions which will not be available on admin-ui (admin/structure/block), but we can use them in template files.

name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
# Define Hidden Regions
regions_hidden:
   - hidden_region 

Remove style-sheets:

In D7 we have to use hook_css_alter to unset css OR include same css file THEME.info without supplying actual file. Drupal-8 have different keys for removing and overriding style-sheets provided by other module/theme.

name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
stylesheets-remove:
  - system.theme.css 

Override style-sheets:

We can override any of core css file by adding same file in theme and defining them here.

name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
# Override core css files by adding css file with same name in our theme.
# user.icons.css file in css folder of this theme will override core user module's css.
stylesheets-override:
  - css/user.icons.css 

Include Libraries:

Including css/js in theme is changed a bit. drupal_add_js() and drupal_add_css() functions are deprecated and hook_library_info() is introduced to include css and js. We have *.libraries.yml file to add own css/js files and third party libraries in theme. We can insert any JS/CSS assets in the #attached property of a render array.

# See https://gist.github.com/crazyrohila/03a3a1f065e78515a3b0 for other information about theme's info file
name: D8 custom theme
type: theme
description: 'D8 custom theme'
package: Custom
core: 8.x
# Add libraries/css/js
libraries:
  - d8/themey

# Add `themey` group, defined in info.yml file.
# add style.css file which is available in css folder.
themey:
css:
theme:
css/style.css: {}

Next post in this series is about templates with Twig and brand new syntax: Drupal8 Theming Part 2