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

Bootstrap v5 migration #2

Merged
merged 35 commits into from
Apr 21, 2021
Merged

Bootstrap v5 migration #2

merged 35 commits into from
Apr 21, 2021

Conversation

dennisreimann
Copy link
Member

@dennisreimann dennisreimann commented Feb 22, 2021

Automating the process of adapting Bootstrap v5 to our needs. As we make heavy use of CSS custom properties and Bootstrap only offers partial support, there are some tweaks we have to do …

Also redefines and extends the color variables, so that we can be more flexible than with our current set of variables, which is rather limited.

Details

AS Bootystrap 5 won't change the way they create and use color values we have to work around all those cases where they use SASS functions to modify colors. We cannot feed our variables directly into those functions, because they expect actual color values. There are many cases where they e.g. shade a color to make it work on a background …

That's why we have a two step process of looking up that color result and then replacing it with our variable equivalent throughout the file … it's not perfect, but this will get us what we need in an automated fashion: Out Bootstrap 5 is not a fork anymore in the way we used to fork it.

WIth the migration above I'm using the regular Bootstrap 5 and apply our customizations.
There are two parts to these customizations:

  1. The regular way, where we adjust the SASS variables that aren't used for color calculations (src/bootstrap/_variables.scss)
  2. The hacky additions, where we replace those values that are used in the color calculations (tasks/generate-bootstrap.js)

@dennisreimann dennisreimann self-assigned this Feb 22, 2021
@dennisreimann dennisreimann marked this pull request as ready for review February 22, 2021 22:07
@dennisreimann
Copy link
Member Author

dennisreimann commented Feb 22, 2021

Hey @dstrukt, this is ready to talk about 🥳

I think we should have a jam session where we go through the general idea of how the diffrent levels of color variables are supposed to work. I've build it according to what we've discussed and I think it works nicely.

The next steps would be …

  • define the actual base colors ($category-XXX, like primary-100 or danger-500)
  • map the base colors to the individual use cases (text colors, backgrounds, borders, etc.)
  • see what we really need (there's some potential to strip the set of base variables down I think)

Looking forward to this – once we have this nailed down we can migrate the apps to use the new Bootstrap and variables.

@dstrukt
Copy link
Member

dstrukt commented Feb 23, 2021

@dennisreimann Excellent!

Agreed, maybe towards the end of this week / weekend we can chat how to handle this so you can keep moving forward, will follow up on MM.

🥳🥳🥳

@pavlenex pavlenex removed this from In Progress in 0.13 Milestone Apr 15, 2021
@pavlenex pavlenex added this to To-Do 📝 in 0.14 via automation Apr 15, 2021
@dennisreimann dennisreimann merged commit 847106d into master Apr 21, 2021
@dennisreimann dennisreimann deleted the bootstrap-v5 branch April 21, 2021 10:19
@pavlenex pavlenex removed this from To-Do 📝 in 0.14 May 6, 2021
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.

None yet

2 participants