Week 3: Add an Asset Library

This is Week 3 of the 7-week course Hands-On: Theming. Get started with Drupal 8 theming in 1 hour a week for 7 weeks. Based on our popular Drupal 8 Theming Workshop featured at DrupalCon.

Time to complete: About 1 hour

This week you will learn about asset libraries in Drupal 8 and how add an asset library to your theme. Go through each tutorial and then apply what you've learned in the final hands-on exercise. Be sure to complete the last tutorial listed (Exercise: Add an Asset Library) before you move on to Week 4: Configure Your Environment for Theme Development.

Goal

  1. Understand the various use cases and methods for asset libraries in Drupal.
  2. Complete Exercise: Add an Asset Library:
    • Create a new asset library that includes CSS files from Bootstrap in your custom theme

Sign-up for weekly email reminders

Sign-up for the Hands-On Theming email list and get reminders and tips about each week's exercises!

Subscribe

Own this course

You can also purchase the Practical Drupal Theming course on Thinkific. The course material is the same, but you can access the content without a Drupalize.Me membership and you will own the course forever.

What Are Asset Libraries?

Theming, Drupal 8, Drupal 9
More information

An asset library is a bundle of CSS and/or JavaScript files that work together to provide a style and functionality for a specific component. They are frequently used to isolate the functionality and styling of a specific component, like the tabs displayed at the top of each node, into a reusable library. If you want to include CSS and/or JavaScript in your Drupal theme or module you'll need to declare an asset library that tells Drupal about the existence, and location, of those files.

Define an Asset Library

Theming, Drupal 8, Drupal 9
More information

New asset libraries can be defined by either modules or themes. In order to define a new asset library you need to create the requisite CSS and JavaScript files, and a new THEMENAME.libraries.yml, or MODULENAME.libraries.yml file that aggregates them together and provides metadata about the library itself and any dependencies.

In this tutorial we'll:

Attach an Asset Library

Theming, Drupal 8, Drupal 9
More information

Once you've defined an asset library you'll need to tell Drupal when you want to add the CSS and JavaScript that it includes to the page. Ideally you'll do so in a way that allows Drupal to only add the corresponding assets on pages where they are needed.

Exercise: Add an Asset Library

Theming, Drupal 8, Drupal 9
More information

You can accomplish a lot without needing to change any markup by adding CSS and JavaScript files to your theme. In this exercise you'll create 2 asset libraries and add them to your theme. Specifically, we want to pull in the CSS and JavaScript from the popular Bootstrap framework so that we can make use of its layout utility classes later on. We'll also add a custom CSS file that contains global styles for our site, like setting the page background color.

If you want to try and complete this on your own first you'll need to: