Upgrade to bootstrap v5

[lydiascarf]

Some notes about things that look funky:

• the categories grid on the home page doesn't look very grid-like (this will be covered by another issue we have on opendataphilly-jkan)

Questions:

• I solved the breadcrumb background issue quickly by adding some styles to the breadcrumb class, but if I'm understanding this comment correctly, the goal is to use Jekyll's built-in scss support to override Bootstrap's styles, and that's waiting on the Ruby bootstrap gem. I can try installing the bootstrap gem next, but did I get that right? Sorry, I'm new to Jekyll and rusty with Bootstrap.
• The package.json and script tag are both updated, but now we're also talking about adding bootstrap as a Ruby gem. Just to clarify, will all of these be needed?

@timwis what do you think about the above questions?

[netlify[bot]]

✅ Deploy Preview for jkan-demo ready!

Name	Link
🔨 Latest commit	a481391ea43796d7531fe73848f0ac951e4f5baa
🔍 Latest deploy log	https://app.netlify.com/sites/jkan-demo/deploys/641c768b9b91be000746f78a
😎 Deploy Preview	https://deploy-preview-260--jkan-demo.netlify.app/organizations
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[timwis]

Hey @lydiascarf thanks for working on this, and great questions. On my mobile at the moment, but will try to share some resources. The main thing I read is Bootstrap's customisation docs. There are a few ways to do it, but the way I've done it before is the sass way. As described on their sass page, we'd pull in the Ruby gem, then have a main.scss file that (1) imports a variables.scss file, (2) imports bootstrap's sass (either the full lib or just the components we need), then (3) has our application-specific styling. It's this variables.scss file where we'd override the default bootstrap variables, of which there are many (including one for the background colour of the breadcrumb component). This lets us do things like set it to colours from the default palette like $secondary, and JKAN users can just customise what $secondary is (or use a bootstrap theme). Let me see if I can find an example of this variables file.

You're right that we wouldn't need the script tag anymore, as bootstrap's css would be bundled in our application's css. We would still need to import the JavaScript package, though, since that's built by parcel, but fortunately there's no duplication there (apart from on dev laptops), since the former just outputs the css and the latter just outputs the js.

The thing I struggled with was getting the Ruby gem working with the Jekyll build command. I'm under the impression it should work pretty seamlessly, but I was planning to dive into the Jekyll docs on sass to figure out what I was doing wrong.

[lydiascarf]

@timwis I also had trouble getting the Ruby gem working. I'm going to mark this as ready for review, since getting it through will unblock other UX work on our end

[timwis]

Sure, that's fine. We can work on the customisation/gem stuff separately. Note that this drops support for JKAN Themes (bootswatch only supports bootstrap v4), so I'll add that to the release notes for v2.