Port site to Bootstrap 5 from 4

[samswag]

Some of the UI elements are broken, and to fix them better, it would be great to migrate Bootstrap from the old version to the newest.

Since the latest Bootstrap is a major rewrite from 4, some visual changes need to be further modified.
See Migration on the official bootstrap website.

[himanshujaidka]

So how we could migrate?

[samswag]

As explained here via the official bootstrap website, https://getbootstrap.com/docs/4.0/migration/ since the 4+ is a significant rewrite from 3.

One major issue I have seen is the effect it has on the navigation bar because some elements changed. And to make it much easier and faster, I recommend using BootstrapCND instead of downloading it.

[himanshujaidka]

ok I got it , I am working on this

[AdithyaKrishnaK]

I would like to work on this. But I was wondering how to remove the existing bootstrap files and also I am having trouble connecting to #sugar IRC channel(says Cannot send to nick/channel).

[srevinsaju]

I am having trouble connecting to #sugar IRC channel(says Cannot send to nick/channel).

@AdithyaKrishnaK please follow the registration on Freenode. :)

[srevinsaju]

Bootstrap v5.0 has been released. So probably, we would now aim to migrate bootstrap3 website to bootstrap5 now

[S-kus]

I would like to work on this. @srevinsaju Are you planning to migrate it?

[srevinsaju]

I would like to work on this
Sure, you don't need to ask.

@srevinsaju Are you planning to migrate it?

No. My comment was to mention that a migration to Bootstrap 5 would be better, since BS5 was released then.

[S-kus]

okay, @srevinsaju. I have started working on it.

[S-kus]

@srevinsaju I am planning to use the documentation of bootstrap firstly migration from v3 to v4 then v4 to v5..
This will change a few files. Could you confirm this process is right? and should I commit after migrating all the things to v5 or should I do a file vise commit?

[quozl]

Choose a method that shows what you have done. In your commit message, briefly explain what you did, so that your reviewers can review both the process you used and the result. If it were me doing it (and I'm not particularly good at web development), I'd make a branch for the v3 to v4 port, complete it in a series of commits, testing how the site looks at each commit, then make another branch for the v4 to v5 and do the same. Then I'd rewrite any commits or commit messages to make it clear how I did it, and make a pull request.

[S-kus]

Thank you @quozl. I got it.

[S-kus]

Hello @quozl, I am migrating from bootstrap3 to v4 firstly, Doing this process according to document their main update is related to flex classes, probably because of which two main issues I am having is everything is shifted a bit left and the second one is during mobile view "navh2" from "airspace.css" creating problems with toggler (I am using bootstrap toggler [should I use different toggler than bootstrap one? ])( what I find is to solve this I can change some CSS in "airspace.css" file). Can I do such changes?
(I have added bootstrapv4 CSS and js file in old bootstrap3 place

for 1st issue,

s)
For the 2nd issue:
The problem is when it's small in size (I will change toggler color, actually haven't set it's color till n

ow)

Could you please guide me?

[srevinsaju]

@S-kus you are allowed to make changes to airspace.css, but try to avoid a different toggler, as it might add more complexity. Just make sure that you explain each step in your commit message, and it should be good to go.

By porting the site from Bootstrap 3 to bootstrap 4/5, we are trying to keep:

• Minimum changes on the code, as well as on the visual design
• Not add any more new libraries to it, or change any other existing library to a different one, other than upgrading the existing frameworks to the newer versions
• Make sure the site is as functional, as it was, after the port too.

[S-kus]

okay, Thank you @srevinsaju I will follow it. Could you please guide me for the 1st left-shifted problem in this problem, like how can it be solved?

[quozl]

Guide you? If I knew how to do this, I'd do it myself. It would be way more efficient and effective than teaching anyone. Thanks for working on it. You may need to lean on Bootstrap and HTML5 resources.

It is one of the failings of our web site that it needs such skill to maintain. It is very tempting to replace it with WordPress. As Srevin says; we need minimal change, we don't need more libraries (or CSS files if we can help it), and we need it to keep working. We don't need to make the site any more complicated, in any way.

