Adding CSS & JS libraries to Drupal 8 sites: everything for beauty & interactivity

Oct
26

CSS and JavaScript, responsible for beauty and interactivity, can be called the heart and soul of websites. Handling CSS and JS is a true art, with many secrets. We’ve uncovered a couple of them, like moving CSS and JS files to footer and their aggregation for your website’s performance. Today, we’ll take a look at adding CSS and JS libraries for your Drupal 8 website, in particular, with the tool called the Libraries API.

CSS and JS libraries for your Drupal website

CSS and JavaScript libraries do what is necessary for your pages to render the way you want. They deal with styles, graphics, effects, animation, as well as improving accessibility, navigation, mobile and multi-browser support and so much more. Thousands of awesome plugins, widgets, and other assistants are here for you.

External CSS and JavaScript libraries are hosted outside drupal.org. This is the Drupal community's policy for a number of reasons (licensing, release cycle issues etc.).

Since these libraries are external, there must be a way to connect to them. But as you know, Drupal will find ways for everything — often with multiple alternatives! Let us introduce the most efficient Drupal’s “librarian” to you.

The Libraries API Drupal module — librarian number one!

When it comes to adding third-party JavaScript and CSS libraries, the most consistent way to do it is using the Libraries API module. Its main benefits are as follows:

  • The same libraries can be shared by multiple modules or websites
  • Modules that use certain libraries are easily upgraded
  • Better compatibility is provided, with no different library versions
  • A help widget with instructions lets you install the module easily

…and many more.

The library adding process in Drupal 8

Drupal 8 core has become much stronger in its built-in capacities for handling libraries. However, the realm of adding external libraries that can be used by multiple modules, themes, or websites still belongs to the Libraries API.

In Drupal 8, there is a significant approach shift for adding a library. Drupal 7’s drupal_add_js() and drupal_add_css() functions are gone, but this is a change for the better.

The eighth Drupal version introduces YAML files for handling libraries. This reflects Drupal 8’s best practices of configuration management and add great flexibility and control to the process. One libraries.yml file can define multiple libraries.

Interesting features include the opportunity to add libraries directly to templates using Twig, attach JavaScript and CSS libraries conditionally (for example, if a certain variable exists), override libraries and so on.

Wrap-up

Whatever external JavaScript and CSS libraries your Drupal 8 website needs, they will be attached easily with the Libraries API or in other way — just contact the Drudesk team. In addition, discover more interesting news and opportunities from our newsletter and social media pages.

Recent Posts

23
Oct
How to redesign a website without losing SEO rankings and traffic

If you feel that your website isn’t running properly anymore or doesn’t promote your business effectively, then it’s time to change something on your web resource.

19
Oct
Your Drupal website’s search optimization with ApacheSolr

The search function is such an awesome invention of the digital world that we sometimes miss it in everyday life.

About us and this blog

 
Request a free quote
Our friendly Help Team can be reached Monday through Friday, from 9am to 6pm, Eastern European Time Zone.

Contact now

Get new blog posts by email: