Problem/Motivation
For now, the Drupal Bootstrap theme for most users simply doesn't work right after installation, breaking the first-time user experience!
Why? Because we do not set the bootstrap_source
value in the default setting at all!
As result, the Drupal front page looks like this after the theme installation:
If the user has not yet given up at this step and switched to another theme, they will try to go to the theme settings and somehow fix this. They will see the "Load library" with the options "None", "Local", and a lot of strange options like "Bootswatch *", but they want to just use the bare Bootstrap theme!
They will try to choose "Local" and this will not work too! Because the theme expects that the user already pre-downloaded the bootstrap library and placed it into the [DRUPAL_ROOT]/libraries/bootstrap
directory.
But in most cases, the Bootstrap library in this location is absent, which leads to displaying the Drupal frontpage UI completely unstyled again! And configuring Composer to download the Bootstrap library and place it there - is a quite complicated process.
The next step - they will try to choose some random theme from "Bootswatch *", but will see not the default bootstrap, but with some strange theme.
So, the question will remain open - how to configure the default Bootstrap style?
And the answer is - No way!
Steps to reproduce
1. Put yourself in the place of a regular Drupal Site builder.
2. Install the "Bootstrap" theme, expecting that everything will work out of the box.
3. Open the front page, and see that the site design is broken!
Proposed resolution
The solution for the described first-time user experience problem is very simple!
Let's just use by default the Bootstrap default CSS style from the official CDN, recommended by Bootstrap: https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links - just put into bootstrap.libraries.yml
this:
bootstrap_cdn:
js:
//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js: { type: external, minified: true }
css:
component:
//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css: { type: external, minified: true }
And set this option by default in the config/install/bootstrap.settings.yml
file:
bootstrap_source: 'bootstrap/bootstrap_cdn'
And that's it!
I prepared an MR with this simple fix, please review it and give feedback.
Remaining tasks
User interface changes
API changes
Data model changes