Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update bootstrap to 5.x or remove it #4164

Closed
parlough opened this issue Aug 8, 2022 · 0 comments · Fixed by #6357
Closed

Update bootstrap to 5.x or remove it #4164

parlough opened this issue Aug 8, 2022 · 0 comments · Fixed by #6357
Assignees
Labels
e3-weeks Complete in < 4 weeks of normal, not dedicated, work infra.design Relates to the design of docs.Dart.dev infra.structure Relates to the tools that create dart.dev p1-high Major but not urgent concern: Resolve in months. Update each month. st.triage.ltw Indicates Lead Tech Writer has triaged

Comments

@parlough
Copy link
Member

parlough commented Aug 8, 2022

Describe the problem

We currently use Bootstrap 4 across the site, which has now been superseded by Bootstrap 5, and it currently requires we pull in jquery as well. Beyond that, our current use of bootstrap is quite messy, with lots of overrides, and custom styles anyway.

Expected fix

We should either migrate to Bootstrap 5 if the migration isn't too hard, otherwise consider removing our usage of it completely, as we have a lot of custom styles and overrides anyway.

Additional context

No response

@parlough parlough added infra.structure Relates to the tools that create dart.dev p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. infra.design Relates to the design of docs.Dart.dev e3-weeks Complete in < 4 weeks of normal, not dedicated, work labels Aug 8, 2022
parlough added a commit that referenced this issue Jan 10, 2023
The old `sassc` gem uses libsass which is deprecated, replaced by Dart
sass which is used by sass-embedded and jekyll-sass-converter 3+.

This PR updates to use Dart Sass, to help keep new changes compatible
with future Sass and Jekyll versions but also as a step towards
#4164.

Using `/` as a division operator [is
deprecated](https://sass-lang.com/documentation/breaking-changes/slash-div),
so the options are `calc(x / y)`, `math.div(x, y)`, or in some cases it
makes sense to switch to multiplication instead. This PR chooses
switching to multiplication for most instances.
@parlough parlough self-assigned this Jun 7, 2023
@parlough parlough added p2-medium Necessary but not urgent concern. Resolve when possible. and removed p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. labels Jun 7, 2023
parlough added a commit that referenced this issue Jun 9, 2023
- Removes unused styles
- Improves formatting and spacing
- Moves some code to proper locations
- Removes now unnecessary files

Preparation to make future work towards
#4164 easier. Has the added
benefit of reducing final CSS size a bit.
johnpryan pushed a commit that referenced this issue Jun 26, 2023
`@import` is being deprecated in favor of `@use` in Dart Sass (which we
are now using). Read more within Sass's [`@import`
documentation](https://sass-lang.com/documentation/at-rules/import).

Contributes to #4164 since
it will make that migration easier, with all bootstrap usages
namespaced. Also enables better code analysis and auto-completion in
IDEs.
@parlough parlough added the st.triage.ltw Indicates Lead Tech Writer has triaged label Aug 2, 2023
rmacnak-google pushed a commit to rmacnak-google/site-www that referenced this issue Sep 5, 2023
- Removes unused styles
- Improves formatting and spacing
- Moves some code to proper locations
- Removes now unnecessary files

Preparation to make future work towards
dart-lang#4164 easier. Has the added
benefit of reducing final CSS size a bit.
rmacnak-google pushed a commit to rmacnak-google/site-www that referenced this issue Sep 5, 2023
…-lang#4974)

`@import` is being deprecated in favor of `@use` in Dart Sass (which we
are now using). Read more within Sass's [`@import`
documentation](https://sass-lang.com/documentation/at-rules/import).

Contributes to dart-lang#4164 since
it will make that migration easier, with all bootstrap usages
namespaced. Also enables better code analysis and auto-completion in
IDEs.
@parlough parlough added p1-high Major but not urgent concern: Resolve in months. Update each month. and removed p2-medium Necessary but not urgent concern. Resolve when possible. labels Jan 7, 2025
MaryaBelanger pushed a commit that referenced this issue Jan 21, 2025
- Updates the sidenav static generation logic to match `flutter/website`
for improved build performance and consistency. Also removes the need
for specifying `match-page-url-exactly` on directory index pages.
- This changes the 11ty related `filters.ts` and `eleventyComputed.js`
files. These changes have already been reviewed and been in use by
`flutter/website` for a while.
- Redesigns the sidenav for improved accessibility and reducing
dependence on Bootstrap.
- Reimplements the site layout in preparation for Bootstrap removal and
improving scrolling.
- Removes a bunch of now unneeded logic and styles, further supporting
the later removal of Bootstrap.

Fixes #5791
Fixes #5789
Contributes to #4164
Contributes to #3849
Prepares for #2625
parlough added a commit that referenced this issue Jan 23, 2025
parlough added a commit that referenced this issue Jan 23, 2025
This PR eliminates the usages of bootstrap by styles added for Effective
Dart. Also completes some nearby/related cleanup. No (large) functional
change.

Contributes to #4164
parlough added a commit that referenced this issue Jan 23, 2025
- Removes reliance on bootstrap classes for layout and responsiveness.
- Stops using bootstrap-provided mixins and other utilities.
- Remove some unnecessary div nesting.
- Rely on same elements for narrow and wide layouts so that it's not
required to update two locations.
- Adds a missing missing aria attributes where necessary to improve
accessibility.
- Other general cleanup.

Contributes to #4164
Contributes to #5251
parlough added a commit that referenced this issue Jan 24, 2025
In replacing some of the used bootstrap styles and layouts, this PR also
updates the styles of a few affected components to improve visual
accessibility.

Closes #4164 🚀
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
e3-weeks Complete in < 4 weeks of normal, not dedicated, work infra.design Relates to the design of docs.Dart.dev infra.structure Relates to the tools that create dart.dev p1-high Major but not urgent concern: Resolve in months. Update each month. st.triage.ltw Indicates Lead Tech Writer has triaged
Projects
None yet
1 participant