Feature Wiki

Information about planned and released features

Tabs

UI Framework

Page Overview

[Hide]

1 Requirements

The responsive design introduced with ILIAS 4.3 is quite basic. Frameworks like bootstrap offer better support for these kind of designs, e.g. by supporting responsiveness to UI components like menus, tables or toolbars.
 
As an alternative for introducing a complete framework, we could inspect the concepts of some key features that are important for ILIAS.

List of possible frameworks:

  • Bootstrap
    • in a Google trends comparision it seems to be far more popular than foundation. This is a big pro for bootstrap, since it means that more programmer knowledge is around and long term maintenance and support of the project more likely.
    • Supports both LESS and SASS (has anybody a strong preference for SASS?)
    • Licensed under the MIT license, which is compatible with our current GPLv3
  • Foundation
    • Supports some additional UI behaviours/components, but up to now nothing has been identified that would be of big importance.
    • The comments on this older comparision side say that its harder to override styles in bootstrap and that it tends to get in conflict with the rest of your css. Something we should evluate, when creating a prototype. If this is the case, it would be a pro for foundation.
    • Prefers (r)em over px sizes. This is a pro for foundation, but bootstrap plans to do this step with v4, when they drop IE8 support, too.
    • Licensed under the MIT license, which is compatible with our current GPLv3

Related Feature Wiki Pages:

 
External Ressources:

1.1 Bootstrap Prototype

Alex Killing, 21 July, 2014: A first prototype based on Bootstrap 3.2.0 is available.

  • http://svn.ilias.de/svn/ilias/branches/iic/4_4_bs
  • The prototype is developed as a skin, see Customizing/global/skin/bs
  • The prototype uses less, so instead of editing bs.css you should edit bs.less and compile it using lessc

Alex 19 Aug 2014: In the meantime we migrated the 4.4 based patch to a 4.5/trunk based branch. Here the original delos skin is adopted.

  • http://svn.ilias.de/svn/ilias/branches/iic/4_5_bs

1.2 Two-step integration 4.5/4.6

Here are some reasons why we should try to manage to introduce Bootstrap already with 4.5:

  • Both, the introduction of new icons and the introduction of bootstrap bring necessarily design changes with them. It would be good, if changes necessary due to the icons would not need to be done on the "old" delos.css implementation, but directly on bootstrap based CSS architecture.
  • Already the bootstrap prototype includes some major improvements related to the responsiveness. E.g. the left column on the personal desktop is not completely hidden from small media devices. Other examples are the main menu, the toolbar and data tables.
  • A good responsiveness becomes a standard feature of LMS (e.g. Moodle Bootstrap based themes are standard).
  • The advisory council made clear, that this issue has a high priority for the community.
Some possible disadvantages:
  • We may not be able to migrate all UI parts to their Bootsrap counterparts with ILIAS 4.5 yet. This would result e.g. in a temporary overhead of CSS classes.
  • The bootstrap integration may delay the 4.5 release.
Of course we may realise at any time that there are reasons that make it impossible to do this step with 4.5.

2 Status

  • Scheduled for: Release 5.0 / Release 5.1
  • Funding: Partly funded by ILIAS-Verein
  • Maintainer: JL Braun, Alex Killing, All Developers
  • Implementation of the feature is done by (company, developer)
  • Contract settled: (fill in "Yes" if a contract is already settled, otherwise "No" )
  • Tested by / status: (name, e-mail), (status information set after implementation)

3 Additional Information

Contact the following persons if you want to know more about this feature, its implementation or funding:

  • Information about concept: Alexander Killing
  • Information about funding: Matthias Kunkel
  • Information about implementation: (name, e-mail)

4 Discussion

FS: We'd prefere foundation (http://foundation.zurb.com) over bootstrap and will try o provide a demo skin using foundation for ILIAS 4.4

FS: A Skin-Prototype cannot be provided due to missing ressources of the university of bern.

JF 31 Mar 2014: We see that a UI framework may help us to support mobile/tablets in a better way than today and also to improve the general usability of the UI. Everyone is invited to list features/components of these frameworks that could/should be introduced in the ILIAS UI. Based on these suggestions we will continue with an evaluation of the proposed frameworks and their technical implications.
 
If we decide to use one of these frameworks we need a reponsible developer who maintains the ongoing integration of up-to-date versions.
 
We did not decide on any solution today, but may do so before the 4.5 beta release.

MB 31 Mar 2014: Topic today was among other the offcanvas-menu. Bootstrap offers such at Bootstrap sample.
In light of this, I would support moving towards bootstrap. My opinion is, that there is more bootstrap-related skill around than foundation related skill. (Though I admit that both frameworks appear to be rather simple in terms of using them.)

Timon 3 April 2014: Since the SIG-Performance is currently thinking about a proposal concering a new Template-Engine:
http://www.ilias.de/docu/goto_docu_frm_3814_2534.html
 
If we would indeed work on the template engine there might be some synenergie that could be used to actually adapt the layout of the tpl files as well.

