Asset Management System For Frontend Development in Drupal 8

Introduction :

Drupal 8 brings many changes in terms of frontend. Drupal is now focused on the mobile-first responsive approach. Frontend performance has been given a high priority, unlike previous versions of Drupal. There is a new asset management system based around libraries that will deliver only the minimum required assets for a page that comes with Drupal 8.

In Drupal 8, we have a new feature, the Twig templating ,that replaces the previously used PHP template. Twig is part of the large PHP community and embraces more of Drupal 8’s made elsewhere initiative. Drupal 8 supported libraries to define JavaScript and CSS resources.

Using the new asset management system:

Drupal 8 is the asset management system. The asset management system allows modules and themes to register libraries. Libraries define CSS stylesheets and JavaScript files that need to be loaded with the page. Drupal 8 takes this approach for the frontend performance. Rather than loading all CSS or JavaScript assets, only those required for the current page in the specified libraries will be loaded.

We developed a custom theme named as mytheme. This theme would contain CSS stylesheets and JavaScript files so we will add these files into our libraries.yml. The steps are described below.

Steps

• Create a folder named css in your themes base directory. (../mytheme/css)
• In your css folder, add a style.css file that will hold the theme’s CSS declarations. For demonstration purposes, add the following CSS declaration to style.css:

  [html]
  body {
  background: cornflowerblue;
  }
  [/html]

• Then, create a js folder, and add a scripts.js (../mytheme/js/) file that will hold the themes JavaScript items.
• In your theme folder, create a mytheme.libraries.yml file and edit it, as shown in the following screenshot:
  
• Add the following YAML text to define the global-styling library for your theme that will load the CSS file and JavaScript file:

  [html]

  global-styling:
  version: VERSION
  css:
  theme:
  css/style.css: {}
  js:
  js/scripts.js: {}

  [/html]

• This tells Drupal that there is a global-styling library. You have the ability to specify a library version and use the VERSION defaults for your themes. It also defines the css/styles.css stylesheet as part of the library under the theme group
• Edit your mytheme.info.yml, and add the declaration to global-styling library:

  [html]
  libraries:
  – mytheme/global-styling
  [/html]

• Themes are able to specify a librarie key that defines the libraries that should always be loaded. This YAML array lists libraries to be loaded for each page.
• Go to Configuration and then to Development to rebuild Drupal’s caches.
• With your theme set to the default, go to your Drupal site.
• Your theme’s global-styling library will be loaded and the page’s background color will be styled appropriately: