CSS Revision

1 Description

A lot of users are struggling with the adaption of the growing and unstructured delos CSS. We should revise it and modularize styles more. We should also try to prevent any style information in the template files.

1.1 JF 3rd September 2012

This topic has been pending due to different reasons for some time. We now have a new maintainer for CSS/tempates and would like to make a new plan for the next steps:

• Inline styles will be forbidden, any inline style in templates will be considered being a bug. (immediately)
• We would like to add a "reset CSS" + default settings (for headings and lists) in the head of the delos style sheet file. (4.3, asap)
• We will try to support a "RTL" skin with 4.3 beta. We should try to keep the number of HTML templates within this skin as low as possible. (4.3)
• Anyone who is working on skins/templates and needs special IDs or classes, can make suggestions for new ones and adress the CSS/template maintainer. (from now on)
• Naming of IDs should be "il_lower_case" and for classes "ilCamelCase". (from now on)
• We continue to get rid of framesets. (continuing for for 4.4).
• Layout tables: We still have two layout table in the main template, one for tabs, the second for the multi column layout. Jean-Luc will make a proposal here. (4.4, we will try also for 4.3)
• The set of rounded corner DIVs in the main template will be abandonded. If we want to keep the rounded corners in the setup, standard CSS should be used. (immediately)

2 Status

1. Concept:
   • Implemented for Release 4.2
   • Funding: ILIAS-Verein
   • Developed by Stephan Heller and Alex Killing, LEIFOS
2. Implementation / Code Revision: 
   • Release 4.3
   • Funding Required (Qualitus, ILIAS-Verein)
   • Development: Jean-Luc Braun

3 Additional Information

• If you want to know more about this feature, its implementation or funding, please contact: alex.killing at gmx.de

4 Discussion

JF 16 Nov 2009: We highly appreciate this idea.

Helmut Schottmüller, 16 Dec 2009: I would propose a simple CSS framework for the basic CSS styles that deals with browser issues, adds a reset style sheet and so on. Examples for CSS frameworks are YAML (too complex in my opinion), Blueprint (small and clean), or YUI grids (mostly for grid layout).
A framework would be a great basis for ILIAS core CSS styles and it would make ILIAS much more expandable.

Another good reason for a CSS revision/CSS framwork is to get rid of design tables, especially the central design table table.il_ColumnLayout. The left, center and right columns could be easily handled with a simple CSS framework. One of the major problems is that some CSS print styles like page-break-after, page-break-inside, aso are only working properly inside block elements but not in tables.

ILIAS_LM 07 May 2010
This feature is linked to ILIAS Redesign 2009. So if someone has got the money: Please fund! :-)

Alex, 20 Dec 2010: I checked the CSS frameworks again:

• YAML: The YAML license (CC-BY) is not compatible with the GPL. We already have enough license issues in ILIAS and I would not like to add a new one for this fundamental feature.
• YUI Grids: Currently it is unclear how much we want to rely on YUI in the future. I suggest not to add a new dependency to YUI, if there are alternatives.
• Blueprint: The feature we should definitely try to use for 4.2.0 is the reset CSS. The grid layout seems only to provide fixed-width layouts. IMO this is something we can discuss only after we got rid of framesets. I agree that Blueprint is very simple compared, e.g. to YAML.

• Try to use reset CSS and revise style classes and structure in delos.css.
• Get rid of framesets
• Discuss fixed width layout based on Blueprint (or a similar framework).

Alex, 15 Mar 2011: We have a first verions of a revised delos.css. I opened a new branch at http://svn.ilias.uni-koeln.de/wsvn/ILIAS3/branches/leifos/4_2_css/.

I will now migrate the templates of the basic componentes to this new skin. After that the component maintainers should be able to estimate the effort for migrating to the new style.

We will provide new CSS guidelines shortly, that also need to be taken into consideration.

19 June 2012: The Advisory Council of the ILIAS open source e-Learning society has decided to invest 10.000 € into the CSS revision. Aim is to offer a revised CSS for release 4.4.

JF 3rd Sep 2012: We will continue the work on improving the CSS/Templates in ILIAS. Current ongoing issues are listed above.

Alex 18 Oct 2012: Jean-Luc removed one of our nastiest layout tables in the main layout. This gives us the opportunity to start with a basic Responsive Design.

5 Implementation