Skip to content

Upgrade to current Bootstrap - brings small design changes#22

Open
Zegnat wants to merge 7 commits into
microformats:mainfrom
Zegnat:feat/bootstrap-5-upgrade
Open

Upgrade to current Bootstrap - brings small design changes#22
Zegnat wants to merge 7 commits into
microformats:mainfrom
Zegnat:feat/bootstrap-5-upgrade

Conversation

@Zegnat

@Zegnat Zegnat commented Jul 11, 2026

Copy link
Copy Markdown
Member

Currently the template uses an old alpha version of Bootstrap 4. It does not make sense to be using an alpha version at all. Bootstrap 5 had its first release 2021-05-05, maybe it is time to make the step 5+ years later. This PR does a few things:

  1. Resolves Posher #13 by implementing some of the semantic HTML changes (to the sections) from @btrem. For this I also introduce a heading for the first page section, otherwise <section> does not make sense.
  2. Upgrade to Bootstrap 5, using the new official preferred CDN jsDelivr. Instead of the no-longer existing MaxCDN.
  3. Use as much stock Bootstrap as possible, removing all our own inline styling. Still use specific classes to try and match our old design spacing.
  4. As a minor accessibility tweak: move the mf2util description out of a title attribute and into an associate visible text instead.

As an aside I have also tweaked some inaccuracies in the README that were just never updated, like the move from the indieweb org to the microformats org. Happy to split that commit into a separate PR if it turns out this PR stalls.

Comparison

Before — Bootstrap 4.0.0-alpha.6 After — Bootstrap 5.3.8
Before After
  • Text is ever so slightly darker in Bootstrap 5.
  • Links have gotten back their underlines again. Usability win in my book, but opinions might differ.
  • Selects are now styled, but I think there used to be styling in Bootstrap 4 as well. The reason we did not style that might be lost to time.
  • The new success-green used by Bootstrap 5 is a little darker. Better contrast with the text colour on the buttons. But I would also accept that it might be too dark. It would be relatively easy to remap the button colours:
<style>
  .btn-success {
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #5cb85c;
    --bs-btn-hover-bg: #4cae4c;
    --bs-btn-hover-border-color: #4cae4c;
    --bs-btn-active-bg: #449d44;
    --bs-btn-active-border-color: #449d44;
  }
</style>

@gRegorLove gRegorLove left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants