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.yml