docsy icon indicating copy to clipboard operation
docsy copied to clipboard

Update to Bootstrap v5 #470

Open deining opened this issue 4 years ago • 7 comments

With official release bootstrap 5 coming soon, I just had a look at #470 to overcome the compatibility issues mentioned there. It turned out to be quite easy, there was only one thing I had to fix as mentioned in the migration guide:

color-yiq() function and related variables are renamed to color-contrast()

With this PR applied, hugo runs with bootstrap 5. You may have a look at the netlify deploy associated with this PR.

I thought I share this already, though we should wait with the merge until bootstrap 5 is officially released. Maybe it is of help for others that want to play around with bootstrap 5 beta version already.

Preview: https://deploy-preview-517--docsydocs.netlify.app/

deining avatar Apr 12 '21 15:04 deining

Oh, that's good that it's a simple fix! I'll try making the change to a site running on Netlify with the latest Bootstrap and Hugo versions and see what happens.

LisaFC avatar Apr 12 '21 16:04 LisaFC

I'll try making the change to a site running on Netlify with the latest Bootstrap and Hugo versions and see what happens.

Even easier: have a look at the netlify deploy associated with this PR. Overall it looks pretty good, but a few quirks need to be fixed:

  • The font for the text Welcome to Docsy on the start screen looks quite different.
  • The top heading is not perfectly aligned
  • For all documentation pages, the left margin of the main text area in the middle was reduced to zero.

deining avatar Apr 12 '21 18:04 deining

Ah yes, of course! And ooh yes, it seems like it's doing something very odd to some of our fonts and alignment. I'll play around with it and see what's happening in the generated HTML etc. Definitely won't move to v5 until we can come up with something that works with it and doesn't break formatting with v4.

LisaFC avatar Apr 15 '21 10:04 LisaFC

Definitely won't move to v5 until we can come up with something that works with it and doesn't break formatting with v4.

I fully understand and agree with this decision. Bootstrap has accordion control implemented which look nice to me and could be useful in various places. Implementing shortcodes for accordions should be quite easy since their markup is quite similar to the tabbed panes we already have. I'm willing to contribute a PR once bootstrap 5 is out and integrated into docsy theme.

I'll play around with it and see what's happening in the generated HTML etc.

Looking forward to your findings! Good luck!

deining avatar Apr 15 '21 13:04 deining

@geriom can you figure out how/if you fixed this in Tekton?

LisaFC avatar Sep 27 '21 17:09 LisaFC

@deining et all: Shall we use this as a base to move forward with the upgrade or create a new PR entirely? A lot has changed since this was originally submitted.

/cc @glasnt

chalin avatar Aug 18 '22 15:08 chalin

I've rebased and upgraded BS to v5.2.0. I'll then progressively work my way through the migration document and commit sectional changes as I go.

chalin avatar Aug 19 '22 01:08 chalin

I've rebased and upgraded BS to v5.2.0. I'll then progressively work my way through the migration document and commit sectional changes as I go.

Great.

I just bumped BS to latest version v5.2.3 and Font-Awesome to version 6.2.1.

deining avatar Dec 04 '22 09:12 deining

As agreed out-of-band, I'll be merging this initial work.

chalin avatar Jan 23 '23 19:01 chalin