[jira] [Comment Edited] (MSKINS-97) Upgrade to Bootstrap 5.x

["Stephen Crocker (Jira)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/MSKINS-97?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17697116#comment-17697116 ] 

Stephen Crocker edited comment on MSKINS-97 at 3/6/23 9:20 PM:
---------------------------------------------------------------

Its on Twitter Bootstrap v2, which is 10 years old. It underwent a huge API rewrite to v3 and most the v2 documentation has disappeared.

As part of v3 the grid system was completely rewritten along with how many of the components work. While this has changed between v3 to v5, the changes are typically smaller. So I thought the logical step was to migrate to v3 before moving to v5.

The problem I hit is bootstrap doesn't really have a concept as a Side Navigation Bar, there are website which hack the NavBar to operate on the side but the principles shift radically between versions. So its easier to got straight to bootstrap 5.

My suggestion: 

* Follow the readme to construct all the test sites and take a screenshot so you can compare them with your future release.
* You only want the Bootstrap, [Code-Prettify|https://www.npmjs.com/package/code-prettify] & [jQuery|https://www.npmjs.com/package/jquery] JS files within the project. Bootstrap no longer uses jQuery and code-prettify can use the latest release.
* You might want to add [bootstrap icons|https://www.npmjs.com/package/bootstrap-icons] 
* You can then upgrade the bootstrap js and CSS files to the latest release of Bootstrap.
* At this point everything breaks, I would start by reimplementing the [grid system|https://getbootstrap.com/docs/5.0/layout/grid/] on the project to the latest Bootstrap standard.
* Then I would look specifically at the [horizontal navbar|https://getbootstrap.com/docs/5.2/components/navbar/] reworking it to follow the Bootstrap guidelines. 
* At this point I would look at getting the NavBar to operate as a Sidebar. [This is my implementation|https://github.com/stevecrox/maven-site-bootstrap-skin/blob/main/bootstrap-site-skin/src/main/resources/META-INF/maven/sidebar-macros.vm] for Bootstrap 5. 
* Once you have a working Nav bar, you can start looking at the 'deviations'.

The biggest issue is this skin, isn't a 'Bootstrap layout' skin, but rather an attempt to implement the [Maven Default Site|https://maven.apache.org/skins/maven-default-skin/sample/] using Bootstrap.

This results in deviations, for example the concept of a 'banner' was dropped for the the Navbar but you'll find 'Banner Left', 'Banner Right', sit in the 'Banner' the Breadcrumbs, Project Version and last published also sit in the 'Banner'.

Within Bootstrap this means working out how to integrate them within the NavBar. This is how I implemented the [Banner|https://github.com/stevecrox/maven-site-bootstrap-skin/blob/main/bootstrap-site-skin/src/main/resources/META-INF/maven/site.vm#L79] and the [Project Bar|https://github.com/stevecrox/maven-site-bootstrap-skin/blob/main/bootstrap-site-skin/src/main/resources/META-INF/maven/projectbar-macros.vm]

Bootstrap isn't designed for multiple Navbar's so this is weirdly difficult to put in place.

You then have other deviations, for example the current implementation has a bunch of Gif Files it attaches to various elements. There aren't always direct equivalents in bootstrap/bootstrap-icons and the Gif's are really low resolution so look terrible for poor vision/4k Screen users. On top of that trying to get those elements to work responsively when Bootstrap doesn't really expect them is a complete nightmare.

Also the sidebar (how I grew to hate it) has a bunch of rules on colouring, indent and icons which aren't obvious and I gave up trying to make them work on anything but a desktop screen.

I found some of the team here blunt, unhelpful and frequently insulting (see my last comment). 

In the end I went off make [Maven Site Bootstrap skin|https://stevecrox.github.io/maven-site-bootstrap-skin/index.html], my goal was similar to this project but I wanted to prioritise sticking with standard Bootstrap layouts over recreating Maven's default site.

The [Maven Reflow skin|https://devacfr.github.io/reflow-maven-skin/] is a great project, the maintainer seems a really nice person. Unfortunately they have deviated significantly from this and core bootstrap to try and build a really flexible and good product. Porting my work from here would have been a rewrite but I would like to contribute to it at some point.


was (Author: JIRAUSER290518):
Its on Twitter Bootstrap v1, which is 10 years old. It underwent a huge API rewrite to v2 and most the V2 documentation has disappeared.

I thought the logical step was migrating to v3 which is closer to v5 (largely differences in css class names) but..

The problem I hit is bootstrap doesn't really have a concept as a Navigation Bar on the side. The way to achieve it in Bootstrap 3 is completely different to Bootstrap 5. So its easier to got straight to bootstrap 5.

The current library has copy pasted javascript files, the only one you need to track down is the one which makes source code render blocks.

My suggestion: 

* Follow the readme to construct all the test sites and take a screenshot so you can compare.
* Then remove jQuery, etc.. from the project and purge the CSS (bootstrap no longer needs jQuery and the CSS is not the right way to do it in bootstrap 5.
* Then upgrade the bootstrap js and CSS files to the latest.
* Then start by migrating everything to the bootstrap grid system, it doesn't matter the parts arent rendering correctly, they they are in the right place.
* Then redo the horizontal navbar to align with bootstrap docs (and don't forget the banner left/banner right parts of the spec).
* Then work to build a sidebar (that is a huge effort).
* Then complete the project version/date parts
* Then look at breadcrumbs
* Then all the deviations.

This skin attempts to exactly recreate the exist Maven 2 Site design, that was made in 2010 and large chunks of it are considered bad/dated today. Those deviations are largely where I got fed up. 

I spent 4 days trying to get bootstrap-icon equivalents render like the existing gifs and work under a responsive design knowing this team wouldbe unhappy if it was missing.

I went off to make [Maven Site Bootstrap skin|https://stevecrox.github.io/maven-site-bootstrap-skin/index.html], where the goal was to create this but stick with standard bootstrap components and try to limit custom config. I know the guy behind The [Maven Reflow skin|https://devacfr.github.io/reflow-maven-skin/] felt similar to me, but what I had done wasn't a good fit for his solution and I'd burnt myself out trying to get some if this working. I still want to contribute to it though, that dude was super nice and helpful

> Upgrade to Bootstrap 5.x
> ------------------------
>
>                 Key: MSKINS-97
>                 URL: https://issues.apache.org/jira/browse/MSKINS-97
>             Project: Maven Skins
>          Issue Type: Task
>          Components: Fluido Skin
>            Reporter: Michael Osipov
>            Priority: Major
>         Attachments: bootstrap5-sidebar.png, bootstrap5-topbar.png
>
>
> Next major of Fluido should be upgraded to Bootstrap 5.x which is *not* backwards compatible to 2.x. See http://getbootstrap.com/migration/



--
This message was sent by Atlassian Jira
(v8.20.10#820010)