Drupal 8 Theming Experience

author
By Team Srijan Mar 2, 2016

DrupalCon Asia was my first time at a Con, and it was a great opportunity to meet new people, learn from them and share my knowledge. I got a chance to attend the DriesNote, where he talked about Drupal 8, a roadmap for the future and the tremendous opportunities for Drupal in India. Everyone was excited about the sessions, code sprints and mentor sprints. It was great fun attending a code sprint and working on Drupal 8 UI issues. 

 

I also attended Scott Reeves session on “Drupal 8 Theming Experience”, on Day 2 of the Con. In his talk, he covered the core base theme, use of ‘without’ filters, theme registry loader and how to work with libraries. He also shared his Drupal 8 experience with the attendees.

Here’s a round-up of all that I learnt:

Set Classes in Twig templates



<article>

 

 

This is a feature introduced in Drupal 8 where we can set classes in the Twig template files. We can add different custom classes based on the conditions and call them to template file. 

Print what you want, when you want, with the ‘without’ filter

In Drupal 7, in order to hide the link or comments we used the “hide” keyword.

 




BlogPost 47527847600 Drupal 8 Theming Experience








But in Drupal 8, the “without” keyword is used to hide content. Here's an example:













Twig Blocks

<div>









BlogPost 47527847600 Drupal 8 Theming Experience



</div>
 

Drupal 8 also has an “extends” feature. This extends the properties of template by calling in your template file.

 



BlogPost 47527847600 Drupal 8 Theming Experience

 

You can also take a look at the ‘extend’ documentation, in case you want to explore this feature in detail. 

Libraries

In drupal 8, there is the “libraries” feature where we can add new libraries, remove existing ones and override it. 

 
libraries-override:
 
# Replace an entire library

  core/drupal.collapse: mytheme/collapsed

  # Replace one particular library asset with another.

  subtheme/library/css/theme/css/layout.css: css/layout.css

  # Remove one particular asset.

  drupal/dialog/css/theme/dialog.theme.css: false

You can also take a look at Scott's presentation, to have a greater understanding of the new theming experience with Drupal 8.

Shared Success

How We Helped 8world Deliver New Digital Experiences Through A Hybrid CMS
How We Helped A Telecom Giant Shorten The Time-To-Market For APIs
How We Delivered A Market-ready Website With Unified UX In Just 6 Weeks
How We Built An API Developer Portal For a Telecom Giant To Improve Developer Engagement

Let’s start our conversation

  • Business Inquiry
  • Career
  • Others

Business Inquiry

Career

Others