Skip to content
GitLab

v5.2.0 design refresh, plus responsive offcanvas classes

Merged Mark Otto requested to merge new-masthead into main

bootstrap-v520-home

bootstrap-v520-docs

This is a redesign of the homepage and docs layout to give v5.2.0 some new life. I've been playing around with this while recovering from my heart attack, so not everything is perfect, but it feels refreshing to me. And while the design has been updated, so too has the homepage content.

Here are the key changes:

  • New homepage design and content. I've rewritten the homepage to better articulate what comes with Bootstrap and how it's powerful/useful to folks. Key content additions are the utility API, JavaScript plugins, and increasing CSS variable usage.

  • New documentation sidebar. The sidebar of the docs pages has been updated to include colorful Bootstrap Icons as part of the section headers and an always expanded list of links. I've also written some JS (lol) to automatically scroll the sidebar to the .active link, so you can always tell where you are and quickly jump around that section.

  • Cross-linking page versions is coming. I've added a first step at cross-linking the same page across the various versions, unless the page was added in another release (e.g., with the CSS Grid page in v5.1.0). Now in the dropdown, we'll give you a link back to each release and show a disabled version number if the page isn't a part of that previous release.

  • Adds a handful of new utilities. Bootstrap now includes .fw-semibold, which we use across our new homepage, and additional .border-* sizes with .border-4 and .border-5.

  • Refreshes border-radius on buttons and form controls. You might notice that buttons, inputs, and more have been slightly tweaked with increased radii on their corners. This is purely an aesthetic change to make buttons look a little more button-y (and our form controls updated to match).

  • Adds responsive offcanvas support outside navbars. Redesigns the navbar in our docs to use this to collapse our sidebar on narrow viewports. Fixes #33387 (closed).

There are some other miscellaneous updates to fine-tune things as well. I've fixed some inconsistent padding between docs navbar, subnav, content, and footer. I've also tweaked some page copy here and there as part of the refresh.

Fixes #33993 (closed) as well.

JS changes from @GeoSot fixes #35594 (closed).

Todos

  • Consider reverting sidebar width change
  • Update the versions dropdown to include v5.1.3 links
  • Consider cutting a v5.1.4 release with docs version picker changes? Or just push to gh-pages? This would cross-link v5.1.x pages with their v5.0.x counterparts.
  • Double check any optimizations we might need (e.g., newly added custom icons sprite)
  • Document new border and font-weight utilities
  • Sidebar is too tall on mobile hurting usability since the user needs to scroll a lot
  • Work on JS and fix tests

Preview: https://deploy-preview-35736--twbs-bootstrap.netlify.app/