Problem/Motivation

Bootstrap v5.1.0 was released Aug 4, 2021, 6:46 PM GMT+3
https://github.com/twbs/bootstrap/releases/tag/v5.0.2

Bootstrap Barrio 5.5.2 was released 18 Jul 2021 at 23:42 EEST
https://www.drupal.org/project/bootstrap_barrio/releases/5.5.2

Proposed resolution

Have a new project vartheme_bs5 1.0.x branch to manage working with bootstrap_barrio 5.5.x branch

Bootstrap 5.1.0

  • RTL is out of the box supported in BS5

https://getbootstrap.com/docs/5.1/getting-started/rtl/
The documentation and examples
https://rtlstyling.com/posts/rtl-styling

  • RFS is using 9.0.5

https://github.com/twbs/rfs
https://getbootstrap.com/docs/5.1/getting-started/rfs/
The same RFS version which we had been using for quite time

  • No need for JQuery in Bootstrap 5
  • Use the same popper JS library. which Drupal 9 is using for back-end and front-end

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Initialize
  • ✅ Release 1.0.x-dev version
  • ✅ Clone vartheme_bs4 to vartheme_bs5
  • ✅ Change files to let Vartheme BS5 work with Bootstrap 5
  • ✅ Migrating to v5
  • ✅ Testing to ensure no regression
  • ✅ Automated unit/functional testing coverage
    14 Sep 2021 at 00:52 EEST
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ❌ Release varbase-9.1.0-beta1, vartheme_bs5-1.0.0-beta1

User interface changes

Vartheme BS4 default container width xl ( 1200px )

Vartheme BS4 default container width xl ( 1200px )

Vartheme BS5 default container width xxl ( 1400px )

Vartheme BS5 default container width xxl ( 1400px )

API changes

  • None

Data model changes

  • None

LTR Homepage with testing demo data

LTR Homepage with testing demo data

LTR Blog site section with testing demo data

LTR Blog site section with testing demo data

CommentFileSizeAuthor
#56 LTR--Blog-site-section--varbase9c1vartheme_bs5.png1.73 MBrajab natshah
#55 LTR--homepage--dev-varbase9c1vartheme_bs5.png2.17 MBrajab natshah
#22 dev-varbase9c1vartheme_bs5.png229.28 KBrajab natshah
#22 dev-varbase9c1vartheme_bs4.png212.81 KBrajab natshah
#19 Thinking and Developing Bootstrap 5 with Vartheme BS5 - BS5 vs BS4 vs BS3.png53.28 KBrajab natshah
#19 Thinking and Developing Bootstrap 5 with Vartheme BS5 - Mapping Bootstrap 4 into Bootstrap 5.png53.7 KBrajab natshah
#19 Thinking and Developing Bootstrap 5 with Vartheme BS5 - Bootstrap 5 vs Bootstrap 4.png41.42 KBrajab natshah

Comments

RajabNatshah created an issue. See original summary.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Version: » 1.0.x-dev
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented

  • RajabNatshah committed 6695e76 on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...

  • RajabNatshah committed 725d473 on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...
rajab natshah’s picture

rajab natshah
he/him
commented

Testing the 1.0.x-dev branch

  "require": {
    ...
    ...
    "drupal/vartheme_bs5": "1.0.x-dev@dev"
  },
  "replace": {
    "drupal/vartheme_bs4": "*"
  },
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented

Have the display and print bootstrap utility

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                true !default;
$enable-rounded:              true !default;
$enable-shadows:              false !default;
$enable-gradients:            false !default;
$enable-transitions:          true !default;
$enable-reduced-motion:       true !default;
$enable-smooth-scroll:        true !default;
$enable-grid-classes:         true !default;
$enable-cssgrid:              false !default;
$enable-button-pointers:      true !default;
$enable-rfs:                  true !default;
$enable-validation-icons:     true !default;
$enable-negative-margins:     true !default;
$enable-deprecation-messages: false !default;
$enable-important-utilities:  true !default;

And based on
https://getbootstrap.com/docs/5.0/migration/#sass
https://github.com/twbs/bootstrap/blob/main/scss/bootstrap-utilities.scss


Utility API


https://getbootstrap.com/docs/5.0/utilities/display/#utilities-api

@import "../../node_modules/bootstrap/scss/helpers";    // Bootstrap helpers.

$utilities: [];

$utilities: map-merge(
  $utilities,
  (
    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    )
  )
);

@import "../../node_modules/bootstrap/scss/utilities/api";  // Bootstrap utilities.

  • RajabNatshah committed 7e837bd on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...
  • RajabNatshah committed b4a634e on 1.0.x
    Issue #3229295: Have the display and print bootstrap utility - in the...

  • RajabNatshah committed ec636e2 on 1.0.x 
    Issue #3229295: Have the display and print bootstrap utility - in the...

  • RajabNatshah committed 30b310c on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Thinking and Developing Bootstrap 5 with Vartheme BS5 - Bootstrap 5 vs Bootstrap 4.png41.42 KB
new Thinking and Developing Bootstrap 5 with Vartheme BS5 - Mapping Bootstrap 4 into Bootstrap 5.png53.7 KB
new Thinking and Developing Bootstrap 5 with Vartheme BS5 - BS5 vs BS4 vs BS3.png53.28 KB

  • RajabNatshah committed a74ef6a on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...

  • RajabNatshah committed 4218364 on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new dev-varbase9c1vartheme_bs4.png212.81 KB
new dev-varbase9c1vartheme_bs5.png229.28 KB

  • RajabNatshah committed d2a2a86 on 1.0.x 
    Issue #3229295: Add a Jumbotron component as it was removed from...

  • RajabNatshah committed 28c1d42 on 1.0.x 
    Issue #3229295: Initialize Varbase Theme (Bootstrap 5 - SASS) theme (...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

  • RajabNatshah committed 3e02656 on 1.0.x 
    Issue #3229295: Add RTLCSS and gulp-rtlcss to compile Bootstrap for RTL...

  • RajabNatshah committed f27133d on 1.0.x 
    Issue #3229295: Changed Schema for the configuration files of the...

  • RajabNatshah committed ddd5b78 on 1.0.x 
    Issue #3229295: Changed Schema for the configuration files of the...

  • RajabNatshah committed 0f1b88f on 1.0.x 
    Issue #3229295: Changed Schema for the configuration files of the...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
31 Aug 2021 at 14:11 EEST
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Related issues: +#3230626: Fix Schema for the configuration files of the Bootstrap Barrio

#3230626: Fix Schema for the configuration files of the Bootstrap Barrio

rajab natshah’s picture

rajab natshah
he/him
commented
Related issues: +#3230650: Change outdated Bootstrap 4 documentation texts and links on the 5.5.x branch

#3230650: Change outdated Bootstrap 4 documentation texts and links on the 5.5.x branch

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

  • RajabNatshah committed ff39194 on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed d3a349d on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed dfb363a on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed 4b22c91 on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed 246f4ca on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed 581508e on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed c1e1a30 on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript

  • RajabNatshah committed 4752448 on 1.0.x 
    Issue #3229295: Change automated testing to Functional Javascript
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
14 Sep 2021 at 00:52 EEST
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: rajab natshah » mohammed j. razem
Issue summary: View changes
Status: Active » Needs review
Issue tags: +vartheme_bs5-1.0.0-alpha1
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: mohammed j. razem » Unassigned
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
Issue tags: -vartheme_bs5-1.0.0-alpha1 +varbase-9.1.0-beta1, +vartheme_bs5-1.0.0-beta1
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new LTR--homepage--dev-varbase9c1vartheme_bs5.png2.17 MB
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new LTR--Blog-site-section--varbase9c1vartheme_bs5.png1.73 MB