PHPackages                             umd-lib/umd-design-system-theme - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. umd-lib/umd-design-system-theme

ActiveDrupal-theme

umd-lib/umd-design-system-theme
===============================

Drupal base theme provided by UMD Libraries utilizing Single Directory Components for the UMD Design System.

0.1.1(1y ago)3356[6 issues](https://github.com/umd-lib/umd-design-system-base/issues)Apache-2.0Twig

Since May 7Pushed 7mo ago6 watchersCompare

[ Source](https://github.com/umd-lib/umd-design-system-base)[ Packagist](https://packagist.org/packages/umd-lib/umd-design-system-theme)[ Docs](https://github.com/umd-lib/umd-design-system-theme)[ RSS](/packages/umd-lib-umd-design-system-theme/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (5)Used By (0)

UMD Design System Base Drupal Theme
===================================

[](#umd-design-system-base-drupal-theme)

Provided by the UMD Libraries.

Important

Please see  for the Libraries' continued work on this concept.

Base theme implementing the UMD Design System[1](#user-content-fn-1-4d9cff524aefa2147e5783403c44bdf7) using Drupal's Single Directory Components (SDC)[2](#user-content-fn-2-4d9cff524aefa2147e5783403c44bdf7).

Find currently created SDCs under /components.

Current Status
--------------

[](#current-status)

Currently developed version 1.x. All work should be done against this branch.

Installation
------------

[](#installation)

To install, you can either:

- Clone this repository (main branch) into your themes directory (preferred method if you intend to develop or submit pull requests)
- Install using composer (preferred if you plan to subtheme off this theme)

```
composer require umd-lib/umd-design-system-theme
```

See:

Usage
-----

[](#usage)

This theme can be used as a base theme or in UI configuration.

To create a new subtheme based on this theme, first create a new theme folder and set umdds as the *base theme*.

E.g.,

```
name: New Terp Theme
type: theme
description: Sub-theme of UMDDS
core_version_requirement: ^11
base theme: umdds
```

Sub-theme templates can then employ SDCs when displaying content[3](#user-content-fn-3-4d9cff524aefa2147e5783403c44bdf7)

For example, to hardcode a hero component, use the {{ include() }} or {% embed %} tag:

```
{{ include('umdds:umd-element-hero', {
    variant: 'minimal',
    theme: 'light',
    hero_image: 'https://www.lib.umd.edu/sites/default/files/styles/optimized/public/2022-02/McKeldin%20Library%201920x550.jpg',
    hero_image_alt: 'McKeldin Library',
    eyebrow: 'Sports News',
    hero_title: 'Maryland Wins'
    }, with_context = false)
}}
```

Or with field content, such as in a node.html.twig:

```
{{ include('umdds:umd-element-hero', {
    variant: 'minimal',
    theme: 'light',
    hero_image: {{ file_url(content.field_hero_image[0]['#media'].field_media_image.entity.uri.value | image_style('optimized')) }},
    hero_image_alt: {{ content.field_hero_image[0]['#media'].field_media_image.alt }},
    eyebrow: {{ content.field_eyebrow|field_value }},
    hero_title: {{ node.title.value }}
    }, with_context = false)
}}
```

Note that if overriding individual SDCs, you will want to sub-theme even if only using UI Patterns or similar. In this case, you can override individual SDCs using the *replaces* syntax[4](#user-content-fn-5-4d9cff524aefa2147e5783403c44bdf7):

```
replaces: 'sdc_theme_test:my-card'
```

However the intention is that these components be used to site build in the UI using the UI Patterns[5](#user-content-fn-4-4d9cff524aefa2147e5783403c44bdf7) module alongside Layout Builder or field configuration.

See the [libraries/main](https://github.com/umd-lib/umd-design-system-theme/tree/libraries/main)branch for examples of how to override SDCs.

Upgrading Theme to Latest Design System
---------------------------------------

[](#upgrading-theme-to-latest-design-system)

Because the theme comes with JS and precompiled CSS, this procedure should only be necessary when upgrading the theme for a Design System upgrade.

### Design System / Tailwind CSS

[](#design-system--tailwind-css)

To pull the node modules, run the following:

```
npm install
```

To recompile the UMDDS CSS, run the following command:

```
npx tailwindcss --input css/base/ui.css --output css/design-system/compiled.css
```

Which will evaluate src/index.css configuration and pipe the complied file to css/design-system/compiled.css.

Also copy node\_modules/@universityofmaryland/web-components-library/dist/index.js to js/design-system/index.js

Footnotes
---------

1.  [↩](#user-content-fnref-1-4d9cff524aefa2147e5783403c44bdf7)
2.  [↩](#user-content-fnref-2-4d9cff524aefa2147e5783403c44bdf7)
3.  [↩](#user-content-fnref-3-4d9cff524aefa2147e5783403c44bdf7)
4.  [↩](#user-content-fnref-5-4d9cff524aefa2147e5783403c44bdf7)
5. [https://www.drupal.org/project/ui\_patterns](https://www.drupal.org/project/ui_patterns) [↩](#user-content-fnref-4-4d9cff524aefa2147e5783403c44bdf7)

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance40

Moderate activity, may be stable

Popularity14

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

 Bus Factor1

Top contributor holds 79.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~59 days

Total

3

Last Release

248d ago

Major Versions

0.1.1 → 1.x-dev2025-09-03

### Community

Maintainers

![](https://www.gravatar.com/avatar/5957f1190ccc382b3f44dd2853a3552a4b7c50988046aa5a68c36c56bda8aefc?d=identicon)[jgottwig](/maintainers/jgottwig)

![](https://www.gravatar.com/avatar/858b9776470de81d4472ef5b7bb13d246322eae66292f945f680638b1a79a646?d=identicon)[alfjrl](/maintainers/alfjrl)

---

Top Contributors

[![jgottwig](https://avatars.githubusercontent.com/u/4515014?v=4)](https://github.com/jgottwig "jgottwig (50 commits)")[![alfjrl](https://avatars.githubusercontent.com/u/23355886?v=4)](https://github.com/alfjrl "alfjrl (13 commits)")

---

Tags

drupalrnd

### Embed Badge

![Health badge](/badges/umd-lib-umd-design-system-theme/health.svg)

```
[![Health](https://phpackages.com/badges/umd-lib-umd-design-system-theme/health.svg)](https://phpackages.com/packages/umd-lib-umd-design-system-theme)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)