migrate to bootstrap 5

[evanwill]

@owikle @dcnb take a look at branch bootstrap-upgrade

migrating to bootstrap 5:

• update assets
• remove jquery and fix all js
• update icons to bs-icons
• color theming
• test theme options
• test includes

[evanwill]

@owikle @dcnb PRs are poised on -GH, -CSV, -Sheets, and cb-docs for bootstrap 5 update. Let me know if you have any concerns before I merge them all!
The style looks a bit different, wider container, slightly different fonts, colors accessible but uglier.
I removed all btn-info because they are ugly, and all btn-outline-info since they aren't accessible except on dark background.

[evanwill]

p.s. I did not do -CONTENTdm.

[owikle]

Most of the changes look good but it's sad that the colors are so ugly. I especially don't like that primary clashes with the remaining info elements, like timeline highlight and featured image link--maybe we should change those too? I also fixed a forgotten info button on the about page in gh and csv.

[dcnb]

I'd like to get a few palettes together for this: https://huemint.com/bootstrap-plus/ this site looks promising for doing this, and I'm wondering if we can use the work Evan's already done with the color theming to implement some built in options. Users like to customize the look, that's for sure -- I think it'd be great if we could lean more this way and less bootswatch way. Maybe aim for four palettes, one a Vandal Gold? And then vet those for accessibility/readability. Maybe it's time to bring someone with a really good color/design sense in?

…

On Tue, May 3, 2022 at 4:08 PM owikle ***@***.***> wrote: Most of the changes look good but it's sad that the colors are so ugly. I especially don't like that primary clashes with the remaining info elements, like timeline highlight and featured image link--maybe we should change those too? I also fixed a forgotten info button on the about page in gh and csv. — Reply to this email directly, view it on GitHub <#59 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACTM4GP3PY426K5ZXJLFZI3VIGWW3ANCNFSM5RSV2LQA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[evanwill]

I think two simple approaches that could work well:

1. have a set of values documented you could paste into "config-theme-colors.csv" that make a logical set of changes (or downloadable csvs of themes). i.e. the theming just basically swaps out the btn colors (it currently generates btn-, btn-outline-, text-, and bg- classes. we could probably add link and text classes easily. to make it work well, we just need to more carefully apply all the bs color values across the template elements)
2. have a set of custom css (like from that bootstrap-plus generator) that does similar thing to bootswatch, but less extreme, more logical color themeing--and handle it exactly how the bootswatch option is currently. The extra css are pre generated, and are just in the assets. there are like 2 - 4 options that we figure out.

[evanwill]

honestly though, I didn't like the info btns anyway now that I look at them closely! It is hard to read. I think we just had them because originally we were using UofI "Clearwater Blue", and then I wanted to de-customize the colors, and info was practically the same color...

[evanwill]

Actually, thinking about it a bit more, another good option:
3. have a set of theme scss in "_sass", choose one in "theme.yml" just like choosing bootswatch. Having it in _sass would let you set up some custom theme options, plus the theme file could use the theme-color utilities without adding something to "config-theme-colors.csv". swapping them out happens in "assets/css/custom.scss".

[evanwill]

option 2 is best if we are using some external generator to produce bootstrap themes,
option 3 if we are just setting it up ourselves

[evanwill]

For option 2, combine Huemint generator with bootstrap build to get ready to use themed bootstrap.min.css

[evanwill]

moved theme discussion to main CB repo issue