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

What Are Libraries?

Theming, Drupal 8
More information

In Drupal 8, CSS and JavaScript are loaded bundled together as asset libraries, and then these libraries are loaded via either themes or modules. Asset libraries can contain one or more CSS assets, one or more JS assets and one or more JS settings. In this tutorial we'll cover what asset libraries are, what they contain, and the problem that they are trying to solve.

Define an Asset Library

Theming, Drupal 8
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 a Library

Theming, Drupal 8
More information

Libraries can be attached to all pages, a subset of pages, or to elements in a render array. This allows you to have some assets that are global, and others that are only loaded on an as-needed basis.

In this tutorial, we'll look at attaching asset libraries:

Exercise: Add an Asset Library

Theming, Drupal 8
More information

You can accomplish a lot without needing to change any markup by adding CSS and JavaScript files to your theme.

Learning objectives:

  • Understand the use case for asset libraries
  • Be able to create an asset library
  • Be able to add CSS and JavaScript assets to their theme and include them in the page

Note: At the end of this exercise, you'll find a video walk-through of the solution.