Bootstrap 5 Upgrade

[djbrooke]

We should upgrade to Bootstrap 4.

[djbrooke]

Approach to discuss:

• Investigate ability to phase in the changes page by page, using templates for both Bootstrap 3 and 4. Login page or advanced search may be good candidates. As part of this, investigate whether or not the pages could be released page by page.
• If investigation indicates this is the appropriate path forward, then get a list of the pages in the application and start working through them.

[TaniaSchlatter]

Good discussion with @mheppler. The technical effort to support two UI frameworks in the same app in order to slowly transition from Bootstrap 3 and 4 should not be necessary, and would be a throwaway effort. Small chunks can be used to carved up the ~20 pgs of the app in the development process, and released together. Alternate, single release approach, based in part on what was learned migrating Consilience UI framework:

• develop new front end code page templates in Bootstrap 4 for the new redesigned dataset and file page
• apply the same page layout and various style changes to all pages, review, refine
• figure out how to small chunk QA testing
• release the new Bootstrap 4 UI for all pages together

We discussed in design standup that it may make sense to prioritize moving to Bootstrap 4 first, however, we are speculating on pros and cons of efforts, as development and QA efforts would be duplicated for the dataset and file page, and we want to be as efficient as possible.

[TaniaSchlatter]

A high-level overview of Bootstrap 4 and accessibility states that default colors lead to insufficient color contrast using WCAG 2.0 standards. https://getbootstrap.com/docs/4.0/getting-started/accessibility/.

[mheppler]

Recently I have suggested a few deliverables could be included in this app-wide UI effort. Adding those here for reference and discussion.

• configurable custom Bootstrap themes, making it easier to apply branded color schemes to button, link and other UI components
• right-to-left language support
• selenium automated testing selector support

[BPeuch]

Howdy-do, IQSS crew.

We like the potentialities afforded by Bootstrap 4 a lot, so we fully support the upgrade. Good luck!

How are things coming so far?

[djbrooke]

Hey @BPeuch, this isn't something that we've started yet. Just wondering, can you let us know what things you're interested about specifically?

[youssefOuahalou]

Hello @djbrooke our web designer strongly advised us to do this update. Do you think this tool can help you? : http://upgrade-bootstrap.bootply.com/

[djbrooke]

Thanks @youssefOuahalou, we'll take a look. This is a pretty big change that requires touching most of the pages in the application, so we haven't had a chance to plan and work on it yet. Watch this space! :)

[BPeuch]

Thank you for the feedback, @djbrooke. Our Web designer further mentioned the following Bootstrap 4 features she found most interesting: flexboxes and the grid system in general, cards, CSS classes for margins and padding. Those are but a few.