Part of the UI ecosystem · 45 projects
This project allows developers to define reusable style components, such as colors or spacing, that can then be easily applied by site builders through Drupal's administrative interface to various elements like blocks, Layout Builder, and views. It also generates a styleguide to document these available styles.
Allows developers to define styles from modules and themes and site builders to use them from Drupal admin interface.
The styles are:
- collections of mutually exclusive, self-descriptive, single-purpose CSS classes. Examples: Typography, Borders, Background colors, Spacing....
- commonly used in design systems, and can also be called "helpers", "utilities", "fundamentals"...
- Drupal plugins, created and managed by the themer, inside a single YML file.
Examples of styles in upstream design systems:
- Bootstrap’s utilities: https://getbootstrap.com/docs/5.3/utilities/api/
- Tailwind in DaisyUI: https://daisyui.com/docs/utilities/
- Material’s styles: https://m3.material.io/styles
- Bulma’s helpers: https://bulma.io/documentation/helpers
- PatternFly’s utility classes : https://www.patternfly.org/utility-classes/about-utility-classes
- USWDS’s utilities: https://designsystem.digital.gov/utilities/
- ...
Styleguide
A styles library page is generated as documentation for content editors or as a showcase for business and clients:
Site building features
Once created, the styles can be used with:
Block, on block titles, block content and block wrappers.Themes regions. Note that if you have a region's Twig template not using the attributes variable it will not work.
Layout Builder, on block titles, block content, block wrappers, sections and sections' regions. It works also with layout builder overrides (custom layout for a content entity).
Views, on view wrappers ("view styles"), exposed forms and pagers.
Ckeditor5, as inline class and as block class.
Entity Status, on unpublished entities.
Paragraphs. Available styles are setup for each paragraph type.
It is also possible to add free extra classes, using a simple text field.
Each integration is a module to activate:
Feel free to propose other integrations.
UI Suite
UI Suite provides a cohesive set of modules to implement full design systems while preserving and improving the Drupal site building experience.
UI Styles can be used as standalone, but shines with other UI Suite modules. Together, they provide a a full API to implement design systems:
Showcases
UI Suite themes are all using UI Styles:
Bootstrap 4 & 5 DSFR (French Gov) USWDS (US Gov) See ui_styles.yml See ui_styles.yml See ui_styles.yml DaisyUI Material Design 2 Mozilla Protocol See ui_styles.yml See ui_styles.yml See ui_styles.ymlAsk your assistant about UI Styles
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
7 tracked projects depend on this one
- Ui Suite Bootstrap 360 sites
- Ui Suite Dsfr 95 sites
- Drupal Website Development 33 sites
- UI Suite UIkit 31 sites
- UI Controls 16 sites
- UI Suite DSFR Utilities 3 sites
- Webtheme 1 sites
More in the UI ecosystem
Most installed first
Activity
Release Timeline
Releases
| Version | Type | Core | PHP | Release date | |
|---|---|---|---|---|---|
| 8.x-1.13 | Stable | 10–11 | Dec 6, 2024 | ||
| 8.x-1.12 | Stable | 10–11 | Oct 17, 2024 | ||
| 8.x-1.11 | Stable | 10–11 | Sep 13, 2024 | ||
| 8.x-1.10 | Stable | 10–11 | Aug 22, 2024 | ||
| 8.x-1.9 | Stable | 10 | May 14, 2024 | ||
| 8.x-1.8 | Stable | 10 | Feb 1, 2024 | ||
| 8.x-1.7 | Stable | 10 | Dec 14, 2023 | ||
| 8.x-1.6 | Stable | 9–10 | Aug 17, 2023 | ||
| 8.x-1.5 | Stable | 9–10 | Feb 28, 2023 | ||
| 8.x-1.4 | Stable | 9–10 | Jan 19, 2023 |