We shouldn't consider the site to be a product of Sugar Labs. Our software products are Music Blocks, Turtle Blocks, Sugarizer, and Sugar.

[S-kus]

Okay, Thank you @srevinsaju @quozl. Things are almost done, I just have to fix the dropdown buttons, footer icons, and some text alignment. I will create the pull request soon with each step in my commit message.

[quozl]

Thank you!

[S-kus]

@quozl @srevinsaju Can we use the shown below one grey toggle icon for phone view i.e. less than 768px too with just different (earlier purple) background?

As the icon we are using currently is not responsive, like these:



I am still trying to fix it, but I think the grey one looks better till then. I will set it according to the phone view with a good UI.
Other than this everything is set.

[quozl]

If you mean the hamburger button, I don't have any trouble with the ones you showed above.

[S-kus]

@quozl @srevinsaju I Ported the site to Bootstrap 4 from 3, As shown in this Video.
If any changes are required, I will fix them and then I will raise the pr with proper commits about code changes.

[srevinsaju]

Video looks fine, you can go ahead with the PR, we can deal with any additional changes in the code review. Thank you for working on this.

[quozl]

Video looks fine. I agree, go ahead. But let's concentrate on the code review without any content or unwelcome appearance changes. In reviewing the video, I saw so much out of date content, which is not your fault and we should not stall code review because of it.

[S-kus]

Okay, @quozl and @srevinsaju. I created the pull request. Please review it.

[quozl]

@himanshujaidka, @AdithyaKrishnaK, thanks for your interest in this issue, please review #347 and give your comments.

[quozl]

• _layouts/base.html is using a CDN instead of our own copy of the file.

[MAYANKpandey14]

Is somebody working on this ?

[chimosky]

Is somebody working on this ?

There's currently no open PR for this issue.

[hackwhiz-8]

is anyone working on this issue ?

[chimosky]

is anyone working on this issue ?

I haven't seen any PRs reference it so I guess no one is.

[hackwhiz-8]

okay sir .

[pikurasa]

I believe instructions for this are here: https://getbootstrap.com/docs/5.0/migration/

[harinallaparaju]

I'm interested to work on this.

[haroon10725]

@pikurasa I tried to migrate from version 4 to 5, but css got disturbed. I think we should only do this when we are sure that we have to continue with Jekyll only. Otherwise I think there is no point to migrating it to version 5.

[quozl]

Yes, exactly. Careful procedure will be needed to separate the customisations from the CSS. One method would be to start at the earliest git commit and then rewrite the following commits, if they touch the CSS, so that they use a custom CSS. Another method may be to use a software tool to extract the customisations and place them in another file.

It's a big job, but the outcome should be easier to maintain.

[pikurasa]

And another method might be to kind of start over with a recent, well-maintained theme, and port whatever customizations we need in one-by-one, leaving whatever we don't need out.

However, that might also end up to be time-consuming.

I agree that we need to really think of what we want to do, but obviously we're learning some valuable lessons in how to keep the site maintainable in the future (i.e. what not to do).

[haroon10725]

I think we should decide on our long-term goal: either continue using the same website and make the suggested changes by @quozl , or start working on a new website and incorporate only the necessary changes from the old one, as suggested by @pikurasa .

We can also think whether to continue with Jekyll only. There are also many new frameworks for website building.

We should decide it quickly and start working on that one also.

[quozl]

Thanks, but no. All paths are valid. Decision can be left to whoever does the work; just give us a pull request. While we like to direct the final outcome, the way you get there is up to you.

[haroon10725]

Okay @quozl

[pikurasa]

@haroon10725 (and any other contributors reading this): for this particular project, let's coordinate on https://matrix.to/#/#sugarlabs-web:matrix.org, as well as any video meetings we can schedule together, to come up with a game plan.

Since this would be a bigger project, I think it makes sense to discuss and plan a course of action.

[quozl]

#565 review has identified our port from Bootstrap v3.3.7 to v4.0.0 may have been incomplete.

• complete the port from v3.3.7 to v4.0.0 before porting to Bootstrap 5.

References: Bootstrap 4 Migration.