Alex 3 July 2014: For comments related to distinct UI elements, please visit the Design Revision feature wiki page - it contains a list of links to UI element related wiki pages.

Alex 3 July 2014: The advisory council has put this topic as #1 on the features to be funded and implemented by their budget. This makes it a high priority issue. I currently have a strong preference for going with bootstrap, mainly due to its popularity. Once we are relying on such a framework, we must evaluate the risk of discontinuation. And a high popularity is quite a good indicator for a low risk on the side of bootstrap.

Alex 3 July 2014: I think I will start to work on a prototype integration using Bootstrap.

JF 7 July 2014:

  • We support the idea to create a prototype based on bootstrap. After that all developers should evaluate the impact on their components. On this basis we discusse the further steps and roadmap for the upcoming releases. If everythings goes very smooth, an introduction in 4.5 might be possible, but more likely it will be 4.6.
  • The ultimate goal should be to use as far of the bootstrap classes and concepts in ILIAS as possible and to remove all classes and JS implementations in ILIAS that can be replaced by bootstrap implementations.
  • A CSS/JS concept should be developed that clarifies the relation between bootstrap and remaining ILIAS classes. When can ILIAS CSS classes be used, how are the embedded in the LESS/SASS build process? Do we use LESS or SASS? How should mixins be developed/designed?

JF 21 July 2014: We ask all developers to have a look at the prototype and evaluate possible impacts on their components. We should try to get an idea how much effort is needed to make a first step and move the core elements to the bootstrap CSS classes. In a first step not all screens would need to be fully responsive.
 
For component maintainers we forsee these main issues (more will definitly be added)

  • All buttons in custom templates need new css classes
  • All form InputGUIs need to be migrated
  • ...
Please check these issues in your components:
  • Is there any functionality broken?
  • How many templates do you use that e.g. contain buttons or other elements that are not rendered by a standard UI element.
  • How many special InputGUIs implementations need to be migrated in our component?

MS, FS - sr.solutions 31.07.2014: With the introduction of bootstrap many design adaptations are necessary. We propose that not the developer themselves should care about the design of ILIAS. In our opinion, it makes sense now to hire a graphic designer to define a design for ILIAS. We should take the chance to move from the old fashioned ILIAS Design to a modern look and feel of a web software.
 
e.g.

Timon Amstutz - Universität Bern 6. August 2014: We agree with the above in that this would be a good oppurtinity to rethink (redo) some of the designs used in ILIAS. Additionally we would appreciate if as much as possible only standard bootstrap classes would be used. We think that much of ilias could be done with this approach and this would have to great benefit, that other desing templates existing for bootstrap would be much easier to use/adapt.
 
How far is the prototype/documentation progressed yet?

JF 6 Aug 2014: Alexander presented the current bootstrap prototype branch (/branches/iic/4_5_bs). We will continue to develop this branch. Next steps will be:

  • General design mockups (funded by Universität Münster, provided by a webdesigner at CaT) -> August
  • A new "ILIAS" skin based on the design mockups using the bootstrap framework
  • An estimation of all maintainers about the costs to make necessary changes in their components (esp. introduce bootstrap classes in non-standard templates)
  • Finalize the icon set development
We still see an opportunity to provide a solution for 4.5, but we will make all these steps in the separate branch for now. We may postpone the beta release due to these developments up to end of September, but not later.

MB 14 Aug 2014: I am deeply impressed by what is done on the prototype branch. However, I would like to share some reads on the issue of building up the next chunk of technical debt and recommend the following reading:
 
Bootstrap Bankruptcy by Matt Copeland explains how developers commonly lock themselves into frameworks and while this does not entirely applies to what is done in the branch, there is a notable approach to overcome these issues: Bootstrap without all the debt by Dan Tao.
 
Together with some CSSTidy goodness, this seems to make some sense.

AK 18 Aug 2014: I am not conviced by the SASS/extend approach described in Bootstrap without all the debt by Dan Tao. There are some comments in the article that reflect my opinion.

  • First of all, we should wrap dependencies whenever possible and to keep them in central components esp. in the Services/UIComponent parts of ILIAS. Bootstrap classes should appear in a minimal set of ILIAS HTML templates. This is why we added the Button component under UIComponents. In general the project should be able to move distinct user interface elements to other approaches or to our own implementations, if necessary.
  • Semantic HTML can be achieve by using HTML5 tags together with bootstrap classes directly in the HTML templates, e.g. use col-lg-3 together with a main or nav tag. In other cases a role-attribute may be appropriate.
  • The SASS/extend approach makes maintenance harder. The assignment of bootstrap classes is not visible directly in the HTML templates anymore, but "hidden" in some SASS logic. And this logic becomes complex due to long CSS selectors. At the end this approach results in even bigger compiled CSS files. I would like to use as little preprocessor (LESS or SASS) logic as possible, since this keeps things more maintainable. Currently I think using imports and variables with a minimal set of mixins could be sufficient. But I am lacking experience with these things, too.

5 Implementation

...

Last edited: 19. Apr 2023, 12:27, Kunkel, Matthias [mkunkel]