David Scotson

I'd started on this a while ago but got sidetracked by other stuff at work:

https://github.com/ds125v/moodle/compare/bootstrap3

I didn't really get much past the find'n'replace stage, but it was mostly hanging together even with just those mechanical changes. I found it noticeably "snappier" and the theme measurably smaller.

For the rewrites in .less files, I found that you could remarkably simplify things if you went with a max of 2 columns all the time. I don't know if everyone's ready for that step, but I think there's many benefits so I think we're going to investigate it for our next update.

I think the only thing that made me sigh a bit was the thought of having to re-do the work to make the forms look Bootstrappy again, though the fact that Bootstrap moved to using the grid for forms, and the more flexible grids in v3 made some of this much easier (thinking in particular about the backup workflow, which is all accessible to rewrite the HTML to suit Bootstrap3 via renderers).

Our update will be to Moodle 2.6, but I'm hoping to submit some renderers I develop for it to 2.7 (and/or 3rd party themes) to get as many people working on the same stuff as possible. Maybe MoodleHQ will decide to upgrade to Bootstrap 3 for 2.7?

If you know what bits you don't want then that's already possible via the tools built into Bootstrap.

The Bootstrap .less is all broken down into individual files for various areas, so you can just skip a whole file in a similar way to excluding a CSS file in Moodle. They even have an online form that does it for you:

http://getbootstrap.com/customize/

Lots of people do that when they build small focused sites with Bootstrap, which keeps the CSS size to the absolute minimum. I've used it to exclude the Glyphicons CSS when I'm using Font Awesome instead, as another example.

The problem with applying that to Moodle is, how do you know in advance which bits of Bootstrap a course designer, or a in-house plugin developer, is going to use? Why shouldn't they be able to create a grid of icons in a Page or Book resource and have it work responsively on phones too? So you need to second guess not only what the theme structure will use, but also all the content. It's different if the same person is in charge of both content and the CSS and it's a primarily static site.

In the latter case, even if you're not using Bootstrap, there are tools (like Dust Me Selectors: https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) that will examine every page of your site and remove all unnecessary CSS (by comparing it against classes found in your HTML), but again, as soon as your site is dynamic or accepts user input then you've got future content that the tools can't scan for.

Some process_css PHP to do similar within a theme. This time it strips it from both core, 3rd party and your theme, again reducing it in size by about 10%, which might be enough in many cases to bring the full CSS below the magical 4096 selector limit which requires sending multiple CSS files to IE8 and 9. I also added a bit to strip some ie6 and 7 CSS too. (Might also look at removing unecessary wekbit, moz and khtml rules too)

function clean_process_css($css, $theme) {

    // Set custom CSS.
    if (!empty($theme->settings->customcss)) {
        $customcss = $theme->settings->customcss;
    } else {
        $customcss = null;
    }
    $css = clean_set_customcss($css, $customcss);
    $css = clean_normalize_css($css);
    $css = clean_strip_rtl_css($css);
    $css = clean_strip_ie_css($css);

    return $css;
}

function clean_set_customcss($css, $customcss) {
    $tag = '((setting:customcss))';
    $replacement = $customcss;

    if (is_null($replacement)) {
        $replacement = '';
    }

    return str_replace($tag, $replacement, $css);
}

function clean_normalize_css($css) {
    $find = array(
        '/[\n\s]+/',
        '/}\s*/',
        '/\*\//',
        '/,\s*/',
        '/(@media[^{]*{)/',
    );
    $replace = array(
        ' ',
        "}\n",
        "*/\n",
        ',',
        "$1\n",
    );

    return preg_replace($find, $replace, $css);
}

function clean_strip_rtl_css($css) {
    $find = array(
        '/,\.dir-rtl[^,\n]*,/',
        '/,\.dir-rtl[^{\n]*{/',
        '/\n\.dir-rtl[^,\n]*,/',
        '/\n(#|\.)[^\s]*dir-rtl[^\n]*}/',
    );
    $replace = array(
        ',',
        '{',
        "\n",
        "",
    );

    return preg_replace($find, $replace, $css);
}

function clean_strip_ie_css($css) {
    $find = array(
        '/\n\.ie(6|7)[^\n]*}/',
        '/\nbody.ie(6|7)[^\n]*}/',
        '/\n\#[^\s]+.ie(6|7)[^\n]*}/',
    );
    $replace = array(
        '',
        '',
        '',
    );

    return preg_replace($find, $replace, $css);
}

This is a bit sketchy as there's no real consistency to the CSS input that it works on, it's probably wise to run it and diff the output to double check it's not eating large parts of your site.

In case this is useful to anyone else, a script to replace running recess on a Bootstrap/LESS theme that removes rtl CSS as it does so.


#!/bin/sh
recess --compile --compress less/moodle.less > style/moodle.css
sed -i 's/}/}\n/g' style/moodle.css
sed -i 's/\(@media[^{]*\){/\1{\n/g' style/moodle.css
sed -i 's/,.dir-rtl[^,]*,/,/g' style/moodle.css
sed -i 's/^.dir-rtl[^,]*,//g' style/moodle.css
sed -i 's/,.dir-rtl[^,]*{/{/g' style/moodle.css
sed -i '/^[^ ,]*dir-rtl/d' style/moodle.css


In english that is putting each CSS block on a single line, removing any dir-rtl selector in the middle, removing any at the end, removing any at the start, and finally removing the entire block if the selector is for rtl.

It only removes the rtl stuff in your theme CSS, not the CSS in core or add-on modules but it can reduce your theme CSS by about 10%.

I'm hopeful that something like this could be built into Moodle so that it can do this for all code, and possibly even strip out the ltr stuff for rtl users but in the meantime this helps a little.

One suggestion I made was that all the rtl stuff in Moodle CSS should start with .dir-rtl and not be mixed with ltr code, which would make removing it a bit easier than the above (basically start at .dir-rtl and delete everything up to the next squiggly close bracket).

I might experiment with trying that from within a theme (if you use CSS postprocessor function then you get access to all CSS) to see how far we are from having that working with the current CSS.

Looking at the original course, the indentation is a totally random combination of section description, labels, and indenting. And some text was written with TinyMCE so gets extra p tags compared with raw text which just sits in a div.

It's stuff like that that's going to make nice typography layouts hard in Moodle.