Better Practice, Dec. 2018

14 \ December 2018 \ http://www.phparch.com

The Flexibility of Drupal 8

Asset Libraries

An asset library is a named collection of JavaScript and/or
CSS files. Drupal 8 uses asset libraries to add JavaScript and
CSS files to pages. There is a large amount of flexibility within
asset libraries. An asset library may include only CSS files, or
only JavaScript files, or a combination of both. These files can
be part of a module, part of a theme, or external files. Asset
libraries may also list dependencies on other asset libraries.
Developers define asset libraries and can control when
to include or not include them on pages. Creating an asset
library requires a developer to create a module or a theme.
The development capabilities to write JavaScript or CSS is also
required.

Defining an Asset Library
Defining an asset library requires creating a *.libraries.
yml file in a custom theme or module. Each library has a
machine-readable name, lists of included files, conditional
criteria for loading each file and any library dependencies.
The following code example shows the definition of an asset
library containing a CSS file and dependency on another
library.
An asset library defined in the umami.libraries.yml file,
part of the Umami theme.

view-mode-card:

css:

theme:

css/components/content/card/card.css: {}

dependencies:

• umami/more-link

Changing a Menu Item Using an Asset Library

Adding an asset library to the custom Savory theme allows

altering menu items by using JavaScript and CSS. The file

savory.libraries.yml defines the new asset library with the

name savory-main-menu. This asset library includes the paths

to custom CSS and JavaScript files. It has dependencies on

asset libraries defined in Drupal core that make use of exist-

ing JavaScript libraries.

The excerpt below shows the definition of the savory-main-

menu asset library in the savory.libraries.yml file.

savory-main-menu:

css:

theme:

css/menu-main.css: {}

js:

js/menu-highlight.js: {}

dependencies:

• core/jquery


• core/drupal

As shown in Listing 3, the CSS created for this custom

library changes the placement and style of the main menu.

The menu moves closer to the main content and items render

as tabs. A new CSS class name is also defined. It changes the

background color and adds a drop shadow to elements that

contain this class.

As shown in Listing 4, the JavaScript adds a CSS class name

highlight to any menu item related to the current page. The

JavaScript defines this behavior in a Drupal Behavior, which

is similar to a jQuery $(document).ready() event. Read more

details about Drupal Behaviors^5 online.

One way to add an asset library to a page is by listing it in

the *.info.yml file of a theme. As seen in the following code

snippet, we add the custom savory-main-menu library to the

savory.info.yml file. Drupal includes the library whenever it

uses the Savory theme to render content.

5 Drupal Behaviors: https://phpa.me/d8-javascript-api

Figure 10 Listing 3

1. /*


2. 
   
   
   
   • Defines custom CSS rules for restyling the main menu
   
   
   
   


3. 
   
   
   
   • when using the Savory theme.
   
   
   
   


4. 
   
   
   
   • 
     
   
   
   
   


5. 
   
   
   
   • file: themes/custom/savory/css/menu-main.css
   
   
   
   


6. */


7. 
   


8. .menu--main {


9. top: 52px;


10. position: relative;


11. }


12. 
    


13. .menu-main__item {


14. padding: 10px 5px 0px 5px;


15. }


16. 
    


17. .menu-main__item a{


18. padding: 5px 5px 0px 5px;


19. border-radius: 15px 15px 0 0;


20. border: #decfbe solid 1px;


21. border-bottom: 0px;


22. }


23. 
    


24. .highlight {


25. background-color: #0f0;


26. box-shadow: -3px 4px 7px 0px #000;


27. }