Migration to Bootstrap 4

1 Initial Problem

Bootstrap 4 stable is out and comes with a lot of changes. Sass instead of Less, (r)ems instead of pixels, Flexbox option, ... We should discuss a migration roadmap. Which features are important for us. When do we want to migrate, what browser support can be dropped.

2 Conceptual Summary

2.1 Roadmap

In this section we propose the roadmap for migrating to bootstrap 4. For a detailed list of necessary changes, look further bellow.

@Todo: Write Roadmap.

2.2 Browser Support

Bootstrap 4 browser support is listed here. IE 10/11/Edge are supported. There are some known issues listed for mobile browsers (e.g. modal scrolling behaviour on IOS Safari).

3 User Interface Modification

3.1 List of Affected Views

3.2 User Interface Details

3.3 New User Interface Concepts

4 Technical Information

In this section we list all key aspects mentioned in Migration to v4 and analyze their inpact on ILIAS Components.

5 Additional Information

• Idea / concept: (please add your name when creating this feature request)
• Interest in funding: (please indicate if you are interested/able to fund this feature)
• Maintainer: (will be set by Jour Fixe / maintainer)
• Implementation of the feature is done by (will be set by Jour Fixe / maintainer)
• Testcases by: (please add your name if you want to create the testcases for this feature)

6 Discussion

Killing, Alexander [alex], 11 Sep 2015: I started this page, since I think we have to tackle this better sooner than later.

Amstutz, Timon [amstutz], 14 Sep 2015: @Killing, Alexander [alex] Thank you. We will also discuss this point at the upcoming UI-Kitchen-Sink Workshop.

Erkens, Jochen [j.erkens], 20 Jan 2016: +1 "better sooner than later". I've already moved a smaler internal project from Less to Sass. It was not huge problem. After changing variable names from @var (Less) to $var (Sass) most things worked the same.

Usefull Sass feature: filenames starting with a underscore will not be compiled to css. So only the last file in chain where everything is imported will be compiled.

Amstutz, Timon [amstutz], 1. of March 2018: Bootstrap 4 is finally out of the Beta Stage. This would be the right moment for a push for 5.4. 

Killing, Alexander [alex], 8 June, 2018: We are currently focusing a lot at the Page Layout revision. I think we should at least try to tackle the bootstrap migration before implementing the new general page layout UI elements. A prototype could tell us, if we run into any severe issues, but we should at least spent a limited time on this imo.

7 Implementation

{please give a description of the final implementation and add screenshots if possible}

Test Cases

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approval

Approved at {date} by {user}.