v5.2.0 design refresh, plus responsive offcanvas classes #35736
Conversation
mdo
changed the title
|
super nitpicky: with the page background now |
|
otherwise though, looking nice a modern and fresh. good stuff! will dig in a bit deeper later |
|
I don't like the radius change. |
The
Not seeing any distortion here. |
Oops, my fault, was going just by the screenshot rather than firing it up live (and oddly, the .png has a mix of
Anyway, ignore that then :) |
| @@ -3,6 +3,6 @@ | |||
| <link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> | |||
| <link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> | |||
| <link rel="manifest" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/manifest.json"> | |||
| <link rel="mask-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> | |||
| <link rel="mask-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> | |||
There was a problem hiding this comment.
Should we generate new favicons/social images too?
mdo
force-pushed
the
new-masthead
branch
6 times, most recently
from
4405642
to
c5c85be
Compare
mdo
force-pushed
the
new-masthead
branch
4 times, most recently
from
3c72ef2
to
71d03f2
Compare
mdo
force-pushed
the
new-masthead
branch
3 times, most recently
from
d1e92e0
to
57353d1
Compare
|
Just pushed some more changes, including bringing in DocSearch v3. Still some more to clean up—including an odd jumping when you hit
|
|
@mdo nice catch on algolia v3. |
|
Moved DocSearch changes to #36176. |
mdo
force-pushed
the
new-masthead
branch
2 times, most recently
from
69abb99
to
9db4f62
Compare
|
It is very huge to be sure, but to the point I could follow, I didn't find something dysfunctional. |
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now. - Adds some JS to the offcanvas component to help with responsiveness Co-Authored-By: GeoSot <[email protected]>
Homepage: - New Bootstrap purple navbar - Redesigned masthead - Rewrote and redesigned homepage content - Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances - Fixed padding issues in site footer - Match homepage button styles to examples page, use gap instead of tons of responsive margin utils Docs: - New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles. - New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings - Sidebar navigation autoscrolls to active link for better usability - Subnav and navbar padding issues ironed out - Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version. - Redesign callouts to add more color to our pages - Collapse table of contents on mobile - Cleanup and redesign button styles with CSS variables - Update design for subnav version dropdown - Update highlight and example to be full-width until md - Improve the Added In badges - Turn the ToC into a well on mobile - Redesign code snippets to better house two action buttons Examples: - Redesign Examples page layout - Add new example for responsive offcanvases in navbars
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior The `aria-modal` addon is to protect us, selection backdrop elements
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
.activelink, 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-4and.border-5.Refreshes
border-radiuson 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 Responsive classes for offcanvas #33387.
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 as well.
JS changes from @GeoSot fixes #35594.
Todos
gh-pages? This would cross-link v5.1.x pages with their v5.0.x counterparts.borderandfont-weightutilitiesPreview: https://deploy-preview-35736--twbs-bootstrap.netlify.app/