Skip to content

Getting Started

Alfred J Lin edited this page Mar 12, 2026 · 1 revision

Overview

This guide covers how to install and configure the UMD Libraries Design System on a Drupal 11+ site.

Required Packages

Install all of the following packages before proceeding:

Package Description
UMD Libraries Theme The main theme
UMD Libraries Layout Tools Layout Builder section options
UMD Libraries Sidebar Menu Sidebar navigation block
UMD Libraries Social Icons Social media icons for the footer
UMD Libraries UI Pattern Sources SDC pattern sources for Layout Builder

The theme also requires the UI Patterns Drupal module (ui_patterns) to be installed and enabled.

Installation Steps

1. Install the theme and packages

Add the packages to your Drupal project using Composer, then enable the required modules via the Drupal admin interface or Drush.

2. Set the default theme

In the Drupal admin, go to Appearance and set UMD Libraries Theme as the default theme.

3. Configure Block Layout

Set up the site-wide regions using Drupal's Block Layout (/admin/structure/block). Follow the region order described in Base Layout (Drupal Block Layout):

Header region (top to bottom):

  1. UMD Header (if needed)
  2. UMD Lib Navigation
  3. UMD Lib Chat Widget (if needed)
  4. UMD Lib Alert (if needed)

Footer region (top to bottom):

  1. UMD Lib Scroll to Top
  2. UMD Lib Footer

4. Configure Layout Builder

Content pages should use Layout Builder to manage the main content area. Follow the instructions in Content Area Layout (Layout Builder) to set up page layouts.

When adding a new section in Layout Builder, use only the UMD Libraries Layout section option provided by the Layout Tools package.

Next Steps

  • Review Layout for an overview of how Block Layout and Layout Builder work together.
  • Review Components for available components and their usage.

Clone this wiki locally