-
Notifications
You must be signed in to change notification settings - Fork 3
Home
Note: This wiki is a work in progress and is updated periodically. Content may not reflect the current status of components in this repository.
This is a customized UMD Design System for the University Libraries, focused on content-heavy websites and the Libraries' specific needs. It is built on top of the UMD Design System, which provides a foundation for consistent design across UMD's digital products.
This is built for Drupal (v11+) sites. The design system includes components, styles, layouts, and guidelines tailored to the Libraries' requirements, ensuring a cohesive user experience that aligns with accessibility standards.
While this is designed and developed for the Libraries, it can be used by other departments and units within the University of Maryland. The design system is flexible and can be adapted to meet the specific needs of different teams while maintaining a consistent look and feel across the university's digital presence.
For the best experience, the following packages are required to be installed in your Drupal site:
- UMD Libraries Theme
- UMD Libraries Layout Tools
- UMD Libraries Sidebar Menu
- UMD Libraries Social Icons
- UMD Libraries UI Pattern Source
In the appearance settings of your Drupal site, you will need to install and set the "UMD Libraries Theme" to the default. This will ensure that all components and styles are properly applied across your site.
This solution utilizes Single Directory Components (SDCs) and the Layout Builder to provide a comprehensive design system implementation. The styling is implemented using design tokens defined in base.css, which creates and maintains consistent styling across all components while remaining flexible and adaptable.
Design tokens are centralized style variables (such as colors, spacing, typography, and other visual properties) that ensure visual consistency throughout the system. This token-based approach makes it easy to adapt this design system to other design systems or brand requirements—simply update the design token values in base.css rather than modifying individual component styles.
Therefore, there are two main parts in this design system wiki:
- Components: These are the individual UI elements that can be used to build pages. They are designed to be reusable and customizable, allowing for consistent design across different parts of the website.
- Layout: This provides the structure and arrangement of components on a page. It allows for flexible and responsive design, ensuring that the content is presented in an organized and user-friendly manner.