Refactoring Delos Style in ITCSS structure and conversion to SCSS

[catenglaender]

The Original Plan

This proposal from 2019 (https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/src/UI/docu/sass-guidelines.md) outlines the plans to

• restructure the delos style code to follow the Inverted Triangle CSS Structure (ITCSS)
• switch the preprocessor from LESS to SASS
• become independent from Bootstrap

Please let me know who was involved with this project, so I can say proper thanks here... Until then: Thanks to everyone who contributed to this plan!

State of this PR

Currently, this branch covers the first two points of this mission.

All delos style code has been

• broken up into many files across an ITCSS structure
• ported to SASS .scss files and compiles all the way through

Bootstrap 3 has not been removed, but the strict modul structure makes it easier to see which parts of delos are depending on it to different extents. The following Bootstrap 3 SASS port has been used to replace the LESS version: https://www.npmjs.com/package/bootstrap3-sass

Dart SASS

SASS has been choosen because it's more actively maintained than LESS and many modern apps and frameworks use it. It supports loops, if-logic and array maps to make complex and repeating CSS code generation possible.

This port uses Dart SASS 1.55.0. Dart SASS is the most actively developed version of SASS.

Changes & challenges

Variables

In LESS you could change a variable at any point and it would affect all earlier and later uses. SASS variables are imperative, meaning previous uses stay the same up to the point of where they were changed.

While the ITCSS structure generally makes top to bottom declaration easy, sneaking values into Bootstrap 3 is a lot trickier than it was in LESS. Bootsrap variables have to be loaded, then overwritten, then loaded again so calculations made with a mix of overwritten and original values are executed again.

Variables in Bootstrap 3 SASS are marked with !default,like this: $variable: 20px !default; Declaring a variable with !default will not overwrite them if they have been already set without !default previously.

In LESS all variables were global. In SASS variables are generally local to the file that they are in. When importing a file with @use, the variables are contained in a namespace by default: filename.$variable

In this port many variables have been made available within a file without a namespace by importing them with @use "..." as * ;. This works well since all our variables used to be global, so there are currently no conflicts. In the future, we should change all our variables to using namespaces, so that we can tell where a variable comes from with one glance.

Contained Modules

LESS was essentially copying all code into one big file and constantly looping through the whole file again and again during compilation. SASS approaches compilation in a very localized and contained fashion. A file doesn't know the variables of files imported before them, each component must reference all files that it wants to use variables from.

This makes it very easy to see what patterns, tools and layout variables a component is dependent on, because those imports have to be declared at the beginning of the file. Also SASS compiles within the fraction of a second, while a complex LESS system style can take 10 seconds to compile.

The import method @import that behaves like the LESS import is deprecrated but still used by the Bootstrap 3 SASS port.

To Do

I still want to do this before merge:

• [ ] add annotations to the code to help frontend developers find their way
• [ ] add more info to this PR (specifically about tools, possible issues and projects and more)
• [ ] remove deprecrated slash division
• [ ] test extending
• [ ] solve some Bootstrap conflicts especially with forms

[Amstutz]

TL/DR, so everybody understands the footprint of this PR, this is how the new delos will look like:

[Amstutz]

Thx a lot @catenglaender

I had a quick browser through the changes. Thx a lot. I like very much what I am seeing. It will help us so much to push forward with the mission to simplify and reduce our CSS further.

add more info to this PR (specifically about tools, possible issues and projects and more)

We discussed the placement of variables with a global nature gefore (settings vs tools), I see you decided for renaming tools to pattern and place the variables there. I can live with that. However, I am not so fond of renaming tools to patterns, since we leave ITCSS naming conventions at this point. What is the reasoning behind this choice? One of the charms of using ITCSS would be tha people familiar with the modal, quickly find their way around in our source.

add annotations to the code to help frontend developers find their way +1, maybe we can at this point update the original https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/src/UI/docu/sass-guidelines.md to the current status and move it directly to templates/default where people working on css will easily find it. Maybe even a short readme per folder, quickly introducing the contents could help

thx so much for all the work so far. looking forward to get into the details of it.

[catenglaender]

Some changes to Bootstrap have been rolled back. Tried to switch more spacings from px to rem, but rounding functions deeply integrated in Bootstrap causes values like 0.4rem and 0.8rem to end up as 0rem and 1rem.

Started updating the documentation as well, so it accurately reflects the current state of the ITCSS implementation.

[catenglaender]

Did some bug fixes and code clean up. Documentation and code comments have been updated.

From my side I would say: Ready to merge and then we can still add, modify and optimize afterwards.

[catkrahl]

Thank you so much @catenglaender that you gave birth to this long term vision/project! 💟 you asked for the people which were involved in the past. we had a 2-weekly-talk in the SIG with a core of people like: @Amstutz, @kergomard, @klees, @tfamula, @yvseiler, @catkrahl and some more. sadly it seems like the SIG category with all documents was removed from the community-site??? i'm really looking forward to using the new structure and throwing away most of the waste and bringing the stylecode to a structured and well-maintained base state ;)

[Amstutz]

I just merged this into trunk, resolving conflicts. In the upcoming days, I will promote all CSS related fixes done for ILIAS8 only due to the CSS Block in this project to trunk. We will do further testing on trunk an fix any issues we come accross.

Congrats to everybody involved in the project so far. Special thx to @catenglaender for working this out and @catkrahl for the plan we could stick too.

To every developer, note that from this point on, you can again change CSS to trunk. However, please note, that for every CSS change, I will ask for a PR to make sure we adhere to the new ITCSS structure. You find the guidelines on how to contribute CSS here: https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/templates/Guidelines_SCSS-Coding.md