Themes

Hi all, I'm a developer at UCLA and we also want to use Bootstrap in our theme.  We have, however, used a very different approach since we're very allergic to changing Moodle core code or overriding renderers too much.  We decided that we mostly wanted to do this by overriding Moodle's core CSS, so we opted to use the SASS stylesheet language and the Compass framework to achieve this.

In case you're not up to speed on what SASS & Compass are, you can check out these links to learn more:

http://sass-lang.com/
http://compass-style.org/
In a nutshell, SASS is a CSS metalanguage that adds constructs (variables, functions/mixins) to make it easier to work with CSS.  Compass is a library of pre-written SASS, for example it contains a mixin called: border-radius($border: 5px) that when used will generate CSS for a border radius that's compatible with all browsers.  You should know that this is a compiled language, but it's not as scary as it sounds once you start using it.  Also, since it is compiled, it outputs minified and compressed CSS.

To give you some motivation on how you'd use SASS to override core CSS, take for example the common class names that moodle uses for some tables:

.userenrolment, .forumheaderlist, .generaltable

Normally, you'd have to copy/paste the bootstrap code to override those in your theme CSS, then add your own custom changes on top of that.  Then track down all other classes that are used in tables, etc.  That's pretty awful, but with SASS you can do something like the following:

.userenrolment,
.generaltable,
.forumheaderlist {
    // Copy over Bootstrap table styles at compile time
    @extend .table;
    @extend .table-striped;
    @extend .table-bordered;
}

And now you have boostrap tables with three lines of code.  Suppose you wanted to change the nav tabs.  The following SASS will give you Moodle nav-tabs everywhere:

// .tabrow0 is the classname of default Moodle navigation tabs
.tabrow0 {
  // Grab the boostrap styles at compile time
  @extend .nav;
  @extend .nav-tabs;
}

// We still need to modify the hover states
.tabrow0 > .selected > a,
.tabrow0 > .selected > a:hover,
.tabrow0 > .selected > a:focus {
  color: $gray;
  background-color: $bodyBackground;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

So hopefully you can see that sneaking boostrap into Moodle is a lot easier with SASS.  But there's an added benefit to using a tool like this.  First, you don't have to bring in bootstrap as a CSS file, you can bring in the boostrap SASS source files and now you have the option of loading only the things you need and overriding colors and other default values.  Suppose you only want the bostrap tables and buttons, then you only load those two files. 

Furthermore, it allows you to introduce organization into your CSS.  Most of our CSS changes were bundled into a few 1000 line enormous files.  The SASS code blocks I showed live in a single file each.  To give you a better idea, this is how our SASS project file looks like:

theme\ucla\sass\
            \ccle
            \course
                calendar.scss
                control_panel.scs
                forum.scss
            admin.scss
            blocks.scss
            frontpage.scss
        bootstrap.scss
        footer.scss
        form.scss
        header.scss
        navs.scss
        table.scss

By breaking up the files into separate modules, it's a lot easier to make complex changes to your theme. 

There are caveats of course.  Some styles are harder to change than others because of the way Moodle creates their CSS.  Some selectors are very specific and it's not very easy to override them.  There are also class name collisions which can only be resolved by renaming bootstrap styles (which sucks if they change it in the future).  Then there's the issue of adding a compile step to your workflow.  This is not as bad as it sounds since Compass includes a tool that automatically compiles SASS files when it detects changes -- making development pretty much the same as saving your CSS and reloading the page.  What you would need to do is make sure you compile your CSS (if it's changed) before you deploy.

The good outshines the bad, in my opinion since SASS constructs let you do responsive design very easily.  By bringin in Boostrap, you get their responsive grid by simply using their classnames in your custom code.  This stuff just works out of the box.  Suppose you wanted to make complex changes you can use SASS mixins to do something like:

// Suppose in your mobile site you wanted to change the tabrows to be smaller
.tabrow0 {
  // override Moodle's tabs
  @extend .nav;
  @extend .nav-tabs;
 
  // Use a mixin to add behavior for mobile.. The mixin will generate the media query
  // In this case, reduce the height of the tabs
  @include respond-to(handhelds) {
    height: 50%;
  }
}

In case you're wondering the mixin looks like this:
@mixin respond-to($media) {
    @if $media == handhelds {
        @media only screen and (max-width: 479px) { @content; }
    }
    @else if $media == wide-handhelds {
        @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
    }
    @else if $media == tablets {
        @media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
    }
}

It would be very nice if there was momentum in the community to adop a CSS framework like SASS in Moodle.  I think there are great benefits in making core Moodle CSS more modular so that we can customize it as easily as we can customize blocks, modules and plugins.  It would certainly make some of the caveats go away.  I think it would also help in getting the community to make Moodle responsive by default. 

We have already done a lot of the legwork into adopting SASS in our workflow and I've created a branch (off the 2.4.1 tag) that adds the basic SASS project files and some of the overrides that I showed above to the Moodle standard theme.  The branch contains the config file needed if you're going to use Compass (recommended). 

The target compiled file is called 'theme.css'.  It's in the 'theme/standard/style/' folder and it's loaded into Moodle's CSS just like any other file in the style folder.

https://github.com/alroman/moodle/commits/moodle-sass

Some more screenshots:

Hello,

is this theme finally ready for production sites and would you also have the same theme for moodle admin dashboard?

Regards, Heather