Theming

Adding Asset Libraries to Custom Layouts for Drupal 8, 9, 10, and 11

When defining new layout plugins for Drupal you can add custom CSS and JavaScript via asset libraries. This allows for the creation of layouts with complex structures and interactive elements. Those elements might include grids, tabs, and accordions. Drupal allows you to attach custom CSS and JavaScript directly to a layout plugin, or via the layout's Twig template file.

In this tutorial we'll:

  • Define a custom asset library with JavaScript and CSS functionality
  • Attach the asset library to the custom layout plugin
  • Transform a multicolumn layout into tabs

By the end of this tutorial you should know how to attach custom CSS and JavaScript to a layout plugin to add interactivity and styling.