[
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)
