Drupal 8 is a Great Way of Developing a Useful and Valuable Website – Part Fourteen

Drupal

Sharing is caring!

The web space has many tools and resources, which are used on a daily, to keep websites running smoothly. Without these tools and resources, we wouldn’t be able to develop self-sustaining systems, which are scalable and are able to be changed to handle the growth that accompanies technology.

In today’s article we are going to talk about JavaScript in Drupal 8, and CSS in Drupal 8 so that you as a developer can add custom JavaScript or CSS code to a website and utilize the different libraries included in Drupal core.

It is important to know that using one of the many popular JavaScript libraries provided by Drupal core, is the way of adding custom JavaScript to a site. As a Drupal 8 developer, it is important to wrap our heads around the asset library system, because, our custom JavaScript code can be added to every page, based on the requirements we have for that page, by wrapping the JavaScript code in an asset library.

Passing configuration stored in the database to the front-end and implementing AJAX calls to a Drupal route can be easily achieved through the numerous Drupal-specific JavaScript libraries found in Drupal core.

 jQuery, Backbone, Underscore and Modernizer are all part of Drupal as external projects. jQuery is the most common JavaScript library to developers, and the most used in Drupal core. AJAX, animation, event handling and DOM manipulations are easier to manage across all browsers due to the jQuery library’s simple API.

Widgets, animation, and effects with minimal code, can be provided using the jQuery UI, which contains interface elements. A simple in browser feature detection, is provided by the Modernizr asset library, which allow website developers, to customize a user’s experience according to what features they have available on their browsers.

Underscore.js and Backbone.js, are also very popular JavaScript library, Backbone allow users to add models and view to their application. Underscore on the other hand, provides an easier way for working with objects and arrays, through over 100 utility functions. Data objects such as the toolbar are represented, with Backbone models in Drupal 8. The user interface is described by using Backbone views, which are used by the CKEditor’s toolbar configuration and the Quick Edit module.  

Alright now let’s talk just a little bit about CSS in Drupal 8, which can be included on a website, in different ways. Like JavaScript custom CSS must be loaded to Drupal 8 through an asset library, because these libraries contain one or more CSS assets. Developers can package the styling and functionality of components in a Drupal website, thanks to asset libraries.

Drupal sites are kept consistent when the asset library is used, to load CSS files, to a Drupal 8 site. The three steps that are followed to load a CSS/JS asset would be: first is to save the CSS or JS file, then the library needs to be defined, finally the library can be attached to a render array in a hook. A .library.yml file must be added to the root folder of the module, then inside of that file developers can define CSS and JS assets. Here is an example of the .library.yml file.

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {}
    theme:
      css/cuddly-slider-theme.css: {}
  js:
    js/cuddly-slider.js: {}

 

Thank you for reading this article!!!

shares