Contrib.social

Add a Root component as a Base, Contains root CSS3 Bootstrap variables to Vartheme BS5

Open on Drupal.org →
Created on 18 July 2024, 4 months ago
Updated 9 September 2024, 2 months ago

Problem/Motivation

As a content admin,
I want to easily apply styles to my content.
so that I can make an engaging page that follow only the approved styles per the guide.

Proposed resolution

  • ✨ Add a Root component as a Base, Contains root CSS3 Bootstrap variables to Varbase Components Fixed
  • Add a new component called "root" as a Base: Consisting of the color palette, typography, shadows, and spacing. which will contain a list of CSS3 variables.
  • Include the new root component to vartheme_bs5 and load the component instead to be part of the "bootstrap.base.scss" file.
  • Add varbase_components/root: vartheme_bs5/root in libraries-override in the vartheme_bs5.info.yml file

This will be removed from the "bootstrap.base.scss" file and moved to be a component.

🐛 Fix Theme source theme vartheme_bs5 is not a valid starter kit when Create new Vartheme BS5 Cloned Generated Theme Active

Change on Cloned Generated Theme themes
( new and old custom cloned themes)

  • Add ckeditor5.bootstrap.base.css file to ckeditor5-stylesheets in the vartheme_bs5.info.yml file. with .ck-content wrapper class

    ckeditor5-stylesheets:
  - css/base/ckeditor5.bootstrap.base.css

    with 

    @import "../defaults";   // Global defaults.

// CKEditor 5 integration with Bootstrap 5 styling.
// -----------------------------------------------------------------------------

.ck-content {
  @import "../../node_modules/bootstrap/scss/reboot";
  @import "../../node_modules/bootstrap/scss/type";
  @import "../../node_modules/bootstrap/scss/images";
  @import "../../node_modules/bootstrap/scss/tables";
  @import "../../node_modules/bootstrap/scss/buttons";
  @import "../../node_modules/bootstrap/scss/badge";
  @import "../../node_modules/bootstrap/scss/list-group";
}

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-10.0.1 → , vartheme_bs5-3.0.1 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3462276 → by n.ghunaim → : Added a Root component as a Base, Contains root CSS3 Bootstrap variables to Vartheme BS5
✨ Feature request
Status

Fixed

Version

3.0

Component

Code

Created by

🇯🇴Jordan n.ghunaim Amman - Jordan

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