Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
It has become quite clear that managing the "overrides" is rather complicated and bloats this project unnecessarily.
Also, after implementing #2831589: Add grunt-contrib-csslint to maintainer workflow, the "linting" really only catches the LESS source files, not the SASS source files.
It would be better if this lived as a separate project that can be added via JsDelivr CDN or downloaded for source compilation.
Work left todo:
Remove all stylesRemove all grunt/automationRemove all starterkitsImplement this in the base theme's CDN Provider APIUpdate documentation to reflect this change- Update change record to further document/discuss this change
Comment | File | Size | Author |
---|---|---|---|
#13 | 2852156-13.patch | 20.2 KB | markhalliwell |
Comments
Comment #2
markhalliwellThis probably won't happen until 8.x-4.x.
Comment #3
temkin CreditAttribution: temkin at SiteCraft commentedHi @markcarver. First of all, thank you for a great theme! It would be awesome to add a support for Bootstrap 4 to it though. So I started to look at issues that you identified as blockers and got here.
Before I dive deeper I wanted to clarify why you want to move overrides and generated CSS into a separate module, instead of declaring them as a library dependency. At a first glance that could be a better solution, but maybe I'm missing something.
Comment #4
markhalliwellThis is now a completely separate repository for all permutations of Drupal Bootstrap styles: https://github.com/unicorn-fail/drupal-bootstrap-styles
It's also published as an NPM package: https://www.npmjs.com/package/@unicorn-fail/drupal-bootstrap-styles
This is to leverage jsDelivr's API/CDN. This new project compiles it's own "api.json" file for the sole purpose of simplifying the massive permutations:
https://cdn.jsdelivr.net/npm/@unicorn-fail/drupal-bootstrap-styles/dist/...
This file is necessary as not all permutations are actually published (there's a ton of duplication, 600+ files at one count).
Instead, there is a
symlink
key that points to the most recent file that matches its own file contents, e.g.:As you can see, https://cdn.jsdelivr.net/npm/@unicorn-fail/drupal-bootstrap-styles/dist/... does not actually exist.
Instead, we'll need to use the
symlink
value when populating the CDN Provider data in the base theme:https://cdn.jsdelivr.net/npm/@unicorn-fail/drupal-bootstrap-styles/dist/...
There are, of course, minified equivalents as well:
https://cdn.jsdelivr.net/npm/@unicorn-fail/drupal-bootstrap-styles/dist/...
---
Now that the "bulk" of this work is done, if people want to help tackle the above @todo's, please assign this issue to yourself so I know you're working on it. Also, feel free to ask questions here if you don't understand something.
Comment #7
markhalliwellComment #8
markhalliwellComment #9
zenimagine CreditAttribution: zenimagine commentedI do not understand what to do. Currently I have the file locally in my theme and I add to bootstrap_subtheme_front_office.libraries.yml
How can I continue to use the file locally ?
Comment #10
zenimagine CreditAttribution: zenimagine commentedComment #11
markhalliwell@zenimagine, you can no longer do what you're doing because this project no longer bundles the "overrides" CSS.
The source files have moved to https://github.com/unicorn-fail/drupal-bootstrap-styles, but the compiled/distributed code is only bundled when published as an NPM package.
Instead, you should just add https://cdn.jsdelivr.net/npm/@unicorn-fail/drupal-bootstrap-styles/dist/... to your libraries file as an external resource.
If you really want to incorporate it locally though (not recommended as then it could become stale), just add it to your sub-theme.
Comment #12
markhalliwellComment #13
markhalliwellComment #15
markhalliwellThis should now automatically inject the external Drupal Bootstrap Styles when using a CDN.
Note, as mentioned above not all permutations are actually published. This means that the file actually used may have a different version, branch or even theme (or lack thereof). While it may be confusing at first, this just means that the file wanted was technically the same as the one it was symlinked to and ultimately served.
While it'd be nice to (semantically at least) have a single file per branch, version, and theme... the reality is that doing so wouldn't be very efficient, especially for a CDN; 747 files totaling ~10 Mb worth of data reduced down to just 134 files and totaling ~2 Mb.
Comment #17
markhalliwellComment #18
temkin CreditAttribution: temkin at SiteCraft commentedSo excited to see things moving here! Thanks so much, @markcarver!
I'll be starting a new sub-theme based on this within the next couple of weeks. Although documentation still suggests to use Bootstrap 3.x, I assume that 4.x should be fine as well, right?
I'll give it a try and report here (or in separate issues) if there are any problems.
Comment #19
waverate CreditAttribution: waverate commentedJust providing feedback to the commit at #16.
A. Using CDN Provider
I installed 3.x-dev and followed the directions in /docs/Sub-Theming.md Using the Starterkit. No issues, worked perfectly for using a CDN Provider like jsDelivr.
B. Compiled SASS
I installed 3.x-dev and followed the directions in /docs/Sub-Theming.md Using the Using Source Files SASS. I used a different workflow than Mark's recommendations as it was closer to what I am used to. After creating the subtheme similar to Using the Starterkit, I:
cdn_provider: ''
composer require twbs/bootstrap
to download the library and symlinked vendor/twbs/bootstrap-sass to bootstrap in my sub-theme.composer global require leafto/scssphp
and then my executable from the scss directory waspscss < style.scss > ../css/style.css
Aside from my own poor workflow, because I don't use front-end tools, the last commit at #12 for the starterkit and the documentation works well.
Thank you Mark.
Comment #20
markhalliwellNo, this project has not yet opened up development on 8.x-4.x yet, see
#2554199: Bootstrap 4.
Comment #21
markhalliwellNo, and it likely won't have one. Composer is meant for PHP libraries, not front-end assets (despite there being several, including a bootstrap one). Composer is also managed at a site-wide/DOCROOT level, meaning the assets would be loaded outside the theme. This is not considered "Best Practice™", especially for multi-site/multi-sub-themes.
All theme assets should be included in the theme itself.
If you really want to use a package manager, you should use
npm
instead as it's published here https://www.npmjs.com/package/@unicorn-fail/drupal-bootstrap-styles and is a more appropriate method of local installation:Then the styles would be located in
./themes/THEMENAME/node_modules/@unicorn-fail/drupal-bootstrap-styles
.As stated in the documentation though, this really falls outside the scope of this project. There are too many ways to do this... how you get it to work or where it's installed is really irrelevant to the steps. The only reason I'm saying anything about this is that there are no plans (and likely never will be any) to include composer support for this external project.
Comment #22
yasThis is my feedback to the commit at #16
As well as #19 by @waverate, I installed
3.x-dev
and followed the directions in/docs/Sub-Theming.md
. I also used Starterkit. I could use my sub-theme with using a CDN Provider,jsDelivr
. The following is my automated update bash script:edit: Moved script to https://pastebin.com/VTcq73mZ
Comment #23
markhalliwellRe: #19 & #21, while I appreciate the feedback that the steps are working, posting specific workflows is not the goal of this issue/project. That is why the documentation is generic and left up to you to implement however you see fit.
I ask that feedback be limited to actual issues with the documentation, not custom workflows/scripts which detract from the issue at hand.
Comment #24
markhalliwellCreated this issue's own dedicated change record: https://www.drupal.org/node/3049485
If someone wants to help tackle this, please feel free to edit that node.
Comment #27
markhalliwell