Show Advanced KnowledgeHide Advanced Knowledge

(Project) Abandon Bootstrap 3

This is a project page that bundles several feature wiki pages which belong to a larger development activity for the ILIAS component Less/CSS, src/UI, Services/UIComponent various others.

1 Aim of Project

Note, this project is part of the goal to introduce the goal to introduce "Use frameworkless SASS for the UI-Framework" . Cutting the strings to bootstrap is one necessary condition for the above goal. However, this project has a great value in itself.

From our perspective, Bootstrap was introduced to solve three problems:

1. Building grid layouts and responsive layouts was hard with the then-existing means of HTML and CSS.
2. The community generally lacked available expertise in building and styling UI components so sticking to an existing framework seemed to be a good way to save some work and to use some knowledge from elsewhere on our end.
3. Bootstrap implements some concrete UI components, such as modals, that we also wanted to use.

As well our hope was that

1. using Bootstrap would allow people with Bootstrap knowledge to easily redesign ILIAS as well.

Problem 1 has mostly become obsolete in the meantime due to the introduction of the CSS-grid and flexbox layouts to standard CSS, which was already incoporated in ILIAS 6. Regarding 2, we managed to build some serious expertise regarding the required fields of knowledge in our community in the meantime, with the added benefit that these experts also have knowledge of ILIAS as a general application. Thanks not least to the UI framework, working on UI and UX related questions is emerging as a field of work in its own right in the ILIAS community. The goal we had with 4 seem to never have materialized, probably due to the fact that ILIAS actually just uses Bootstrap instead of being completely implemented with it as a framework. 3 still seems to be a valid reason to use Bootstrap, but we don't believe that this benefit makes it worth to carry the whole bootstrap framework along as a dependency and to risk the sideeffects of this in other parts of the UI.

Note that this project follows the goal to create an "Adaptable Learning Environment" of the TB Strategy in which we state, that: "The option to adapt the ILIAS skin through the interface is further simplified and, if possible, expanded. Additionally the mechanism to create full featured custom skins directly is expanded to all elements of the UI. ILIAS thus provides a simple way for less and a powerful way for more tech-savvy users to adapt its look and feel."

2 Involved Maintainers and Stakeholders

• Amstutz, Timon [amstutz]: CSS/Less and System Styles Maintainer, UI Coordinator
• Yvonne Seiler: UI Export
• Richard Klees: UI Coordinator
• Enrico Zenzen: Skin Designer
• Various other Maintainer as Customor of Bootstrap JS and CSS.

3 Timeline

ILIAS 9	Get rid of Bootstrap CSS/Less
ILIAS 10	Get rid of Boostrap JS

4 Related Feature Requests and Status

Feature Request	Suggested by	Funding	Planned Release	Status
…
…
…
…

5 Further Results

• The Less/CSS has been completely replaced by SCSS. There are still bootstrap lines in the code, but they are merged with the rest, see also: https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/templates/Guidelines_SCSS-Coding.md
  
  JS has been replaced in the UI components, but at the moment there are still issues in the code for legacy UI, see e.g. https://mantis. ilias.de/view.php?id=42458
  

6 Additional Information

Note I: we do not need to get rid of all the logic of bootstrap. If we will have difficulties to get rid of critical parts of the CSS for some reason, we can adapt and include those parts into our delos.less. However, we would no longer load them fromt he Bootstrap library, but maintain the code internally.

Note II: This project has a strong relation to: Remove Services/UIComponent . Re move Services/UIComponent would reduce the workload in this project. 

7 General Discussion

Please discuss specific questions of feature requests on the related feature wiki pages. This discussion section is only for a general discussion of the project and its realisation.