Urs Hunkler

@ http://docs.moodle.org/en/Development:Themes_2.0_overflow_problems

I added another proposal to introduce an admin theme for all admin/settings pages as a second theme used parallel to the "nice" theme.

For example WordPress and Drupal handle the difficult to solve very different needs for admin pages and content pages by using two themes.

Hi Sam,

never mind with taking the time you need to answer. For me fast answers are worth nothing - valuable answers are the ones that count. And your answer is of much value.

You shed a bit of light on the painful process to clean up Moodle 1.9 CSS - and be sure I appreciate the huge amount of work you have done in this process and the great result.

One way to read your answer is: the series of id- and classnames, one line rules, redundant CSS properties helped you in the process. And then Moodle developers decided to stop you after 3/4 of your way and that's what we have now.

With this explanation I understand the contradictional state and want to encourage you to continue your process to the end. And I want to encourage the Moodle developers to rethink their decision to leave the CSS files in a 3/4 ready state.

My proposals are:
_1 create machine optimized one line style rules without redundant CSS properties for fast transfer.
_2 create human optimized CSS which can be easily understood and can work as an example how to write good and fast CSS.

My preference is _2. In my projects I will start to write CSS with one information per line because I found out that this is the best way to work. And to use white space for the eye and brain to recognize structures and the meaning of the information. One information per line gives me the very valuable opportunity to duplicate lines and move lines around without the need to modify these lines too much. In good editors you have key strokes for these tasks. After many years working with CSS I found this the most productive way to work with CSS - both for understanding and for creating.

I am going to write CSS rules like:

#page-content,
#regions,
#regions-mask
{
    float: left;
    position: relative;
}
#page-content 
{
    clear: both;
    overflow: hidden;
    width: 100%;
}

You are welcome Mary!

To think about a straight forward way to visualize the complex page structure and CSS was a nice task. Creating the interface was a nice challenge too.

The main focus needed to be on the simple aspect "Stepping through the single CSS rules" to let the user experience and understand the changes. Additional gradual enhancements which are not visible first hand and therefore not disturbing the main task shall support understanding: the collapsible settings offer a more detailed insight.

Showing both the "fixed" and the "flexible" page version offers a helpful overview over the different CSS rules and "box" div names needed to create a flexible width page based on percentage width and a fixed width page based on pixel width.

I hope the Moodle 2.0 layout demo helps people to understand the page structure and to change the layout to their needs without much trail and error.

These pages I designed and created with "Progressive Enrichment" for a great page experience. Dan Cederholm calls the way to use CSS3 and JavaScript to create a more appealing experience in modern browsers without breaking the pages in the other browsers "Progressive Enrichment". See Dan's book Handcrafted CSS.

And while workig with modern web techniques I also used the nice Webfont "Graublau Sans Web regular/bold" from fonts.info for the headlines.

A question to Sam or who created "pagelayout.css".

When I worked on the "flexible" version of the page layout I found it very disturbing how the CSS rules are build.

#page-content #region-main-box #region-pre-box #region-main-wrap #region-main  {margin-right:0px;margin-left:460px;overflow:hidden;}

Why are all the ids used in the page structure listed in the rules?

When working on alternative layouts building the rules this way is very time consuming and error prone. Therefore on the visualization page I only use the base id "#page-content" and the id for the column. To apply the rule using one single id would be enough.

If the list of ids shall help people map the rules to the page structure I do not understand why all CSS properties are set in one line. This is the most difficult way for people to read and understand the content of the rule.

And why has been decided to set redundant properties like "position" or "overflow" in each rule instead of defining them once in grouped rules? Understanding the rules is again made more difficult this way.

The way the CSS is set up in "pagelayout.css" is against many recommendations to build well structured and fast rendering CSS. What advantages do we/Moodle gain from this way to write CSS?

Mary, you keep me busy working on my Moodle 2.0 layout demo page.

I added a page visualizing Matt's Holy Grail flexible percentage based layout ported to the Moodle naming scheme.

You mentioned differences in the creation and naming especially building the structure from left to right and vice versa. The flexible and fixed layout work different - they need to fulfill different needs.

Naming

• In fixed the third box sets the background for the right column
• In flexible the third box sets the background for the left column

Creation

• In fixed the columns are moved to the right
• In flexible the columns are moved to the left

CSS and places where you need to change column width values

• In fixed you have some few easy values
• In flexible you need to change more values and you need more calculation for width and margins

I hope the visualization helps.