This is Week 3 of the 7-week course Hands-On: Theming. Get started with Drupal theming in 1 hour a week for 7 weeks. Based on our popular Drupal Theming Workshop featured at DrupalCon.
Time to complete: About 1 hour
This week you will learn about asset libraries in Drupal 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.
- Understand the various use cases and methods for asset libraries in Drupal.
- 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!
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.
In this tutorial we’ll:
- Define what an asset library is.
- Look at some example asset library definitions.
By the end of this tutorial you should be able to define what asset libraries are, and when you'll need to create one.
In this tutorial we’ll:
- Look at the structure of a *.libraries.yml file and demonstrate how to combine a couple of CSS and JS files together into an asset library that can be used in a theme or a module
- Look at how one asset library can declare that it is dependent on another in order to ensure the assets from the dependency are loaded as well
By the end of this tutorial you should know how to define a new asset library in either a module or a theme.
You can attach a library 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 get loaded on an as-needed basis. To attach a library you'll need to know both its name and prefix, and then use one of the techniques outlined below to let Drupal know when to include it.
In this tutorial, we'll look at attaching asset libraries:
- Globally, via your THEMENAME.info.yml file
- Conditionally, via a preprocess function using the
#attachedrender array property
- Inside of a Twig template file
By the end of this tutorial you should be able to attach asset libraries in various different ways depending on your use case.
If you want to try and complete this on your own first you'll need to:
- Define an asset library using a THEMENAME.libraries.yml file in your theme.
Once that's done your site won't look all that different. But if you view the page source, or look closely, you should see that the Bootstrap files are included along with any CSS rules you placed into your custom style sheet.
Note: Since this course if focused on teaching the Drupal aspects of theme development, and not on writing CSS, we use the Bootstrap CSS. If you don't need it for your project though you can skip it, or add the CSS framework that you want to use instead.
You should try to complete the exercise steps on your own and use the video to help guide you if you get stuck.
Note: At the end of this exercise, you'll find a video walk-through of the solution.