Module Description
Allows developers to define styles from modules and themes and site builders to use them from Drupal backoffice.
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.
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:
Layout Builder, on block titles, block content, block wrappers and sections. 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. 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 Initiative 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 Material Design 2 Mozilla Protocol See ui_styles.yml See ui_styles.yml See ui_styles.yml DSFR (French Gov) Zurb Foundation See ui_styles.yml See ui_styles.yml
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.
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:
Layout Builder, on block titles, block content, block wrappers and sections. 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. 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 Initiative 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 Material Design 2 Mozilla Protocol See ui_styles.yml See ui_styles.yml See ui_styles.yml DSFR (French Gov) Zurb Foundation See ui_styles.yml See ui_styles.yml
Module Link
Project Usage
549
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the issue of defining and using collections of self-descriptive CSS classes for developers and site builders in Drupal backoffice.
Data Name
ui_styles
OPENAI CHATBOT
OPENAI CHATBOT
