Contrib.social

Replace Bootstrap-specific utility class generation with field-based utility class input for broader theme compatibility

Open on Drupal.org →
Created on 7 April 2025, 17 days ago

Problem/Motivation

VLSuite currently relies on Bootstrap-specific utility class conventions when rendering layout and alignment, using prefix/suffix logic (e.g., Prefix text => suffix right, text => center). While this worked under Bootstrap themes, it makes the module incompatible with sites using other front-end frameworks or custom themes.

This tight coupling with Bootstrap limits the module's flexibility and poses issues for broader theme adoption in Drupal 10+ projects.

Steps to reproduce

  1. Enable a non-Bootstrap theme (e.g., Olivero or custom theme).
  2. Configure VLSuite layout using utility styles.
  3. Observe that the rendered utility classes (e.g., using prefix or suffix values) do not apply or are invalid under the current theme.

Proposed resolution

  • Remove the automatic generation of utility classes based on the Bootstrap-style prefix/suffix logic.
  • Introduce a new field-based approach that allows the site builder to define utility classes manually.
  • This change decouples the module from any specific CSS framework and allows full compatibility with any theme.
  • Update the form UI for managing utility classes to reflect the new configuration approach.

Remaining tasks

  • Implement the new utility class input system.
  • Deprecate the existing prefix/suffix-based logic.
  • Provide an upgrade path (e.g., automated update hook or migration step).
  • Update tests and documentation to reflect the new configuration behavior.

User interface changes

  • Remove the existing prefix/suffix utility form elements.
  • Introduce a new input field (text or tokenized autocomplete) for defining utility classes manually.

API changes

  • If any APIs are exposed for utility style generation, they may need to be deprecated or replaced.

Data model changes

  • Update config/schema if utility class structure is stored in config.
  • Provide a safe migration path from the old data structure to the new field-based model.
✨ Feature request
Status

Active

Version

2.0

Component

Layout builder

Created by

🇪🇸Spain eduardo morales alberti Spain, 🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024