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

feature-top

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!!!

feature-top
feature-top

Add a Comment

Hernando Cadet

Hi every one, I obtained a bachelor's degree in Bioinformatics back in 2006, from Claflin University, after I received my bachelor's degree, I gained full time employment as a software engineer at a Video Relay Service company, maintaining databases and developing software for a new developed device called the VPAD.

I worked at that company for two years, then I became a web developer, and worked for a magazine for three years. After that job, I worked as a Drupal web developer, as a subcontractor for the NIH, for a year and then left the job to go back to school.

Hernando Cadet

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.